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 can I remove the default space above a form?

    Asked by brianhousman on October 04, 2010 at 03:34 PM

    When embedding a form with the simple embed code, is there a way to delete the default space above the form elements? I'm embedding a form on my WordPress site and don't want to have to use the full HTML/CSS if I don't have to...

    inject custom css remove spacing
  • Profile Image
    JotForm Founder

    Answered by aytekin on October 05, 2010 at 03:43 AM

    Can you try the iframe code instead?

    Here is how you can get it. Open your form on the Form Builder:
    1. Open "Setup & Share" tab on toolbar,
    2. Click on "Share Form"
    3. Click on "Advanced Options"
    4. Click on "iFrame Code".

  • Profile Image

    Answered by brianhousman on October 05, 2010 at 08:21 AM

    So I tried the iFrame Code and I see I can alter the "height". However, altering the height paramter seems to chop off the bottom of the form, rather than the top.

    Here is a screenshot of my form depicting the area I would like to decrease in red: http://imgur.com/0Nqp1.png

  • Profile Image
    JotForm Founder

    Answered by aytekin on October 05, 2010 at 08:54 AM

    You can decrease the question spacing to solve that spacing problem. Click on "Preferences" button on the top toolbar and you will see a screen like below. Make the "Question Spacing" smaller.

  • Profile Image

    Answered by brianhousman on October 05, 2010 at 09:08 AM

    This doesn't seem to solve the spacing issue above the first form element, it only effects the spacing between the other elements...

  • Profile Image
    JotForm Founder

    Answered by aytekin on October 05, 2010 at 10:04 AM

    I think the only solution is to get complete form source code, open it on the html editor you are using and remove the spacing.

    1. Open "Setup & Share" tab on toolbar,
    2. Click on "Share Form",
    3. Click on "Advanced Options",
    4. Click on "Download Zip". Download and unzip the file and use that in your site.

  • Profile Image

    Answered by brianhousman on October 06, 2010 at 01:37 PM

    Is it possible for you to implement a feature to remove the default header spacing?

     

  • Profile Image
    JotForm Founder

    Answered by aytekin on October 06, 2010 at 03:32 PM

    We have just added a new feature to JotForm to edit CSS right on the form builder. It is called "Inject Custom CSS". You can basically add CSS code from Preferences button on the form builder. You can probably use that change the height of that space. Here is an example screenshot for the Inject Custom CSS feature:

  • Profile Image

    Answered by brianhousman on October 07, 2010 at 09:31 AM

    I injected the following CSS which seemed to eliminate the default space above the first form element:

     

     

    .form-all {

    padding-top: 0px;

    }

    .form-html {

    padding-top: 0px;

    }

    .form-line {

    padding-top: 0px;

    }

     

     

    Thanks!

     

  • Profile Image
    JotForm Founder

    Answered by aytekin on October 07, 2010 at 11:49 AM

    That's great. Thanks for the update!

  • Profile Image

    Answered by chrisjaeger on November 25, 2015 at 06:23 PM

    This top margin/padding thing worked great. Thanks for posting.

     

    .form-all {

    padding-top: 0px;

    }

    .form-html {

    padding-top: 0px;

    }

    .form-line {

    padding-top: 0px;

    }

     

     

  • Profile Image
    JotForm Support

    Answered by EltonCris on November 25, 2015 at 11:28 PM

    @chrisjaeger

    It's good to know that you found this thread useful. Cheers! :)

    I just want to update everyone that you can now easily change the field spacing in the form designer as well as inject custom CSS codes with ease.