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

    Form is not displaying properly on mobile phone

    Asked by Dipen2512 on May 01, 2016 at 02:20 AM

    Hi I use iphone and i can't see my contact form on phone.

    Ironically, I have cloned this from from my other form and the original form is showing fine.

    i tried to use mobile responsive widget but then desktop version form behaves weird.

    I tried iframe but then form does let scroll the page.

     

    This is really weird that one form is working fine but the cloned form is missing and creating the issue.

    Page URL:
    http://www.dev-designers.com/phone/index.html

    scroll mobile responsive mobile devices not displaying not showing properly
  • Profile Image
    JotForm Support

    Answered by Jan on May 01, 2016 at 06:29 AM

    Please try re-embedding the form again using Iframe method but make sure that the value of the attribute scrolling is set to Yes.

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotform.com/61210743227244" frameborder="0" style="width:100%; height:539px; border:none;" scrolling="yes"> </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; } var isJotForm = (e.origin.indexOf("jotform") > -1) ? true : false; if(isJotForm && "contentWindow" in iframe && "postMessage" in iframe.contentWindow) { var urls = {"docurl":encodeURIComponent(document.URL),"referrer":encodeURIComponent(document.referrer)}; iframe.contentWindow.postMessage(JSON.stringify({"type":"urls","value":urls}), "*"); } }; if (window.addEventListener) { window.addEventListener("message", handleIFrameMessage, false); } else if (window.attachEvent) { window.attachEvent("onmessage", handleIFrameMessage); } if(window.location.href && window.location.href.indexOf("?") > -1) { var ifr = document.getElementById("JotFormIFrame"); var get = window.location.href.substr(window.location.href.indexOf("?") + 1); if(ifr && get.length > 0) { var src = ifr.src; src = src.indexOf("?") > -1 ? src + "&" + get : src + "?" + get; ifr.src = src; } } </script>

     

    If that doesn't work, please remove the script element below the Iframe code.

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotform.com/61210743227244" frameborder="0" style="width:100%; height:539px; border:none;" scrolling="yes"> </iframe>

     

    Related guide: Getting-the-Form-iFrame-Code

    Hope that helps. Thank you.