iframe form causing the page to jump to the top

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

  • Profile Image
    Answered 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


    <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 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
    Answered 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!