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

    iframe form causing the page to jump to the top

    Asked by harrietgeo on July 31, 2014 at 06:45 PM

    I am working on the site www.weathertogether.org, which has a desktop site, tablet site and mobile site. There are two competitions on the site run through jotform and when I view it on a mobile, when you touch the screen near the form (but not the buttons) it keeps jumping all the way up to the top of the page.

    I tried adding ?nojump into the jotform url but nothing changed. 

    Note that the mobile site has a different form version than the desktop/tablet site - different sized forms & fonts.

    Any help would be greatly appreciated - the campaign is about to be launched!

    Page URL:
    www.weathertogether.org

    iframe form jump top JotForm Mobile different nojump
  • Profile Image
    JotForm Support

    Answered by EltonCris on July 31, 2014 at 09:49 PM

    Hi there,

    As of checking your page, your forms are embedded as script not iframe. Did you change your embed codes? If it's initially embedded as script, try the iframe embed code without the script included in it.

    Here's how to get your iframe embed code

    Example:

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotformpro.com/form/42117897865974" frameborder="0" style="width:100%; height:1986px; border:none;" scrolling="no"></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 = args[1] + "px";break;}};if (window.addEventListener) {window.addEventListener("message", handleIFrameMessage, false);} else if (window.attachEvent) {window.attachEvent("onmessage", handleIFrameMessage);}</script>

    Just the iframe, do not include the script. You can also change the iframe height (bolded above) so it fits exactly on your div container.

    Let us know if you have further questions. Thanks!

  • Profile Image

    Answered by harrietgeo on July 31, 2014 at 10:22 PM

    Thanks for the reply. I've fixed up the size issue which is great, but now when i scroll over where the form is, it just automatically scrolls back up to the "Win a smartphone" heading - it seems like the scrolling problem is worse!

  • Profile Image
    JotForm Support

    Answered by ashwin_d on August 01, 2014 at 04:13 AM

    Hello harrietgeo,

    I did check your web page in my iPhone device and I am able to replicate the issue you are having. The page automatically scrolls back to the "Win a smartphone" heading.

    I would suggest you to remove the " onload="window.parent.scrollTo(0,0)" " code from your iFrame embed code and see if that solves your problem.

    Do get back to us if the issue persists.

    Thank you!