Iframe embed code have too much height on the website embedded JotForm

  • Profile Image
    Deralict
    Asked on January 11, 2015 at 04:59 PM
    I spoke to soon. My code is rubbish (only works in desktop environment). So I'm going to do it the officially sanctioned way and use the code you supply.

    So I've re-implemented you code, and the problem now is that the iframe height is way too big.

  • Profile Image
    jonathan
    Answered on January 11, 2015 at 06:12 PM

    Hi,

    Can you please retry re-embedding the jotform  using its iframe embed code but without the 'script' part

    Use the iframe code only

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotform.ca/form/43351436352248" frameborder="0" style="width:100%; height:5632px; border:none;" scrolling="no"></iframe>

     

    user guide: http://www.jotform.com/help/148-Getting-the-Form-iFrame-Code

    then check again if the height issue still exist.

    Please update us of the result.

    Thanks.

     

  • Profile Image
    Deralict
    Answered on January 11, 2015 at 06:14 PM

    OK, done, and it's live at www.lifesprung.com. Same result as before.

  • Profile Image
    ashwin_d
    Answered on January 11, 2015 at 10:37 PM

    Hello Deralict,

    Please use the following iFrame embed code of your form and that should help:

    <iframe id="JotFormIFrame" allowtransparency="true" src="//form.jotform.ca/form/43351436352248" frameborder="0" style="width:100%; height:2700px !important; max-height:2700px !important;border:none;" scrolling="yes"></iframe>

    Hope this helps.

    Do get back to us if you have any trouble.

    Thank you!

  • Profile Image
    Deralict
    Answered on January 12, 2015 at 01:30 PM

    Your new code has it's own problems...by making the height static, some of the content gets cropped when an "required field" error occurs (which forces the height to expand). In addition the "scrolling="yes" makes it difficult for the user as there are now two areas which can be scrolled independently.

  • Profile Image
    Deralict
    Answered on January 14, 2015 at 12:24 PM

    Could I obtain a fix for the broken "auto height" script when using an iFrame please?

  • Profile Image
    david
    Answered on January 14, 2015 at 03:02 PM

    Hi,

    I checked your form using the default iFrame embed code:

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotform.ca/form/43351436352248" frameborder="0" style="width:100%; height:5184px; 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;case "collapseErrorPage":if (iframe.clientHeight > window.innerHeight) {iframe.style.height = window.innerHeight + "px";}break;case "reloadPage":window.location.reload();break;}};if (window.addEventListener) {window.addEventListener("message", handleIFrameMessage, false);} else if (window.attachEvent) {window.attachEvent("onmessage", handleIFrameMessage);}</script>

    And it worked fairly well.  There was only a small amount of extra space at the bottom.  Removing the script actually caused the form to be extremely long.  Using this code above, do you still get the same issue with the frame height?

    Let us know and we will be happy to have another look.

  • Profile Image
    Deralict
    Answered on January 14, 2015 at 04:11 PM

    Using the code above (which seems to be the same code provided within the JotForm app for iframe embeds) I have the same issue. The current page which uses this code is here: www.lifesprung.com.

     

    Perhaps the problem is browser-specific? I can replicate with Chrome and Safari (Mac).

  • Profile Image
    Mike
    Answered on January 14, 2015 at 05:32 PM

    The iFrame does not have the full auto-height functionality, so you can:

    1) Use it with the exact height, and optionally with scrolling 'yes' or 'auto'.

    2) Use it with limited auto height option. This is enabled when you copy default iFrame code with the script part.

    Alternatively to the iFrame, you can try the Embed code to see if it works better on your website. It comes with the auto-height functionality.

    Thank you.

  • Profile Image
    Deralict
    Answered on January 14, 2015 at 10:45 PM

    OK, I tried the "Embed" option code again (which wasn't working before). Now it seems to work fine...weird. So I'll keep monitoring it, and let you know if it stops working.

    I'm not actually sure what you mean by "limited auto height option". It seems to suggest that either you use a "limited auto height option" or you hard-code the height, but there's no option to have the height set automatically and just simply work...?

  • Profile Image
    Welvin
    Answered on January 15, 2015 at 09:48 AM

    Great! Please update this thread just in case.

    My colleague is referring to the script in the iFrame codes which also controls the height of the form in iFrame.

    Thanks