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

    Form scroll back to top as soon as I tap on any form field in iPad & iPhone.

    Asked by xe7en on February 22, 2017 at 12:10 PM

    Hi, 

    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:

     

    <iframe id="JotFormIFrame-70113199729359" -webkit-overflow-scrolling:touch; allowtransparency="true" src="https://form.jotformeu.com/70113199729359" frameborder="0" style="width:100%; height:950px; border:none;" scrolling="no"> </iframe> <script type="text/javascript"> window.handleIFrameMessage = function(e) { var args = e.data.split(":"); var iframe = false; if (args.length > 2) { iframe = document.getElementById("JotFormIFrame-" + args[2]); } else { iframe = document.getElementById("JotFormIFrame"); } if (!iframe) return; switch (args[0]) { case "scrollIntoView": iframe.scrollIntoView(); break; case "setHeight": iframe.style.height = args[1] + "px"; break; case "collapseErrorPage": if (iframe.clientHeight > window.innerHeight) { iframe.style.height = window.innerHeight + "px"; } break; case "reloadPage": window.location.reload(); break; } var isJotForm = (e.origin.indexOf("jotform") > -1) ? true : false; if(isJotForm && "contentWindow" in iframe && "postMessage" in iframe.contentWindow) { var urls = {"docurl":encodeURIComponent(document.URL),"referrer":encodeURIComponent(document.referrer)}; iframe.contentWindow.postMessage(JSON.stringify({"type":"urls","value":urls}), "*"); } }; if (window.addEventListener) { window.addEventListener("message", handleIFrameMessage, false); } else if (window.attachEvent) { window.attachEvent("onmessage", handleIFrameMessage); } if(window.location.href && window.location.href.indexOf("?") > -1) { var ifr = false; if (args.length > 2) { ifr = document.getElementById("JotFormIFrame-" + args[2]); } else { ifr = document.getElementById("JotFormIFrame"); } var get = window.location.href.substr(window.location.href.indexOf("?") + 1); if(ifr && get.length > 0) { var src = ifr.src; src = src.indexOf("?") > -1 ? src + "&" + get : src + "?" + get; ifr.src = src; } } </script>

     

    I have added:  -webkit-overflow-scrolling:touch; 

    and remove onload="window.parent.scrollTo(0,0)" but the issue still here

     

    Thanks!

    Chor

  • Profile Image
    JotForm Support

    Answered by Kiran on February 22, 2017 at 02:09 PM

    We request you to provide with the web page URL where the form is embedded so that we can take a look and provide you with necessary assistance. 

    We will wait for your response. Thank you! 

  • Profile Image

    Answered by xe7en on February 23, 2017 at 03:12 AM

    Hi, 

     

    the webpage is: http://www.humilife.de/tablet/index.html

     

    if you open this page with an emulator or a simulation tool, it would work.

    But if you do it with the iPad it would not.

  • Profile Image
    JotForm Support

    Answered by ashwin_d on February 23, 2017 at 06:44 AM

    Hello Chor,

    I did check your form and it seems it is not mobile responsive. I would suggest you to please enable "Mobile Responsive" option and see if that solve your problem. Please check the screenshot below how to enable mobile responsive:

     

    Hope this helps.

    Do get back to us if the issue persists.

    Thank you!

  • Profile Image

    Answered by xe7en on February 23, 2017 at 09:24 AM

    Hello ashwin_d

     

    and here i confrontated with another issue. If i click on the advance designer - every css styles dont work more. So my design would change to a non css design, which looks very bad. 

     

  • Profile Image
    JotForm Support

    Answered by Kiran on February 23, 2017 at 10:55 AM

    I have checked the web page and see that there are few JotForm related scripts added to the form in the head section of the web page. 

    Please try removing these additional JotForm scripts on the web page since the form is embedded on an iframe. Please let us know if the issue still persists. We will be happy to assist. 

    The issue with the Form CSS is moved to a separate thread and shall be addressed there shortly.

    https://www.jotform.com/answers/1074213

    Thanks!

  • Profile Image

    Answered by xe7en on February 23, 2017 at 12:35 PM

    the scripts in head are moved but the form still not works on iPad & iPhone. It has the same issue like before - as soon as i touch the field (for example to write something) the page will jump to top. 

  • Profile Image
    JotForm Support

    Answered by Kiran on February 23, 2017 at 02:28 PM

    Could you try changing the form URL to //form.jotformeu.com/70113199729359 since I see some scripts are getting blocked due to https? Let us know if this change makes any difference. We will be happy to take a look again.

    Thanks!

  • Profile Image

    Answered by xe7en on February 24, 2017 at 08:59 AM

    Done. but got the same issue again. The site still move to top by pasing or clicking the form.

     

  • Profile Image

    Answered by KadeJM on February 24, 2017 at 11:58 AM

    We appreciate the update about this problem.

    I have an iPhone and iPad as well where after testing this further on my end I am seeing that there appears to still be a problem as you mentioned.

    I am able to scroll down but then it forces me back to the top of the page. Is that the problem you were speaking of at first for this matter?

    I am able to scroll down but then it forces me back to the top of the page.

    Just looking through your website source to take a look at what you have I noticed there is a lot going on to make it function.

    Can you try switching up the embedded form to an unsecured form link to match your website since it is not using https to see if that makes any difference?

    So for instance what I mean by that is you have https included in your form which is mixed content and sometimes that doesn't work very well because of the differences. So you can try changing it up to just http://www.jotformeu.com/form/70113199729359. 

    If that still doesn't work just let us know and we can look into it more to see what else we might be able to do to help resolve the issue.