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 Do I Reduce the Top and Bottom Margins on My Embedded Forms?

    Asked by tofecjamal on August 26, 2015 at 03:01 PM

    With every form we create, there is a large amount of blank space both at the top and bottom of each form.  Is there any way we can reduce the height/amount of that blank space?

    We are using the embed method...

     

    <script type="text/javascript" src="//form.jotformpro.com/jsform/52375433226958"></script>

     

    ... so there does not appear a way to control it in the HTML.

     

    Checked settings in "Designer" section where it allows control over colors, fonts, etc. and while you can set width of form, there does not appear to be any setting to either control height of top/bottom padding???

     

    Thanks for your help.

     

     

     

    Screenshot
    bottom spacing reduce top margin reduce bottom margin too much space top spacing
  • Profile Image
    JotForm Support

    Answered by abajan on August 26, 2015 at 05:32 PM

    The following procedure should fix that:

    1. Click the Designer button:


    2.
    Go to the CSS tab:


    3.
    Replace the code that's currently in the work area (the blank area indicated above) with the following:

    .form-all {
       padding-bottom: 1em;
    }

    .jotform-form {
       padding: 0;
    }

    The first rule inserts extra space between the submit button and the faint border and the second reduces the top and bottom margins between the form and other content on your webpage.


    4. Save
    the change


    If you need further help with this, we'd be happy to provide it.


    Cheers

  • Profile Image

    Answered by ACAplanner on March 09, 2016 at 12:50 PM

    Thanks for your help!