My JotForm is not being displayed correctly on iPhone browser

I am designing a form intended to work exclusively on the i-Phone.  I have done all of my testing on the PC and everything is working as I would like it to work when I use it on the PC. 

I have embedded the form on a web page for further testing.  Using the i-Phone, I find that the form displays strangely when I bring it up via the web page.  The fields are all very small.  I can expand the screen and enter my data but when I touch the "PREVIEW" button to examine my data, a seemingly blank page comes up and I have to scroll all over until I find my preview.  Then, when I touch the "SUBMIT" button, another seemingly blank page comes up and I have to scroll all around to find the "Thank You" details.

Interestingly, when I use the i-Phone and access the very same form via Safari/www.JotForm.com and I EDIT/PREVIEW from there, the form works perfectly and as I would expect it to work.

You assistance would be appreciated.

Terry

Hi Terry,

I was able to see the problem when I test the jotform on your website using iphone browser emulator. 

The input fields were too small and not responsive.

I suggest trying the following modification and retry testing again.

1. Re-embed the jotform http://www.jotformpro.com/form/42737586126967 on your website using its iframe embed code instead.

user guide: http://www.jotform.com/help/148-Getting-the-Form-iFrame-Code

When I test the jotform using its direct URL http://www.jotformpro.com/form/42737586126967 the result is much better.

so it could be that the script conflict was causing issue on the form view when in your website. Using the iframe embed code should prevent any script conflict.

2. Add the Mobile Responsive widget on the jotform. When I added the widget on my test form and check on the iphone browser, it also displays even better.

Please try first the initial suggestions and see if this all works or not..

Inform us if issue remains.

Thanks.

Thank you for you quick response.  You suggest two approaches.  The first is to embed using i-frame code.  I have shied away from i-frame because of the following which I excerpt from your i-frame documentation.

"Unfortunately, using the iFrame version has a downside: every time you change your form, you must update the form code on your site. This is because the height of the form needs to be hard-coded. If the form size changes, the iFrame height will need to be updated."

My environment is one of constant change.  I would not envision changes to the height of the form or the design of the input fields but I am expecting changes to the option choices of drop down fields etc.  These changes could be necessary on a weekly basis.  If I change something like the options of a drop down field, would that require re-embedding each time?

Your second approach involves the use of the mobile responsive widget. I tried this but it didn't do anything.   What could i have done wrong/

Terry

Hello Terry,

Please be noted that for your forms to work properly on mobile devices, we recommend embedding your form with its iFrame embed code. You do not have to update your iFrame embed code every time you make changes to your form, you can set the iFrame height to be 100%. 

Please use the following iFrame embed code and see if that solves your problem:

<iframe id="JotFormIFrame" allowtransparency="true" src="//form.jotformpro.com/form/42737586126967" frameborder="0" style="width:100%; height:100% !important; max-height:100% !important;border:none;" scrolling="yes"></iframe>

Do get back to us if the issue persists.

Thank you!

Just getting back to this issue.  I need some additional help.

I embedded my two forms, the ones that I intend to use on the i-Phone using the i-Frame embedding code that I picked up from JotForm.  Specifically, I embedded the following code for the Job Detail form.

<iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="http://form.jotformpro.com/form/42737586126967" frameborder="0" style="width:100%; height:6265px; 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>

It did not work.  In fact it made matters worse.  The PREVIEW button caused a lengthy delay and, for some entries, it never came up.

What I don't understand is the following.  In one of your replies, above, you said the following.

"When I test the jotform using its direct URL http://www.jotformpro.com/form/42737586126967 the result is much better."

When I get on my i-Phone and I access the form with the URL you indicate here, the form works EXACTLY as I would like it to work on the i-Phone.

What did you do that I cannot seem to do.

Terry

P.S.  I tried the Mobile Response Widget and I did not like what I saw.

Hello Terry,

I did check your web page where you have embedded your form. Though you have iFrame embed code but its not same what you have added above in your answer. Please check the screenshot below:

Please use the following iFrame embed and see if that solves your problem:

<iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotformpro.com/form/42737586126967" frameborder="0" style="width:100%; height: 1593px; border:none;" scrolling="no"></iframe>

Do get back to us if the issue persists.

Thank you!