iFrame form height issue

Why is the submit button not working on mobile?

Tried to test our jotforms today on my iPhone and the entire form loads except the submit button!  That's the most important part :)  any idea why it might be doing this?  My coworker tried on her newer iPhone with the same results.  We tried lots of pages, but I've included one url for reference.

Note that I am using the iframe method as suggested by jotform previously when we were having a problem with the forms being compatible in all browsers.

Thanks!

We have just noticed that there are a lot more problems.  This url is working on chrome but not firefox http://www.tdiinternational.com/contents/en-us/d221_30-series-lab-chair.html same issue as above, no submit button.

This url is not working anywhere http://www.tdiinternational.com/contents/en-us/d1036__243D.html and there are about six more just like it.  They are all not loading the complete form.  Last time we had an issue like this I was told to use the iframes way of linking to the forms.

I have tried getting the iframe code again and repasting it into my pages and this seems to be working. Unfortunately I have hundreds of forms so this is going to take forever to fix.

I have no idea why, but the iframe code has gone from this:

<IFRAME style="WIDTH: 100%; HEIGHT: 1524px" id=JotFormIFrame onDISABLEDload=window.parent.scrollTo(0,0) src="//form.jotformpro.com/form/42096551954966" frameBorder=0 allowTransparency scrolling=no></IFRAME>

to this:

<iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotformpro.com/form/42096551954966" frameborder="0" style="width:100%; height:2577px; 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;}};if (window.addEventListener) {window.addEventListener("message", handleIFrameMessage, false);} else if (window.attachEvent) {window.attachEvent("onmessage", handleIFrameMessage);}</script>

I see you're having a problem with getting the iframe code to work to display your form and it's submit button correctly.

The second iframe (see this official iframe guide for jotforms) you listed with the script underneath it is actually the right one. Whereas in places where there are still complications that is when we then recommend removing the script part and using only the iframe. Most likely you probably gathered the first iframe elsewhere or in another thread on our site.

Anyhow, I checked this furthermore on my iPhone 6 and found that your jotform is showing fully as it should be. This means that you have to update the iframe code to the right one in the guide and that should resolve your whole problem.

Actually I got the first code from the jotform page.  What happens is this, when I copy the iframe code and paste it into my software (ShopFactory) it automatically removes the script part.

The new code is working however and it looks like it's because the height is increased on the second one for each one.  I don't know why it would change all of a sudden.

The script part after the iFrame was added to fix some minor issues on the multi-page forms and add an auto-height functionality upon the iFrame load.

You can use the iFrame without that additional part, and it should be fine. Note, that when the script is removed, the iFrame will use the specified height.

Example:

<iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotformpro.com/form/42096551954966" frameborder="0" style="width:100%; height: 2577px; border:none;" scrolling="no"></iframe>

It means that you can increase that value if the height is not enough to show the entire form on some browsers/devices.

If you need any further assistance, please let us know. We will be happy to help.