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

    Remove the huge spacing around the form when using Form Designer

    Asked by shorefellowship on March 10, 2015 at 04:15 PM

    I have a form on http://freshstart.church/volunteer and would like to reduce the spacing on the top and bottom of the form.  Is there a way to do that?  I went into the builder and adjusted everything I could think of.  Let me know.  Thanks.

    Page URL:
    http://freshstart.church/volunteer

    remove spacing
  • Profile Image
    JotForm Support

    Answered by EltonCris on March 10, 2015 at 05:11 PM

    Hi,

    Here's how:

    First, re-embed your form using the following iframe code (without the script code) so the iframe height does not change during the execution of the code.

    <iframe id="JotFormIFrame" style="width: 100%; height: 372px; border: none; opacity: 1; visibility: visible;" src="//form.jotformpro.com/form/50637678714970" width="300" height="150" frameborder="0" scrolling="no"></iframe>

    Second, inject this CSS codes in your form on the form designer - CSS tab.

    .jotform-form {padding: 20px 0 !important;}

    Feel free to change the 20px to reduce the top and bottom spacing around the form.

    Outcome should be similar to this.

    Hope this helps. Cheers!

  • Profile Image

    Answered by shorefellowship on March 11, 2015 at 09:54 AM

    ok thanks.  Would I follow this for all forms I wanted to change the spacing on?

  • Profile Image
    JotForm Support

    Answered by EltonCris on March 11, 2015 at 11:07 AM

    @shorefellowship 

    Welcome! :)

    No, you don't have to follow this every time unless you want to reduce the spacing around the form when using the form designer but that still depends. Example, the spacing will automatically reduce itself when you embed your form on a small div container. In short, the form spacing shrink depending on the container width. This is how mobile responsive form works. Since you are embedding the form using iframe in full width, the form spacing will remain the same (90px above and below the form). Using the CSS above will help.

    Hope this clears your question. Thank you!

  • Profile Image

    Answered by shorefellowship on March 11, 2015 at 02:04 PM

    How could I make the form to where it adjusts accordingly on mobile devices.  Each time I put a form in there's a ridiculous amount of spacing.  I just cloned the form I had earlier and put it on another page and there's a ton of space at the bottom of it.  Here's the link http://freshstart.church/missions

     

    The css code is there.  Not sure why this seems to be happening with each form.  

  • Profile Image

    Answered by shorefellowship on March 11, 2015 at 02:46 PM

    I just tried to do the above mentioned solution on this page but it still has extra space at the bottom.

  • Profile Image
    JotForm Support

    Answered by Mike on March 11, 2015 at 04:04 PM

    The form iFrame is set to 372px height via inline styles.

    You might try to decrease it to 200 pixels, and also change the scrolling from 'no' to 'auto' to prevent possible height issues on mobile devices.

    <iframe id="JotFormIFrame" style="width: 100%; height: 200px; border: none; opacity: 1; visibility: visible;" src="//form.jotformpro.com/form/50695152009958" width="300" height="200" frameborder="0" scrolling="auto"></iframe>

    Please give it a try and let us know if you need any further assistance.