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.
How can I reduce the white space below my form when I embed it using an iframe?Asked by benjaminaurelius on January 19, 2015 at 05:59 PM
I have the following question. At the moment I integrate the form via iframe. There is one pagebreak in the form.
When showing the first page, there is a lot of white space below the form. I believe this is due to the iframe set height, which has to include the full height (due to the longer second page).
But how could I stop this from happening and still use the iframe?
The iFrame code comes with a script part that is automatically setting the iFrame height upon the load.
You can remove that script part, so that the iFrame height parameter will be used instead. In this case, you might also want to change the scrolling from 'no' to 'yes' or 'auto' to avoid possible height issues.
Please give it a try and let us know if you need any further assistance.
The thing that is causing the white space is the height setting. In the above picture it would be 687px. If I reduce that, the white space gets reduced but sadly so is the form. Removing the script didnt change that :(
You can use the scrolling = yes option in the iframe code as described on the screenshot provided by Mike. This will show a scrollbar when the height of the form gets higher than the height you set on the iframe.
The code would look like this:
<iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotformeu.com/form/50186239102347" frameborder="0" style="width:100%; height:687px; border:none;" scrolling="yes"></iframe>
Let know if this helps.
Oh. Would this be the only option?
The form is for a mobile-only site, created as in a one-page design. Having a scrollbar in the form would not be optimal.
Sadly, the blank space below the first page is big, due to the much bigger height of the second page. So I consider to remove the pagebreak completly, but would be happy if there would be another way.
The iFrame code creates a static height for your form, the script attached to the embed code form should adjust it, but it seems that it is not working on your end. I would suggest you try to embed your form using the form's full source code instead. Let us know if this one works for you.