My form is too wide on iPhones

For some reason the form is appearing too wide on iPhones (tested with iPhone 5S).  The whole website is designed with bootstrap to be mobile responsive, so it is an important issue.

Hi kevkulbacki, 

Thanks for contacting us.

Can you try embedding your form using the iFrame embed code below and see if it works?

<iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotform.us/form/51773608413153" frameborder="0" style="width:100%; height:547px; 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;}};if (window.addEventListener) {window.addEventListener("message", handleIFrameMessage, false);} else if (window.attachEvent) {window.attachEvent("onmessage", handleIFrameMessage);}</script>

Do let us know if you need further assistance.

Regards.

Hello Chriistian,

Thank you for your reply; however, that solution did not work.  On my computer, the form appears correctly when the window is narrowed; however, on the iPhone 5S I am testing it on the form does not (see earlier screen shot).  I have cleared the browser's cache to ensure that I am viewing the updated version as well.  

I have also tried adjusting the size of the column it is in on xs devices; however, that hasn't worked either.

Thank you for letting us know. I do not have an iPhone device, but I have asked one of our colleagues to take a look at it on their iPhone.

For what it is worth, I do see that it displays correctly when testing the Mobile Responsive View function on my desktop:

I will try testing on an iPhone emulator, and a colleague of ours will be checking on their iPhone. We will let you know of our findings, thank you.

While testing this form on an online iPhone simulator, I was still unable to replicate the issue as you have described. I have seen that on screens that are very narrow, such as 320px, the captcha box seems to overflow a little bit to the right - as the captcha has a minimum width of 304px and there is some additional padding to the left and to the right of it.

However, your screenshot seems to be showing that the entire form is slightly moved to the right, is that the issue that you are experiencing?

I have also checked on the following iPhone and iPad simulator, again without being able to get the same look as depicted in your screenshot.

http://www.responsimulator.com/?url=http%3A%2F%2Fkulbackifde.com%2Ftemp%2Fcontact.html#360

Can you please check on another iPhone device if the issue appears or not, and kindly let us know.

Boris that is correct, the entire form is shifted to the right.  I have had it tested on both the iPhone 5S and iPhone 6.  It works on the 6, but on the 5S it appears as it does in my screenshot.

On the computer the responsive design works with the form very well, it just appears to be something with the narrower display on the 5S.

Considering that I do not have iPhone 5S I was not able to test your issue. However I have tested on iPhone 5 simulator and form displays correctly. I have also tested on my Samsung Galaxy S4 and form is responsive there as well.

Have you tested on some other iPhone 5S? Can you also try to clear your iPhone browser cache:

http://www.wikihow.com/Clear-Your-Browser's-Cache-on-an-iPhone 

Yeah, I think it might be isolated to narrower devices.  I will keep working on trying to figure out a solution.

Hi kevkulbacki, 

I checked your form using an iPhone emulator and I was not able to duplicate the issue. Have you tried clearing your browser cache on your iPhone as suggested by my colleague BJoanna in her previous post? 

If the issue still persists even after clearing the browser's cache, can you give us the browser version you are using to access your site so we can further check?

We will wait for your response.

Regards.

I have tried clearing the cache and tested with both Google Chrome and Safari on the iPhone 5S.  The iPhone is running iOS 8.3 (no updates available) and both apps are up to date as well.

As I mentioned, it appears to work properly when adjusting the width on the computer.  It is strictly when the iPhone 5S is in portrait view that the width becomes an issue.

I just attempted to update the site - I shrunk the container with the form to take up only 10 columns (out of 12 which would be width of the display) and it worked temporarily - the fields name, email, message, and submit appeared correctly.  After a few second the Recaptcha loaded and that caused the form to distort.  I know it was mentioned above by Boris that the Recaptcha has a minimum width of 304px, but the iPhone 5S had a screen width of 640px if I remember correctly, so I am not sure why that would be an issue.

Hi kevkulbacki. 

It looks like the captcha is not being responsive. I tried removing the captcha on my cloned form and I don't see any problem. Have you tried to temporarily remove the captcha and see if the form is displayed properly? If we can confirm that the captcha is causing the problem on your end, we can escalate this issue to our development team.

We will wait for your response.

Regards. 

Hello Chriistian,

I cloned the form, with the captcha removed, and it now displays properly on the iPhone.

In browsing the web for solutions, I came across this solution; however, I am guessing they built the form from scratch to be able to insert that <div>.  I also am unsure if that solution would work for the popup that comes up when the recaptcha decides to verify a user (with the 9 squares).

Thanks as always for the assistance.

May I suggest you to try with Drawing Captcha instead.

I have tested it on my demo form and it is responsive.

http://form.jotformpro.com/form/51804233877964? 

Hope this will help. Let us know if you need further assistance. 

BJoanna - I love it!  I hadn't known about that one and it works properly!  Thank you so much!!

You're welcome. We are glad to hear that your issue is resolved.

Feel free to contact us if you have any other question.