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

    Formatting Individual Headlings

    Asked by dlasson on August 06, 2015 at 10:01 AM

    Am I able to apply formatting (color, font) changes to one heading only - as opposed to the entire form?

    Thanks! 

    heading font Entire
  • Profile Image
    JotForm Support

    Answered by Boris on August 06, 2015 at 10:49 AM

    Yes, you can do so by applying custom CSS to your form. Don't worry, it is not as hard is it may seem at first. :)

    First, we need to find our the selector we will be using in the custom CSS. You can find it our by right-clicking on the header that you wish to edit, and select Inspect Element from the popup that opens.

    For example, let's assume that you would like to edit this form:

    https://www.jotform.com/52116045767152

    We find a heading that we wish to edit, for example "Vision - Avesis", right-click on it, and select Inspect Element.

    There, a panel will open, where we will see an ID that we can use, starting with a hashtag character.

    So the selector to use for this header is #header_36 and the code to change its size and color would be this:

    #header_36 {
      color: red !important;
      font-size: 1em !important;
    }

    Code can be injected either by following the above linked guide, or by using the Designer and pasting the code directly into the textbox under the CSS tab.

    You can repeat the same steps for any headers on your forms, only the number will be different - #header_36, #header_55, #header_1...

    Please let us know if you need help styling any of your headers, and we will be happy to help you with your custom CSS code. :)

  • Profile Image

    Answered by dlasson on August 06, 2015 at 02:03 PM

    Thanks so much. 

    I did something wrong and cannot correct it. I want the text color in each text box to be black. And the "Total Deductions" heading (towards the end of the form) to be the same font as the other headings, and in green.

    Thanks.

  • Profile Image

    Answered by Ben on August 06, 2015 at 02:57 PM

    I presume that this is related to this form as mentioned above by my colleague: https://www.jotform.com/52116045767152

    Looking at it and the header that you have mentioned, the issue is happening because of the following code:

    #header_75 {
        color: red !important;
        font-size: 1em !important;
    }

    I have removed that code from your form for you so that you can continue as usually.

    I would only like to mention that what my colleague above had said is true, but when using ID of the element (text appearing after #) you do not need to use !important or maybe only need use it some specific cases.

    Also, all code that you add by following the steps here: Inject Custom CSS Codes can be removed by going into the same field at the later time and locating them.

    I suggest adding the new codes under all the other, so that makes it even easier to find if so needed, but I would like to also suggest this guide: How to View Form Revision History - If you ever find yourself in a position that you want to revert a change.

  • Profile Image

    Answered by dlasson on August 06, 2015 at 03:30 PM

    I am sorry. I am having trouble with the codes (getting error messages) as I am not familiar with coding syntax. If you could just change the "Total Deductions" heading to green, that would be great. Thanks!

  • Profile Image

    Answered by Ben on August 06, 2015 at 04:03 PM

    Oh yes, I see now that you have mentioned it in your previous reply as well.

    I have changed it to be green for you.

    I did so by adding the following CSS to your jotform:

    #header_75 {
        color: green;
    }

    Do let us know how it looks and if you wish to have it in some other color, feel free to let us know the color and we can set it up like that for you.

  • Profile Image

    Answered by dlasson on August 07, 2015 at 12:13 PM

    It looks great. Thanks! You guys are wonderful.

  • Profile Image
    JotForm Support

    Answered by Charlie on August 07, 2015 at 01:13 PM

    Glad to hear that my colleagues were able to help you, and thank you for the kind words, we appreciate it.

    If you needed any assistance again, please do not hesitate to open a new thread here in the forum.

    Thank you.