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.
How Can I Embed a JotForm so that it scrolls on my iPhone?Asked by watrhub on October 03, 2013 at 09:10 PM
Right now, when I view my website with the JotForm embedded, I can't scroll down past the first screen on my iphone. Since you are using an iframe, it doesn't allow me to scroll.
Is there any way you help fix that?
I don't have a link because the form is behind a login, but i can scroll down on the iphone if i use the whitespace beside the form, but actually on the form (or anywhere on the iframe), it doesn't scroll down the page.
Do you have any suggestions?
Try to re-embed your form using iframe embed code without the script and then set the iframe scrolling to yes. Example:
<iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotformpro.com/form/32758651193966" frameborder="0" style="width:100%; height:529px; border:none;" scrolling="yes"></iframe>
If this doesn't help, let us know here so we can assist you further. Thanks!
This is the code I have been using from (iframe embed), but haven't gotten it to work:
<iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotform.ca/form/32756702628257" frameborder="0" style="width:100%; height: 450px; border:none;" scrolling="yes"></iframe>
I have tried scrolling="yes" and "auto", but neither work. I have tried changing my height from 450px to 100% or even 500px, but that doesn't work either.
Every page of my page on the iPhone can scroll except for what's in the iframe. I have tested with multiple versions of the iphone (3GS and 5) and it doesn't work on either.
I see. That might be due to the fact that iframe would create a separate scrolling bar. May I request to try it with the source code embed? Since the source code itself is declared on the page, it might work the same as the other elements on your page in other words, they will go with the iphone scrolling. It's worth a try. How to get your Form Source Code (just copy the provided source code).
If this doesn't help, It'd be best to provide to us the test page where we can check the problem so we can check it on iphone simulators. Thanks!
So I took the source code along with the css and js files and inserted them into my page.
I got a few errors when I inspect the code using Chrome. The form does not show. It's blank where the form should be.GET http://backup-app.watrhub.com/media/js/json2.js?v=3.1.1606 404 (Not Found) wwtp_profile:74Uncaught TypeError: Object [object Object] has no method 'dispatchEvent' prototype.js?v=3.1.1606:6057
Kindly provide the link to your site so that we may be able to look at your code in depth. Thank you.
Thanks for your swift replies.
The first error indicates that json2.js can't be retrieved which is not found on your server. The second one is probably caused by conflict.
Did you download the full form source code or just copied the source code?
Honestly, It'd be hard to help without having to see the actual page. It'd be best if we can diagnose the problem in our browsers.
I understand, but for me to create a test page outside of our logins would be a lot more work.
The json2.js file did not come in the downloaded zip file when i downloaded the source code, thus it never got to the server. I tried to find it from your CDN, but I couldn't.
I will work on can reproducing the problem on a test page for you outside of our web app login. Again, the issue only shows up on iPhone devices (have not tried on an iPad).
I would suggest to try the source code instead of the full source code first. So that you dont need to reference or upload the js files to your server.