Issue with the form on Apple mobile devices

Hi,

I have a form that was created for membership sign-up. On all PC browsers as well as Android mobile phones, form looks just fine. On Apple mobile devices, there are two issues:

1. On iPhone, form is not displayed in full. There is a missing part at the end where sumbission button is so there is no way to submit the form when it is filled in

2. On iPad, form is displayed in full but a "secret word" is not displayed. There is a turning wheel that is constaltny shown and word never gets displayed

Here is the iFrame that is embedded in the web page created by Xara:

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

I have played around with width (replaced % with the pixel count) and height (increased number of pixels) but none of that worked. Can you let me know what else can I try to make it work on the Apple mobile devices?

Thank you

Hello DTC_membership,

I did check your web page in my iPhone device and I was able to replicate the issue you are having. I would suggest you to please try the following iFrame code and see if that solves your issue:

<iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotform.ca/form/23128337029249" frameborder="0" style="width:100%; height:2850px; border:none;" scrolling="yes"></iframe>

Do check and get back to us if the issue persists.

Thank you!

Hello,

thank you for your reply. I have tried what you suggested and it did not work.  Iphone is mising much more while ipad is not displaying a word to type in before submiting. Is there a way to attach images (if needed) so you can see what I am talking about? Any other suggestions?

@ DTC:

1. take screen shot

2. upload to imgur.com

3.

4. enter the actual image URL (NOT the url for sharing, on imgur click on image to get this url in your address bar, it will look like http://i.imgur.com/Kz4DEJ8.png) into the image url field to attach your screenshot.

Here it is; top picture is ipad (Safari) and bottom is from iphone4 (Chrome, same on Safari)

iPhone issue

Hi,

your suggestion did not help. I even put the height to 4500px and result was the same. I also played with the width (90%, 110%, 120%) and could not make the whole form to show up on iphone browser. It would cut it at different place or not show part of the right side of the form.

Regarding capcha; what you suggested fixed the problem on iPad and now, the words are showing up all the time.

Why are your forms so sensitive to the resolution of the browser? Can we make my form to display properly on iphone>

@DTC_membership

Glad to hear my colleague was able to help.

Regarding on the iPhone cut off issue, the problem is related with the div container where you have pasted your form embed code. You have to adjust the div container's height once the page is viewed on iPhone so the form will not get cut. Just insert the following CSS code before your form embed code, this should fixed it.

 <style>

@media only screen and (max-width: 468px) {

#xr_xrii #xr_xr div#xr_xri.xr_ap div {

height: 3000px !important;

}

}

</style>

Visual guide:

Regards!

Hi,

this fixed the problem. Thank you