How do I change the field background color and the background color outside the form?

  • Profile Image
    ronshuller
    Asked on December 14, 2013 at 10:55 AM
  • Profile Image
    Cesar
    Answered 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