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

    Cannot use form on iPhone 6

    Asked by MalcB on February 20, 2016 at 10:55 AM

    A responsive contact form I have built for someone works on desktop, Android and in iPhone 6 emulators (including Chrome's developer tools), but not on the iPhone 6 itself. The cursor does not show when a field is tapped on and nothing can be typed into the fields.

    I don't have an iPhone myself but the person I built the form for and a friend do and they have both reported the same problem. I have tried embedding using the Embed script, source code and iframe but the result is the same with all of them.

    Can you help please?

    Page URL:
    http://www.artisan16.co.uk/contact-us/

    form on iphone form on use form iPhone 6
  • Profile Image
    JotForm Support

    Answered by Kevin_G on February 20, 2016 at 10:18 PM

    Unfortunately I have not an IPhone, I have also tested your website using an emulator and it's working on my end. I will ask to my colleagues if someone can test your website. One of my colleagues will reply you with the result of the test in a real device.

  • Profile Image

    Answered by MalcB on February 25, 2016 at 03:21 PM

    Hi

    Have you managed to track down an iPhone yet?

  • Profile Image
    JotForm Support

    Answered by Kevin_G on February 25, 2016 at 03:45 PM

    Unfortunately no, but I did tested your form using an emulator and I could see the issue, I checked the console and found this error message.

    Seems like it is blocking the form because it is using a secure URL "https" and it is embedded over a  non-secure URL "http". Could you please try to re-embed your form and replace the current URL with "http"? 

    If once it is done the form still does not work, then we will take other look to find what is causing the issue.

     

  • Profile Image

    Answered by MalcB on February 25, 2016 at 05:02 PM

    Yes, that makes sense, I'll try it in the morning.

  • Profile Image
    JotForm Support

    Answered by Kevin_G on February 25, 2016 at 05:08 PM

    Great, update us here how it goes. 

    We will be glad to take a look to your website. 

  • Profile Image

    Answered by MalcB on February 26, 2016 at 06:07 AM

    Hi Kevin

    I changed the src for the iframe from https://form.jotformeu.com/60362279562358 to http://form.jotformeu.com/60362279562358 but it didn't make any difference when my friend tried the form in her iPhone 6 - it still wasn't possible to complete any fields.

  • Profile Image
    JotForm Support

    Answered by Boris on February 26, 2016 at 09:39 AM

    I have checked your form on iPhone through BrowserStack, and I see that it is working fine when it is accessed directly:

    http://form.jotformeu.com/60362279562358

    When accessing the form on your website, however, the input gets lost the moment a field is clicked:

    Input is lost before the virtual keyboard even has a chance to show up, and this seems to be affecting only the form when it is embedded on your website. Upon further investigation, I see that iPhone is now presenting another error similar to what my colleague noticed before:

    Blocked a frame with origin "http://form.jotformeu.com" from accessing a frame with origin "http://www.artisan16.co.uk". Protocols, domains, and ports must match.

    Browser is blocking frames from interacting with each other. I see that your full embed code is as follows:

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotformeu.com/60362279562358" frameborder="0" style="width:100%; height:539px; 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; } 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>

    I would recommend trying two things. 1) Could you please try removing the entire script portion marked with orange background, so that only the iFrame portion of the code remains, and see if it is working then?

    2) If it is still not working, could you please try pointing the form in the iFrame to jotform.com instead of jotformeu.com, and see if that helps:

    http://form.jotform.com/60362279562358

    We will await your response. Thank you.

  • Profile Image

    Answered by MalcB on February 26, 2016 at 11:58 AM

    Hi Boris

    I've followed your suggestions and, rather than mess around with the live contact page, I've created two test pages (with notes to show which is which) as follows:

    http://www.artisan16.co.uk/contact-us/contact-test-1/
    http://www.artisan16.co.uk/contact-us/contact-test-2/

    I'll get my friend to check the forms on her iPhone tomorrow if you are unable to.

  • Profile Image
    JotForm Support

    Answered by Boris on February 26, 2016 at 02:03 PM

    Thank you very much for helping us troubleshoot, there is no need to bother your friends. I have checked both of the test pages you have so kindly set up, and they both still return the same error on iPhone:

    I've been using BrowserStack, and BrowserStack is unfortunately overloaded / unresponsive at the moment, so I couldn't continue troubleshooting. There may be something else besides this error that might be contributing to this form being unusable when embedded. Before they became unresponsive, I could see that the form works fine when opened over its direct link.

    Many of our users embed their forms with the iFrame embed method, and it usually works well on iPhones. I'll keep checking if there is anything else we can do, once BrowserStack becomes available again:

    In the meantime, and in order to ensure all your users can access the form, I would recommend placing a direct link to the form above the place where it is embedded, along with a message such as "If you are having trouble filling out this form on a mobile device, please open this direct link to the form: http://form.jotformeu.com/60362279562358"

    I hope this helps.

  • Profile Image

    Answered by MalcB on February 27, 2016 at 04:01 AM

    Thanks, Boris

    The site isn't live yet and it's not likely to be for 3-4 weeks so there's no rush. Also, my friend and I often work together, I was helping her troubleshoot a small problem on a site yesterday!

  • Profile Image
    JotForm Support

    Answered by Boris on February 27, 2016 at 05:43 AM

    I have both good news and bad news. I have continued testing it on iPhone, and the error which me and my colleague noticed before is not what is preventing the form input fields to be selected.

    There seems to be something inside the header element (#main-header) of your page that is causing it, as once I've removed the header of your page, input fields could be correctly selected on iPhone:

    Unfortunately, we can't help much with fixing a third party website, and the form itself is working fine on iPhone. I hope this helps.

  • Profile Image

    Answered by MalcB on February 27, 2016 at 11:29 AM

    Hi Boris

    I have added another test page at http://www.artisan16.co.uk/contact-us/contact-test-3/ without any of the site layout elements present. Does this one work?

  • Profile Image
    JotForm Support

    Answered by Boris on February 27, 2016 at 12:38 PM

    It still doesn't work there, but your site still has the header element even on test 3 page:

  • Profile Image

    Answered by MalcB on February 29, 2016 at 02:21 PM

    Hi Boris

    After a lot of methodical troubleshooting, including setting up a new test website, it's turned out to be a plugin clash. Sadly, it's a plugin that I can't do without on this site, so I won't able to use the form from JotForm in this instance. This is a shame because I really love using JotForm - it's got everything!

    Anyway, thank you (and Kevin_G) for all your help, you're stars :)

  • Profile Image
    JotForm Support

    Answered by Kevin_G on February 29, 2016 at 03:45 PM

    You're welcome on behalf of my colleague. 

    We are here to help you and thank you for your kind words, please if you need further assistance, do not hesitate to contact us, we will be more than happy to assist you.