What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    How To Change Background Color of Form Collapse Section

    Asked by bdoodle on February 13, 2015 at 09:17 AM

    Per another Forum answer, I injected CSS in my form to try to change the background color of my section headers.

    It didn't work.

    Please tell me what I'm doing wrong.  Thanks!

    Page URL:
    http://www.madsails.com/Order_FS_sailsTest.html

    section background-color Form Collapse tool Form Collapse Form Collapse CSS
  • Profile Image
    JotForm Support

    Answered by Charlie on February 13, 2015 at 11:00 AM

    Hi,

    Are you referring to the form collapse bar that divides your form per section? If that is that case, you can try adding this code instead to change the color of the section:

    .form-collapse-table {

    background: #1c487d !important;

    }

    You may also want to add this code to change the font color of the section headers:

    .form-collapse-mid {

    text-shadow: none;

    font-color: white;

     

    }

    But make sure that there's not conflict. Also, change the color based from your own preferences. Here's the cloned form that I edited for testing purposes: http://form.jotformpro.com/form/50434761309958 

    I hope this helps.

    Thank you.

     

  • Profile Image

    Answered by bdoodle on February 13, 2015 at 02:38 PM

    Thank you!

    Using your code, I was able to change the background of the collapsible headings and remove the shadow on the label text there.  I also made the headings larger and bold.  I wanted to remove the italics so I added:

        font-style: normal;

    to your second bit off CSS code.  That did not work. How can I fix this please? I want these headings to match those elsewhere on my website.  See below for my code:

    Also, I'm unable to get the labels under the radio button in the "Complete Order" section to be white. Any suggestions?

  • Profile Image

    Answered by Ben on February 13, 2015 at 04:07 PM

    I see that the Form Collapse tool does not have italic fonts any more, so I believe that you have sorted that out.

    For anyone else, looking for the same, the: font-style: normal; is the correct code to use to make it not italic, depending on the other CSS code, you might need to add font-style: normal font-style: normal; as instead.

    This would end up looking like:

    .form-collapse-mid {
        font-style: normal;
    }

    Now in regards to the radio buttons, I have moved this to a new thread here: http://www.jotform.com/answers/515818

    We will shortly help you set it up properly there.

    Thank you.