How can I reduce the white space below my form when I embed it using an iframe?

  • Profile Image
    Asked 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?

  • Profile Image
    Answered on January 19, 2015 at 06:13 PM

    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.

  • Profile Image
    Answered on January 19, 2015 at 06:25 PM

    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 :(

  • Profile Image
    Answered on January 19, 2015 at 07:02 PM

    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="//" frameborder="0" style="width:100%; height:687px; border:none;" scrolling="yes"></iframe>

    Let know if this helps.

  • Profile Image
    Answered on January 19, 2015 at 07:26 PM

    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.

  • Profile Image
    Answered on January 19, 2015 at 09:16 PM


    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.

    Thank you.