Why does my embed form give extra space?

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

  • Profile Image
    Jan
    Answered on October 15, 2016 at 05:03 AM

    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.

  • Profile Image
    m27online
    Answered on October 15, 2016 at 09:54 PM

    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?

  • Profile Image
    Jan
    Answered on October 15, 2016 at 11:49 PM

    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.

  • Profile Image
    m27online
    Answered on October 16, 2016 at 01:37 PM

    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?

  • Profile Image
    Jan
    Answered on October 16, 2016 at 04:13 PM

    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.

    [embed height="720"]https://www.jotform.com/form/62876932844167[/embed]

    This will resize the height of the Iframe.

    Hope that works. Thank you.

  • Profile Image
    m27online
    Answered on October 16, 2016 at 09:46 PM

    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.

  • Profile Image
    Nik_C
    Answered on October 17, 2016 at 06:20 AM

    On behalf of my colleague, you're welcome!

    Glad it worked for you.

    Cheers!