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.
Scrolling problem in iFrame embed on iOS products - iPad & iPhone.Asked by kismef on June 27, 2016 at 05:10 AM
I am having scrolling problem on iPad & iPhone with the iframe embed method. I have previously used the Embed method which works fine on desktop, but it does not appear on iOS mobile devices.
After searching through the forum, I found the suggestion of using iFrame embed method in my web design software - Adobe Muse. The form appears but it always scroll to the top when I try to scroll down.
You can take a look at the issue by loading the link below on an iPad. it is almost impossible to fill in the form with the scrolling keep jumping to the top or that you cannot scroll down. The only way you can scroll down is scrolling close the right side of the screen, which is counter-intuitive for a mobile device.
I know that this is an issue in iOS for iFrame. Are there any solutions around this?
Right now in the Iframe code, you have put scrolling = "no". Can you please try to put scrolling = "yes".
That is please try the below code of iframe :
<iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotformeu.com/61711659250454" frameborder="0" style="width:100%; height: 2060px; border:none;" scrolling="yes"></iframe>
Thanks for the info, but I tried, it is still the same. It workS if I use my finger and scroll on the side of the iPad or iPhone.
It does not scroll properly if I were to use my finger and scroll in the middle. It will scroll to the top again.
It is a known issue on iOS with iframe from what I gathered. I may have to link to the main form URL for the mobile version, instead if embedding in an iframe on my web pages.
I tested your form on a iOS emulator and I was able to see the issue you were referring to. The form keeps scrolling to the top when I try to scroll down. Can you please try adding the ?nojump at the end of the form url to resolve the issue? You can use the iframe code below where I have added the ?nojump in the url.
<iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotformeu.com/61711659250454?nojump" frameborder="0" style="width:100%; height: 2060px; border:none;" scrolling="yes"></iframe>
If the issue persists, please let us know.
Thanks for the response and the new code. However, it is still the same. It works fine if you scroll with your finger on the side but when you put your finger towards the centre and slightly off from the extreme right or left, it scrolls back up again.
If you try to input into the field with the iPad software keyboard, it will jumps back up again, it is quite annoying. You may need to try it on the physical iPad or the iOS simulator may not be able to catch the problem.
It seems this is an issue with iFrame on iOS.
I'm not sure if this will work since I don't have an iPad. But can you try removingthis attribute on your iframe code and see if it fixes your problem:
Will be looking forward to your update.
is there any solution?
I got exactly the same problem as kismef descripes.
Everytime when i scroll down by taping the side of the page, where the form not is, i can scroll done without any problems, but once i tap on the form and fields the page move up to start.
my code is:
I have added: -webkit-overflow-scrolling:touch;
and remove onload="window.parent.scrollTo(0,0)" but the issue still here
I have moved your question to a new thread so that we can address your issue separately. You will be answered in the following thread: https://www.jotform.com/answers/1073149