How Can I Embed a JotForm so that it scrolls on my iPhone?

  • Profile Image
    watrhub
    Asked 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!

  • Profile Image
    watrhub
    Answered 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
    EltonCris
    Answered 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
    watrhub
    Answered 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
    EltonCris
    Answered 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
    watrhub
    Answered 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
    Cesar
    Answered 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
    EltonCris
    Answered 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
    watrhub
    Answered 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
    Cesar
    Answered 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.