Embedded forms scrolls to the very top of the page after clicking submit button

Behavior on MSFT Edge and Android on smartphone:

No default scrolling to top of thank you page (so, depending on where you were in the previous screen you might or might not see the thank you page).

Behavior on Firefox and Safari:

Instead of scrolling to thank you page, browser scrolls to top of page (i.e. thank you page is not visible). 

 

Neither behavior is correct: On all browsers it should scroll to the top of the thank you page (just like when you click the 'next' button when using the 'page break' widget).

 

My page:

http://skatch.myshopify.com/collections/portrait/products/pennpencil

 

 

 

 

Hello skatch,

I did test your form in Firefox and I am able to replicate the issue you are having. I would suggest you to please use the following iFrame embed code and see if that solves your problem:

 <iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotform.me/53341980197461" frameborder="0" style="width:100%; height:539px; 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; 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 = 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>

Do try it out and get back to us if the issue persists.

Thank you!

Hey Ashwin,

Thanks for your response. When using this code, all tested browsers (MSFT Edge, Android mobile, Firefox) show the behavior of scrolling to the top of the page.

The thank you page should behave identically to a page break (which correctly jumps to the top of the new page on all browsers already).

Thanks,

 

Btw, as a workaround I'd be happy to write my own thank you page, as a new page after page break. (This works IF one can redirect the submit button to a form page). Lmk if that's the easier route to take. Thanks.

I was able to replicate the problem by creating simple forms.

You can check this test website that I have: https://shots.jotform.com/charlie/scroll_to_top_simple_test_form.html 

I tried using the default script code and iFrame (on that test page, I'm using the iFrame code), and it jumps to the top page making the thank you page not visible.

 

 

As an alternative, perhaps you can just create your own "Thank You" page on your website. You can then redirect the user to that URL instead. Here's a guide: https://www.jotform.com/help/211-Setting-Up-the-Thank-You-Page 

 

I have forwarded the issue to our developers to have it checked and fixed. We will update you on this thread as soon as this has been fixed.

Apologies for the inconvenience.

Hey Charlie,

Thank you very much for following up on the issue! I'll use your workaround for now. Lmk if gets fixed.

Best regards,

 

 

You're welcome! Our developers will let you know once this get fixed. 

@skinnyfatties, your problem will be addressed here: http://www.jotform.com/answers/718585. 

@skatch

My colleague, Beril and I found separate possible workarounds that you can try. Here's how:

1. First, get a fresh copy of your iFrame embed code.

Workaround 1:

2. This is my sample iFrame code:

    <iframe

      id="JotFormIFrame"

      onDISABLEDload="window.parent.scrollTo(0,0)"

      allowtransparency="true"

      src="https://form.jotform.com/53372028196962"

      frameborder="0"

      style="width:100%;

      height:539px;

      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;

          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 = 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>

 

2. Remove the script code and delete the onload function, you can refer to the ones highlighted bold above. The final code that you will need to embed is structured like this:

 <iframe

      id="JotFormIFrame"

      allowtransparency="true"

      src="https://form.jotform.com/53372028196962"

      frameborder="0"

      style="width:100%;

      height:539px;

      border:none;"

      scrolling="no">

    </iframe>

 

The problem with that workaround is that the form may not be fully responsive, but you can try how it looks like. The important part is that you make sure that the height value of the iframe covers the whole form.

I'm still discussing the 2nd workaround to my colleague and will let you know if I get the whole procedure.

I hope this helps.