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 can I change the form collapse background color?

    Asked by bkurniawan on September 08, 2014 at 11:50 AM

    Hi,

    I have "grouped" fields to be under a Form Collapse, and I have three form collapse (with the same fields) in one page. What I would like to do is to give background color to the first form collapse darker background color (for example: light grey), and then the second form collapse lighter background color (for example: white), and then the third form collapse the same darker background color as the first form collapse. The purpose behind this is that the user can quickly identify if they are filling the right portion of the form collapse. I am not sure if this is possible. Any suggestions are welcome. Thanks in advance.

    thanks same then and
  • Profile Image
    JotForm Support

    Answered by KadeJM on September 08, 2014 at 12:12 PM

    You mean that you basically want to make each individual form collapse a different color?

    The only thing I'm not certain about is did you mean the form collapse and everything underneath it or just the form collapse bar itself?

    I think this should be possible by targeting the separate form collapse id's with injected css

     

    Example Code:

    div#collapse_1.form-collapse-table {background: blue;

    }

     

    Live Example Form:

    http://form.jotform.us/form/42505226762149 

     

    Result:

     

  • Profile Image
    JotForm Support

    Answered by KadeJM on September 08, 2014 at 12:18 PM

    Sorry about that, I had updated the Example Code to the code as seen below. You'l notice in the css code below that the form collapse as a number after it. That's what targets it just to clarify more.

    div#collapse_1.form-collapse-table {background: grey;

    }

    div#collapse_5.form-collapse-table {background: white;

    }

     

  • Profile Image

    Answered by bkurniawan on September 08, 2014 at 01:15 PM

    Sorry, my bad for not clarifying. Your example shows you change the color of the form collapse itself. I would actually like to be able to change the background color of everything underneath the form collapse. It looks like you are targeting the specific id or css class. My disconnect is that where do you actually inject the code. I really appreciate if you can tell me where I can inject the css code.

    By the way, your example works great in Chrome, but not in the IE. Note: we are using IE 7 here so I understand if that does not work.

  • Profile Image

    Answered by bkurniawan on September 08, 2014 at 01:40 PM

    I found where I can inject the css in the "Setup & Embed". Within that there is a tab called "Form Styles". It looks like I answered my own question

  • Profile Image
    JotForm Support

    Answered by david on September 08, 2014 at 02:35 PM

    Hi,

    Glad to hear it!  If you have any further questions, let us know and we will be happy to help.