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 spacing on the Header Text

    Asked by SteveSoler on September 20, 2014 at 06:38 PM

    Is there any way to adjust the amount of space that appears above and below the text when using the Text Widget? 

     

    Thanks.

    remove space Header Space Header Text
  • Profile Image
    JotForm Support Manager

    Answered by Jeanette on September 20, 2014 at 11:51 PM

    If you want to reduce the space between the label (the text) and the box itself

    insert this code:

    .form-label-top, .form-label-left, .form-label-right {
        margin-bottom: 2px!important;
    }

     

    If you want to reduce the vertical space between each field, then check this guide

  • Profile Image

    Answered by SteveSoler on September 21, 2014 at 02:01 AM

    Thank you, but I'm actually referring to the "Text" widget, not the Text Fields or Text Areas. The widget that does nothing more than add a line of text with no field associated with it. 

    Thanks.

  • Profile Image
    JotForm Support

    Answered by EltonCris on September 21, 2014 at 06:13 AM

    @SteveSoler

    We do not have "Text Widget" so I assumed you mean the Text Tool under Form Tools like on the image below?

    Can you please let us  know the form in question so we can check the Text element? Basically, Text is always wrap with paragraph tags , you can remove these tags on the HTML editor (top toolbar when you click the text field) to reduce the spacing. Or you can inject the following CSS codes to your form.

    .form-html p {

    margin: 2px;

    }

    Guide: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes-to-your-Form

    This should get rid of the default paragraph top and bottom margins. If this doesn't work, let us know the form in question so we can inspect it here.

    Regards!

  • Profile Image

    Answered by SteveSoler on September 21, 2014 at 06:47 PM

    Yes. The Text Tool is exactly what I am referring to. I tried the CSS you gave me but it didn't work.

     

  • Profile Image
    JotForm Support

    Answered by ashwin_d on September 22, 2014 at 12:43 AM

    Hello SteveSoler,

    I did check all your form you have in your account (one form with multiple clone) and found that you only have one "Text" field in your form. 

    Please inject the following custom css code in your and see if that makes any difference:

    .form-html {

    padding: 0px !important;

    margin-top: -10px !important;

    margin-bottom: -6px !important;

    }

    Please add just the values as per your requirement.

    Thank you!

     

  • Profile Image

    Answered by SteveSoler on September 23, 2014 at 12:06 AM

    I tried your CSS but it didn't work. 

    I have several clones because I always make a backup before making any changes just in case. 

    If you notice my form has 3 Tabs. At the top of each tab is a Text header that I placed there. That is the text in question. The headers read:

    How Can We Contact You?

    Where Are You Located?

    How Can We Help You?

    I would love to change the amount of space above and below these words.

  • Profile Image
    JotForm Support

    Answered by EltonCris on September 23, 2014 at 01:50 AM

    @SteveSoler 

    Thanks for the clarification. We got it! :)

    So it's not actually the Text Tool, it's a Header Tool. :)

    Use the following CSS codes instead and inject it to your form.

    .form-header-group {

    padding-top: 4px !important;

    padding-bottom: 4px !important;

    }

    This applies to all your headers. You can change the 4px value if you want to adjust it's top and bottom spacing.

    Result:

    Cheers!

  • Profile Image

    Answered by SteveSoler on September 23, 2014 at 10:04 AM

    My apologies to you all. I'm sorry. I'm not sure why I thought it was the Text tool, when it was actually the Heading tool I used. But thank you. The last CSS worked perfectly!

  • Profile Image
    JotForm Support

    Answered by ashwin_d on September 23, 2014 at 10:27 AM

    Hello SteveSoler,

    On behalf of my colleague, you are welcome.

    I am glad to know that your issue is resolved.

    Do get back to us if you have any questions.

    Thank you!