How to customize section collapse 'button'

  • Profile Image
    CEOGlobal
    Asked on September 28, 2017 at 04:34 PM

    Hi,

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

    Thanks,  Andy

  • Profile Image
    Marvih
    Answered on September 28, 2017 at 05:40 PM

    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.

  • Profile Image
    CEOGlobal
    Answered on September 28, 2017 at 06:54 PM

    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.

  • Profile Image
    John_Benson
    Answered on September 28, 2017 at 08:18 PM

    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.


  • Profile Image
    CEOGlobal
    Answered on October 02, 2017 at 02:12 PM

    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.

  • Profile Image
    John_Benson
    Answered on October 02, 2017 at 02:39 PM

    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.

  • Profile Image
    CEOGlobal
    Answered on October 02, 2017 at 02:53 PM

    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?

  • Profile Image
    BDAVID
    Answered on October 02, 2017 at 04:25 PM

    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?

  • Profile Image
    CEOGlobal
    Answered on October 03, 2017 at 01:39 PM

    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.

  • Profile Image
    aubreybourke
    Answered on October 03, 2017 at 02:00 PM

    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/



  • Profile Image
    CEOGlobal
    Answered on October 03, 2017 at 02:29 PM

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

  • Profile Image
    John_Benson
    Answered on October 03, 2017 at 02:57 PM

    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.