JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.
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.
Why does my embed form give extra space?Asked by m27online on October 15, 2016 at 01:24 AM
When I embedded my form on my web page, it adds extra space below the form like a weird window that extends the length of the page. I looked around the forum at other embed issues and tried to apply those towards my form, but it didn't help. I'm not sure what to do. I thank you for your time and attention, and I hope to hear from you soon.
I checked your webpage and I can see that the form height is set to 1000px. Can you please try to re-embed the form using the Iframe method.
This method will set the height automatically when you embedded it. You may also edit the height if needed. Here's a guide: https://www.jotform.com/help/148-Getting-the-form-iFrame-code
Here's a sample code:
<iframe id="JotFormIFrame-62876932844167" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotform.com/62876932844167" frameborder="0" style="width:100%; height:700px; border:none;" scrolling="no"> </iframe>
<script> .... </script>
Hope that works. Thank you.
Okay, on the back end of my wordpress site's page, I insert the iframe code into the text end, tweaked it with the height you gave me in the sample code, and I check it initially by switching to visual, and it looks fine. However, when I do a true preview of the page, I don't see the form; it's a link to the form.
Why isn't it showing my form?
I just noticed that you are using WordPress.com. Please try the following steps:
1. Click the "Publish" button in the toolbar.
2. Go to "Platforms" tab and then click the "WordPress.com" button.
3. Copy the code and paste it in the HTML Texarea.
Please check the complete guide here: How-to-embed-a-form-to-Wordpress-com
Hope that helps. Thank you.
That is the embed code that I tried first, which created that extra space. I've looked in the design area at the form layout, but there's only a control set for the overall form width. In this, I have the following settings:
Max width 525
Vertical Padding 9
Horizontal Padding 0
Input width 71
Is one of these values possibly responsible for the extra space I'm getting?
No, when I cloned your form, the bottom padding or margin is configured properly.
Can you please add this attribute and value (height="720") inside the embed code.
This will resize the height of the Iframe.
Hope that works. Thank you.
It worked! I tweaked it as I went, and got that space down even more. Jan, you've been fantastic help. Thank you so much, and God Bless you.
On behalf of my colleague, you're welcome!
Glad it worked for you.