What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

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.


  • Profile Image

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

    Asked by Deralict 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.

    iframe height iframe embed form height
  • Profile Image
    JotForm Support

    Answered by jonathan 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

    Answered by Deralict on January 11, 2015 at 06:14 PM

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

  • Profile Image
    JotForm Support

    Answered by ashwin_d 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

    Answered by Deralict 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

    Answered by Deralict 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
    JotForm Support

    Answered by david 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

    Answered by Deralict 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
    JotForm Support

    Answered by Mike 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

    Answered by Deralict 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
    JotForm Support

    Answered by Welvin 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