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

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.

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" onDISABLEDload="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.

 

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

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!

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.

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

Hi,

I checked your form using the default iFrame embed code:

<iframe id="JotFormIFrame" onDISABLEDload="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.

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

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.

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

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