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

    Is it possible to shade areas of the form?

    Asked by kjplant on October 17, 2014 at 10:19 AM

     I have several very similar sections to my form and need to differentiate them by shading

    sections customize shading color form designer inject css form style
  • Profile Image
    JotForm Support

    Answered by Jan on October 17, 2014 at 11:00 AM

    Hi kjplant,

    Yes it is possible to customize the colors on your form. The font color, font size, font type, the input boxes, text area or the elements itself.  All this options are available on the Form Style toolbar at the top of the form editor itself.

    You can try our new tool called "Form Designer". It lets you customize the form easily.

    You can also apply Custom CSS on the form. (http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes)

    Please be more specific on what area of the form you want to apply some changes.

     

    Hope this answers your question. Thank you!

  • Profile Image

    Answered by kjplant on October 20, 2014 at 04:31 AM
    I’m sorry but I don’t see any of those options. Where is the ‘Form style toolbar’? Where is ‘Form designer’?
    [cid:image001.png@01CFEC48.56DE3F80]
    Kevin Plant | Select Services
    ...
  • Profile Image

    Answered by kjplant on October 20, 2014 at 04:41 AM
    Sorry, have found the options you mention below now but I still cannot shade areas of the form to indicate that certain entry field are related. Nor am I able to move entry fields to where I’d like them, the form seems to make it’s own decisions about that!
    Kevin Plant | Select Services
    ...
  • Profile Image

    Answered by kjplant on October 20, 2014 at 04:41 AM
    The ‘Form designer’ is very much a Beta isn’t it? I highlight one field, change its properties and it amends another field on the form???
    Kevin Plant | Select Services
    ...
  • Profile Image
    JotForm Support

    Answered by Jan on October 20, 2014 at 06:55 AM

    Hi Kevin,

    I can see that you want to shade or changed background color of specific fields. In order to that you need to apply custom css on a certain element id.

    First, you need to get the Field ID. Here's our guide on How to Find Field IDs and Names. Here's a screenshot as well to better understand how to get it. You should be on the Form Editor to do this.

    #input_8 is the element for the text-box. If you want to changed the whole field it should be #id_8.

     

    Second, you need to inject or add this custom css on the form. Here's a guide on How to Inject Custom CSS.

    #id_8 {background-color: yellow;}

    It should look like these after applying the css code.

    This guide might also helps - Customize your Form using Custom CSS Codes.

     

    In order to move fields, you can just drag it and put there where you want it. You can also "Shrink" fields to align them on another field. Here's our guide on Positioning the Form Field.

    You can also move the field up or down. Click the settings on a selected field and you will see those options.

     

    Hope you find this answer useful. Let us know if you have any questions. Thank you.