How to customize section collapse 'button'

Hi,

Is it possible to 'format' the Section Collapse 'button' - possibly in the fashion of putting an image in the submit button?

Thanks,  Andy

Yes it can be done by injecting custom CSS codes, you can check this guide on how to inject a custom CSS into your form http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

This are the examples of customizing using CSS https://www.jotform.com/help/75-Customize-Your-Form-Using-Custom-CSS-Codes

Let us know if you have more question.

I reviewed those links and understand the idea.  However, I don't know which sample (if any) might apply to a 'Section Collapse' button.  Please advise.

Here's an example custom CSS code for the Section Collapse:

.form-section-closed {

background-image:url('insert image link') !important;

}

.form-collapse-table {

background-image:url('insert image link') !important;

}

Here's what it looks like on my test form:

I hope this information helps. Contact us again if you need further assistance.

Hi,  My attempts to place an image the Section Collapse button failed.  The problem is with the image url.  I used a recommended Dropbox image url app to create a direct link, but do not get a result.  Do you have additional articles or ideas about this?  

Does Jotform allow me to upload an image to use for this purpose?  I guess I need to know where it is best to store an image that I want to use for adding to a Section Collapse button.  

Thanks.

You can use JotForm to upload an image and use the URL. Please try this guide: https://www.jotform.com/help/172-How-to-Display-Images-on-Secure-Forms

If you have any questions, please contact us again. Thank you.

My issue is more fundamental.  It does not involve secure or insecure forms.  is there a different article regarding uploading images to be used in a form?

You can upload images through the Image field, but this is meat to display an image in your form, not to set it as a background for another field. 

Can you share here the Dropbox URL of your images?

Hi,

I have tried several Direct link generators etc.

https://www.dropbox.com/s/5czbi8dcgzn8dy9/China%20camps%20survey%20horizontal%20section%20collapse%20button.png?dl=1

dl.dropboxusercontent.com/s/5czbi8dcgzn8dy9/China%20camps%20survey%20horizontal%20section%20collapse%20button.png?dl=0

etc etc.  

Thanks for your advice.

Yes it seems that the links provided by dropbox don't seem to work. 

You can use a free webhosting account instead of dropbox. 

https://www.000webhost.com/

Ok.  I had to give up on this project.  :>(

I saved the image that you provided and uploaded it to our server. Here's the direct link that you can use: 

https://shots.jotform.com/jan/images/section-collapse-ceoglobal-1260619.png

Please try adding this custom CSS code to your form: 

.form-section-closed {

background-image:url('https://shots.jotform.com/jan/images/section-collapse-ceoglobal-1260619.png') !important;

}

.form-collapse-table {

background-image:url('https://shots.jotform.com/jan/images/section-collapse-ceoglobal-1260619.png') !important;

}

Guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

I have updated my demo form. Here's the URL: https://form.jotform.com/72707472128963

I hope that helps. If you have any questions, please contact us again. Thank you.