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 to change the font size of isolated heading?

    Asked by CMRI on March 28, 2017 at 02:46 AM

    Hi,

    On my form, the heading for "Funding" needs to be size 18pt. But when I try to change it from 14pt to 18pt, it changes other headings too. 

     

    Is there code I can put in to isolate the increase in font size to this field?

     

    Thank you!

    Page URL:
    https://form.jotform.co/CMRI/procan-application-form

    Screenshot
  • Profile Image
    JotForm Support

    Answered by Nik_C on March 28, 2017 at 04:07 AM

    Please copy and paste the below CSS to your Custom CSS field:

    label#label_30 {

        font-size: 18pt!important;

    }

    It should show like this:

    Let us know if you have any further questions.

    Thank you!

     

  • Profile Image

    Answered by CMRI on March 28, 2017 at 08:33 AM

    Thank you!!!

  • Profile Image

    Answered by CMRI on March 28, 2017 at 08:41 AM

    One more thing. 

    I tried to change the font to match the rest of the form and it didn't work.

    I thought I could just add "font-family : ITCLubalinGraphW01-Demi " ?

    Can you please let me know how I can add this font type to the code you just sent me 

    label#label_30 {

        font-size: 18pt!important;

    }

  • Profile Image

    Answered by CMRI on March 28, 2017 at 08:58 AM

    And another thing with this widget.

    Can I also increase the space between the two lines?

     

  • Profile Image
    JotForm Support

    Answered by Nik_C on March 28, 2017 at 11:55 AM

    Regarding the font, I'm not sure if that will work, but you can try this code:

    font-family: "ITCLubalinGraphW01-Demi", serif!important;

    And regarding the space of two text fields please use this CSS code:

    input#input1 {

        margin-top: 15px;

    }

    Let us know if you have any further questions.

    Thank you!

  • Profile Image

    Answered by CMRI on March 29, 2017 at 06:48 AM

    The space between the boxes is good, but the text are to close to each other still. How do I increase the space between the fields, i.e. the text? 

    I want to make the space between the boxes and the text bigger. At the moment, if I change the px to a higher number, it just increases the space between the boxes more. 

  • Profile Image
    JotForm Support

    Answered by candy on March 29, 2017 at 10:22 AM

    Hello,

    I have cloned your form on my side in order to test it.

    Unfortunately, it is not possible to set the space between the text boxes wider with CSS codes as the widget is embedded with iFrame.

    Why do you use Multiple Text Fields widget instead of using double separate text fields? If you use double separate text fields, you can set the space between them by injecting CSS codes as you can see the screenshot below:

    Please consider using double separate text fields.

    Thanks.

  • Profile Image

    Answered by CMRI on April 02, 2017 at 07:10 AM

    I have now set it up as two text fields, but I don't know where to put in code to control the space between the lines? 

    Do i need to add more code to the form designer?

    I have been building this form with a lot of help from the Jotform team, so I am hoping you can help me know what code to put in?

    Thank you!

     

     

  • Profile Image
    JotForm Support

    Answered by Welvin on April 02, 2017 at 10:22 AM

    If this is the form: http://www.jotform.co/form/70913333168859, inject the following custom CSS codes in the settings:

    li#id_102 {

        padding: 0 36px;

    }

    li#id_100 {

        padding: 0 36px;

    }

    li#id_99 {

        padding: 0 36px;

    }

    Here's our guide to inject: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes.

    The result will be like this:

     

    Note that you can also adjust the spacing of the entire form. This guide should help you how to do it: https://www.jotform.com/help/62-How-Can-I-Change-Spacing-Between-Questions

  • Profile Image

    Answered by CMRI on April 03, 2017 at 12:04 AM

    Yes - thank you!

     

    That worked :)