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.


  • Profile Image

    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?

    Thanks!

    JotForm scroll thanks
  • Profile Image

    Answered by watrhub on October 03, 2013 at 09:41 PM

    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?

  • Profile Image
    JotForm Support

    Answered by EltonCris on October 03, 2013 at 10:29 PM

    Hi,

    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!

  • Profile Image

    Answered by watrhub on October 03, 2013 at 10:35 PM

    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>
    <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 = 450 + "px";break;}};if (window.addEventListener) {window.addEventListener("message", handleIFrameMessage, false);} else if (window.attachEvent) {window.attachEvent("onmessage", handleIFrameMessage);}</script>

     

    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.

  • Profile Image
    JotForm Support

    Answered by EltonCris on October 03, 2013 at 10:44 PM

    @watrhub

    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!

  • Profile Image

    Answered by watrhub on October 03, 2013 at 11:15 PM

    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.

     

    Uncaught TypeError: Object [object Object] has no method 'dispatchEvent' prototype.js?v=3.1.1606:6057


  • Profile Image

    Answered by Cesar on October 03, 2013 at 11:27 PM

    Hi,

    Kindly provide the link to your site so that we may be able to look at your code in depth. Thank you.

  • Profile Image
    JotForm Support

    Answered by EltonCris on October 03, 2013 at 11:34 PM

    @watrhub

    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.

    Thanks!

  • Profile Image

    Answered by watrhub on October 03, 2013 at 11:39 PM

    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).

  • Profile Image

    Answered by Cesar on October 04, 2013 at 12:08 AM

    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.