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 do I change the field background color and the background color outside the form?

    Asked by ronshuller on December 14, 2013 at 10:55 AM
    Page URL:
    http://form.jotform.us/form/33466460011142

  • Profile Image

    Answered by Cesar on December 14, 2013 at 07:29 PM

    You can change the field's background color by injecting CSS code rules for that field. The form's backgroung color can be selected through the top toolbar of the Form Editor.

    Changing colors on a field:

    First you need to make sure which field you want to customize. You can use Chrome's or FireFox's Inspect Element feature to find out the fields name:

    https://cms.jotform.com/uploads/image_upload/image_upload/global/22226_idcolorbkg.png

    Then we can add the proper CSS code to the Form Builder. In this case I will make the field grey. By adding the following code to the Form Builder:

    #id_1{background-color:#999999;}

    Like so:

    https://cms.jotform.com/uploads/image_upload/image_upload/global/22228_csscolorfield.png

    This is the end result. The field's background color becomes grey.

    https://cms.jotform.com/uploads/image_upload/image_upload/global/22231_cssendresult.png

    To change the form's background color:

    On the top toolbar of the Form Editor. Go to Form Styles, Background. Then pick a color form the color graph and click OK.

    https://cms.jotform.com/uploads/image_upload/image_upload/global/22232_pickcolor.png

    This is the example form used:

    http://form.jotform.co/form/33476983310862

     

    If you need further assistance, do let us know. Thank you.

     

    Related Articles:

    How-to-Inject-Custom-CSS-Codes

    Customize-your-Form-using-Custom-CSS-Codes