Several background colors on a single form?

  • Profile Image
    SonomaMike
    Asked on October 21, 2017 at 10:48 PM

    Can I make certain sections of a form have a different background color than the remainder of the form?

  • Profile Image
    EltonCris
    Answered on October 22, 2017 at 03:29 AM

    That's possible when you inject custom CSS codes to your form. 

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

    Example:

    li#id_57 {

        background: #ececec;

    }

    You can use the same CSS code and change the ID number for the target field. Here's how to get the field ID number http://www.jotform.com/help/146-How-to-find-Field-IDs-Names.

    For the hex colors, you may want to refer to this page http://www.color-hex.com/ or your preferred source.

    If you need further assistance, let us know here.

  • Profile Image
    SonomaMike
    Answered on October 22, 2017 at 04:03 PM

    I tried this and it doesn't seem to work.  As an example, I have a section of a form with the field id number of :  #multiSelect-checkbox-2, #input_2 (copied directly from the Field IDs box)

    I entered the following CSS code:

    li#multiSelect-checkbox-2, #input_2 {
     
        backgroundcolor: #d7ddea;
      
    }

    (Here's a screen capture)

    1508702420CSScode1.PNG

    I save it, but nothing changed on the form.  What did I do wrong?

    (BTW, you were very helpful to me the other day in an online chat. Thanks.)


  • Profile Image
    jonathan
    Answered on October 22, 2017 at 04:29 PM

    Can you please confirm first that this is your form https://www.jotform.us/form/72945449484168 you are working on?

    And tell us also what is the field name or question you were trying to change its input background color.

    We will check further once we identify the correct form and details.

    Thanks.


  • Profile Image
    SonomaMike
    Answered on October 22, 2017 at 04:57 PM

    Yes, that's the one.  Its a clone of another form that I have been working on.  I made the clone to experiment with things like changing the color of certain sections without having to test changes to the "master" form that I'm pretty happy with.

    I'd like to change the color of the section three sections between the separators ("Select dates and times... etc.)


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

    Thank you for providing us with the details.

    Did you meant to do like this...

    1508707647zzz 2017-10-23 05.25.50.png

    This is the CSS code needed.


    #id_3,#id_4,#id_5 {

        background : #d7ddea !important;

    }

    Let us know if you need further assistance.