Cannot use form on iPhone 6

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?

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.

Hi

Have you managed to track down an iPhone yet?

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.

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

Great, update us here how it goes. 

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

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.

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

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/

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

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.

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!

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.

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?

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

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 :)

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.