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

  • Profile Image
    nelsagroup
    Asked on August 03, 2017 at 05: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?

  • Profile Image
    ashwin_d
    Answered on August 03, 2017 at 07: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!

  • Profile Image
    nelsagroup
    Answered on August 03, 2017 at 09: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.

  • Profile Image
    ashwin_d
    Answered on August 03, 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!

  • Profile Image
    nelsagroup
    Answered on August 08, 2017 at 05: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.

  • Profile Image
    ashwin_d
    Answered on August 08, 2017 at 08: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!