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

    Can you use one font, size and color for text in the form header and another in the text in the form elements? If so how?

    Asked by TonerCarAOLcom on July 06, 2014 at 11:36 PM
    size font elements and
  • Profile Image
    JotForm Support

    Answered by ashwin_d on July 07, 2014 at 02:53 AM

    Hello TonerCarAOLcom,

    Yes, it is possible to achieve your requirement. 

    You can inject the custom css code to change the font size and color. 

    The following custom css code will change the font family / size and color of the form headings:

    .form-header-group {

    font-family: 'Verdana';

    font-size: 23px;

    color: blue;

    }

    For the rest of your form fields you can change the "Form Style" preferences to change the font size and colors. Here are the steps:

    1. Load your form in edit mode.

    2. Click on "Setup & Embed"

    3. Click on "Preferences"

    4. Click on "Form Styles" tab where you can change the font settings of your form. Please check the screenshot below:

    Please be noted that it is also possible change the font style by injecting custom css code. Example css code:

    .form-dropdown, .form-textarea, .form-textbox{

    color:blue !important;

    font-size: 14px;

    font-family:"Arial",Verdana,Tahoma,sans-serif;

    }

    You may like to take a look at the following guides as well:

    https://www.jotform.com/help/75-Customize-your-Form-using-Custom-CSS-Codes

    https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    https://www.jotform.com/help/176-How-to-apply-custom-CSS-to-a-particular-field

     

    Hope this helps.

    Do get back to us if you have any questions.

    Thank you!

  • Profile Image

    Answered by TonerCarAOLcom on July 07, 2014 at 01:28 PM

    Hi Ashwin,

    I injected the following CSS code:

    .Form-header-group {

    font-family 'Microsoft sans-sarif';

    }

    with no effect at all. Are there any syntax errors?

    The form number is 41856730498163. Please feel free to take a look.

     

    Thanks,

     

    Peter

     

  • Profile Image
    JotForm Support

    Answered by david on July 07, 2014 at 03:08 PM

    Hi,

    You will not see a change because you have already set the whole form to 'Microsoft sans-sarif' already:

    .form-header{

    color:blue !important;

    font-size: 14px;

    font-family:"Arial",Verdana,Tahoma,sans-serif;

    }

    This should overwrite the other CSS you have for the header.

    Please let us know if you have any other questions and we will be happy to help.

    Thank you for using Jotform!