Problem with autoscrolling whole page when JotForm is embedded in webpage.

  • nelsagroup
    Asked on August 3, 2017 at 5:49 AM

    Hi, i have weird problem with my jotform. When i go to my site by url linking to anchor on my page, it automatically scroll to the top of the website :( it only happens when jotform is on page, and only on firefox and safari. How can i fix this?

  • Ashwin JotForm Support
    Replied on August 3, 2017 at 7:49 AM

    Hello nelsagroup,

    Do you mean to say that in firefox and safari browser, webpage does not scroll and show default section?

    Please use the following iFrame embed code to embed your form in your webpage and see if that solves your problem:

     <iframe id="JotFormIFrame-71554663882365" allowtransparency="true" src="https://form.jotformeu.com/71554663882365" frameborder="0" style="width:100%; height:539px; border:none;" scrolling="no"> </iframe> <script type="text/javascript"> var ifr = document.getElementById("JotFormIFrame-71554663882365"); if(window.location.href && window.location.href.indexOf("?") > -1) { 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; } } window.handleIFrameMessage = function(e) { var args = e.data.split(":"); 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); } </script>

    Hope this helps.

    Do get back to us if the issue persists.

    Thank you!

  • nelsagroup
    Replied on August 3, 2017 at 9:14 AM

    Super! it works! But i modified your code for my similar form in Russian language here http://nelsa.com.ua/RU.html#section-8 and it didn't work here :/ what i doing wrong? I change the iframe id and src only in your code.

  • Ashwin JotForm Support
    Replied on August 3, 2017 at 11:40 AM

    Hello,

    Have you done any other changes apart from changing the form ID?

    Please use the following iFrame embed code and see if that helps you:

     <iframe id="JotFormIFrame-71804131432344" allowtransparency="true" src="https://form.jotformeu.com/71804131432344?nojump" frameborder="0" style="width:100%; height:539px; border:none;" scrolling="no"> </iframe> <script type="text/javascript"> var ifr = document.getElementById("JotFormIFrame-71804131432344"); if(window.location.href && window.location.href.indexOf("?") > -1) { 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; } } window.handleIFrameMessage = function(e) { var args = e.data.split(":"); 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); } </script>

    Do get back to us if the issue persists.

    Thank you!

  • nelsagroup
    Replied on August 8, 2017 at 5:45 AM

    Hello again, i really don't know what's going on :( This code also didn't work on this site http://nelsa.com.ua/RU.html#section-8 . But UA page works correctly.

  • Ashwin JotForm Support
    Replied on August 8, 2017 at 8:33 AM

    Hello,

    I have checked your RU webpage again and I am able to replicate the issue you are having. I am not sure what is causing this issue. When the page is loaded, it seems to trigger some script which scrolls the page to top again. 

    Though I am unable to find any difference between both the webpages but have you added any script or some other code in your RU page. can you please remove the form embed code form your webpage and then see if it correctly scrolls to "section-8".

    We will wait for your response.

    Thank you!