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 form height issue

    Asked by tdiintl on December 05, 2014 at 11:52 AM

    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!

    Page URL:
    http://www.tdiinternational.com/contents/en-us/d221_30-series-lab-chai<br/>r.html

    mobile form form height iframe height
  • Profile Image

    Answered by tdiintl on December 05, 2014 at 11:56 AM

    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.

  • Profile Image

    Answered by tdiintl on December 05, 2014 at 12:25 PM

    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 onload=window.parent.scrollTo(0,0) src="//form.jotformpro.com/form/42096551954966" frameBorder=0 allowTransparency scrolling=no></IFRAME>

    to this:

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

  • Profile Image
    JotForm Support

    Answered by KadeJM on December 05, 2014 at 02:29 PM

    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.

  • Profile Image

    Answered by tdiintl on December 05, 2014 at 02:34 PM

    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.

  • Profile Image
    JotForm Support

    Answered by Mike_T on December 05, 2014 at 03:43 PM

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