-
shorefellowshipAsked on March 10, 2015 at 4: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 -
Elton Support Team LeadReplied on March 10, 2015 at 5: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!
-
shorefellowshipReplied on March 11, 2015 at 9:54 AM
ok thanks. Would I follow this for all forms I wanted to change the spacing on?
-
Elton Support Team LeadReplied 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!
-
shorefellowshipReplied on March 11, 2015 at 2: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.
-
shorefellowshipReplied on March 11, 2015 at 2:46 PM
I just tried to do the above mentioned solution on this page but it still has extra space at the bottom.
-
MikeReplied on March 11, 2015 at 4: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.