How to style specific collapse field in the form?

  • Profile Image
    Perlman
    Asked on October 22, 2017 at 05:05 PM

    I have a similar question that relates to this thread: https://www.jotform.com/answers/1260619-How-to-customize-section-collapse-button-

     

    How can individual section collapse be styled differently instead of styling each collapse the same?

  • Profile Image
    Nik_C
    Answered on October 22, 2017 at 05:28 PM

    To be able to style certain element in the HTML (in your form) you have to target the specific ID of the collapsing field, this guide might help: https://www.jotform.com/help/146-How-to-Find-Field-IDs-and-Names

    When you find the ID of the collapsing field you can then style it as needed. And you can do that with each collapse field separately.

    Hope it helps.

    Let us know how it worked.

    Thank you!

  • Profile Image
    Perlman
    Answered on October 22, 2017 at 05:35 PM

    Thanks,

    Can you help me with sample css for:

    id#_545

  • Profile Image
    Mike_G
    Answered on October 22, 2017 at 06:13 PM

    We will be glad to help you style the form collapse in your form using CSS. We just need more information from you in order for us to do so.

    Can you tell us which of your forms are you currently working on, please? Also, can you tell us specifically which form collapse in that form would you want to style? And lastly, what style would you want to apply to that form collapse?

    We will wait for your response.

     
  • Profile Image
    Perlman
    Answered on October 22, 2017 at 06:28 PM

     hello,

    This form https://www.jotform.com/build/72888913702163

    This form collapse: id#_545

    I would like a background image (any image url place holder will work for now)

    Thank you.

  • Profile Image
    ashwin_d
    Answered on October 22, 2017 at 11:52 PM

    Please inject the following custom css code in your form to add background image in form collapse field:

    div#collapse_545 {

        background-image: url(https://www.jotform.com/images/backgrounds/tileable_wood_texture.png);

    }

    The following guide should help you how to inject custom css code in form:  https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Hope this helps.

    Do get back to us if you need any other changes.

  • Profile Image
    Perlman
    Answered on October 23, 2017 at 12:36 AM

    Perfect,

    Thank you!

    Spencer

  • Profile Image
    Perlman
    Answered on October 23, 2017 at 10:30 AM

    I ran into a problem.  I'm not sure if this is related to the css or something else.

    I have implemented the following code:

    div#collapse_545 {

        background-image: url(https://i.imgur.com/mtCdYIGt.jpg);

    }

    div#collapse_562 {

        background-image: url(https://i.imgur.com/if53eb1.jpg);

    }
    div#collapse_602 {

        background-image: url(https://i.imgur.com/5wUPscF.jpg);

    }


    The background images appear on the form builder.  However when I preview the form, the images for 562 and 602 do not appear.

    Thank you,

    Spencer

    1508768980Screen Shot 2017-10-23 at 7.28

  • Profile Image
    Nik_C
    Answered on October 23, 2017 at 11:52 AM

    I checked your form, but I wasn't able to replicate this issue, the images are showing fine on preview:

    1508773909Screen Shot 2017-10-23 at 5.52

    Could you please double check and let us know if the issue persists?

    Thank you!