Extra spacing on bottom of forms

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

  • Profile Image
    ashwin_d
    Answered on January 28, 2014 at 09:46 PM

    Hello optizign13,

    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.

    Thank you!

  • Profile Image
    optizign13
    Answered on January 29, 2014 at 12:25 PM

    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>

  • Profile Image
    optizign13
    Answered on January 29, 2014 at 12:27 PM

    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. 

  • Profile Image
    TitusN
    Answered on January 29, 2014 at 01:58 PM

    Hello,

    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>
    <script type="text/javascript">window.handleIFrameMessage = function(e) {var args = e.data.split(":");var iframe = document.getElementById("JotFormIFrame");if (!iframe)return;switch (args[0]) {case "scrollIntoView":iframe.scrollIntoView();break;case "setHeight":iframe.style.height = args[1] + "px";break;}};if (window.addEventListener) {window.addEventListener("message", handleIFrameMessage, false);} else if (window.attachEvent) {window.attachEvent("onmessage", handleIFrameMessage);}</script>

    Hope this helps.

  • Profile Image
    optizign13
    Answered on January 29, 2014 at 04:09 PM

    Hi. Thank you. But no luck :( I think something is wrong with the compatibility of this website and the form that is conflicting. 

  • Profile Image
    TitusN
    Answered on January 29, 2014 at 04:51 PM

     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.

  • Profile Image
    optizign13
    Answered on January 30, 2014 at 12:47 PM

    Hi there. It works now. Thanks! So what are the key codes/elements do I need to edit/add to my other forms?

  • Profile Image
    EltonCris
    Answered on January 30, 2014 at 01:28 PM

    @optizign13 

    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.

    Example:

    <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.

    Regards!