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.
Extra spacing on bottom of formsAsked by optizign13 on January 28, 2014 at 06:39 PM
Hello. Whenever I create forms, I notice there's always extra spacing on the bottom. How do I get rid of it? Or is there an option where i can define the form's height?
Actually this is because of the height property defined in your form's iFrame embed code. Reducing the iFrame height will remove the extra spacing from your form. Please check the screenshot below:
You can use the following iFrame code to embed your form in your web page:
<iframe id="JotFormIFrame" style="width: 100%; border: none; height: 302px;" src="//form.jotformpro.com/form/40276339488970" height="200" width="320" frameborder="0" scrolling="no"></iframe>
Hope this helps.
Do get back to us if you have any questions.
Hello. I want my height to change, not width. In any case, I changed it to this and nothing was resized.
<iframe id="JotFormIFrame" style="width: 100%; border: none; height: 202px;" src="//form.jotformpro.com/form/40276339488970" height="100" width="100" frameborder="0" scrolling="no"></iframe>
On my website, I defined the height with the code shown above. However, when inspecting element, the height keeps on defining on its own. Not sure if this is a browser issue or not.
Thank you for your response.
I checked your site, and the Iframe style is broken because of invalid CSS syntax:
Please make the changes exactly as shown below (click to enlarge image):
Alternatively, just use the following highlighted text to re-embed your form:
<iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://secure.jotformpro.com/form/40276339488970" frameborder="0" style="width:100%; height:280px; border:none;" scrolling="no"></iframe>
Hope this helps.
Hi. Thank you. But no luck :( I think something is wrong with the compatibility of this website and the form that is conflicting.
The Iframe spacing beneath seems to have reduced with the new Iframe code you embedded:
What do you see from your end? Is it the same after you clear your browser cache?
Please let us know.
Hi there. It works now. Thanks! So what are the key codes/elements do I need to edit/add to my other forms?
You can actually embed the form without the supporting script that would auto-adjust iframe. The supporting script works best when you have page break element on your form. In this case, you can use just the iframe embed code.
<iframe id="JotFormIFrame" style="width: 100%; border: none; height: 280px;" src="//form.jotformpro.com/form/40276339488970" height="280" width="100" frameborder="0" scrolling="no"></iframe>
You should change both height value. The first one has px since that's a CSS code while the height attribute (for html 4) does not need px, you can enter a number without it as seen on the example above.
Let us know if I've missed something here.