Issue with JotForm showing up on iphone

  • Profile Image
    mnra
    Asked on August 11, 2017 at 09:31 AM

    Hi! I am having a problem with my JotForm showing on a mobile device. It works great on a desktop computer but doesn't show on an iphone.  The page is: http://retailrally.com/index.php/awards 

     

    The code I am using is:

     <iframe id="JotFormIFrame-72218068998168" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotform.us/72218068998168" frameborder="0" style="width:100%; height:539px; border:none;" scrolling="no"> </iframe> <script type="text/javascript"> var ifr = document.getElementById("JotFormIFrame-72218068998168"); if(window.location.href && window.location.href.indexOf("?") > -1) { 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; } } window.handleIFrameMessage = function(e) { var args = e.data.split(":"); if (args.length > 2) { iframe = document.getElementById("JotFormIFrame-" + args[2]); } else { 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); } </script>

     

    Wondering if you have any suggestions.

  • Profile Image
    aubreybourke
    Answered on August 11, 2017 at 10:19 AM

    I tested your embedded form on a Windows PC, and a Windows Mobile Phone. It worked fine for both.

    However I also tested your embedded form on an iPhone 6 and was unable to use the form. The form dimensions are bigger than the iPhones screen.

     

    Is this the problem you are talking about?

    Then I tested your stand alone form on the same iPhone 6. And it works perfectly. So that means the problem is with how the form is embedded on your site.

    I see you are using the iFrame embed method already. So I'm not sure of how to fix this issue.

    As you are using the card layout it could very well be a bug. 

    So I will escalate this issue by notifying the development team.

  • Profile Image
    mnra
    Answered on August 11, 2017 at 10:43 AM
    You have identified the problem exactly. Thank you for having your team take a look at it! I appreciate that.
    Sent from my iPhone
    ...