Remove the huge spacing around the form when using Form Designer

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.

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!

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

@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!

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.  

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

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.