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 you specifically change the form field colors?

    Asked by GlobalNetwork on April 28, 2011 at 08:35 PM

    How do you specifically change the form field colors? The default white is too bright for my site.



    This is a re-post of a comment on How to Create Your First Web Form

  • Profile Image
    JotForm Support

    Answered by abajan on April 28, 2011 at 08:55 PM

    Hi GlobalNetwork

    You can change the background of the form by the following method:

    1. Load your form in the form builder (My Forms > select the form > click "Edit")

    2. While on the "Setup and Embed" tab, click "Preferences"

    3. Click the "Form Styles" tab

    4. To the right of "Background" enter the color of your choice or just type "transparent" for no color

    Changing the background color of the inputs themselves (text boxes, text areas and so on) is a bit more complicated. While still on the "Form Styles" tab, go a couple sections down to the "Inject Custom CSS" area. Each type of field has its own class name. Here are just a few examples:

    (In each instance, the background color is changed to orange: #FD7800)

    Headings:

    .form-header-group {
    background: #FD7800;
    }

    Text Boxes:

    .form-textbox {
    background: #FD7800;
    }

    Text Areas:

    .form-textarea {
    background: #FD7800;
    }

    Dropdown Selectors:

    .form-dropdown {
    background: #FD7800;
    }

    To discover the class names of other types of fields, Firebug is highly recommended.

    Hopefully, you have found this solution to be useful. Please feel free to post additional questions regarding our form builder.

  • Profile Image

    Answered by on January 10, 2012 at 10:54 AM

    So this is the full code I must type in 'Inject Custom CSS'?

     

     

    .form-header-group {background:#C7C7C7;}

    .form-textbox {background:#C7C7C7;}

    .form-textarea {background:#C7C7C7;}

    .form-dropdown {background:#C7C7C7;}

  • Profile Image
    JotForm Support

    Answered by abajan on January 10, 2012 at 11:06 AM

    That depends. To which form are you referring? Much of CSS has to do with context. If you would rather not publicly divulge the form's URL, give its name and we can locate it it in your account.

    Thanks.