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

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

    Asked by skatch on December 03, 2015 at 02:24 AM

    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

     

     

     

     

    scroll thank Android next not visible
  • Profile Image
    JotForm Support

    Answered by ashwin_d on December 03, 2015 at 06:18 AM

    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" onload="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!

  • Profile Image

    Answered by skatch on December 03, 2015 at 10:25 PM

    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,

     

  • Profile Image

    Answered by skatch on December 03, 2015 at 10:34 PM

    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.

  • Profile Image
    JotForm Support

    Answered by Charlie on December 04, 2015 at 03:43 AM

    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.

  • Profile Image

    Answered by skatch on December 04, 2015 at 03:47 AM

    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,

     

     

  • Profile Image
    JotForm Support

    Answered by Welvin on December 04, 2015 at 05:49 AM

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

  • Profile Image

    Answered by skinnyfatties on December 05, 2015 at 09:37 AM

    I'm having an issue when you fill out the form for airtailor.com on mobile and click "SIGN UP", it submits then takes you to the top of the page. Users have no idea if it submitted or not unless they scroll back down to where it says, "Thank You.."

    Please help!

  • Profile Image
    JotForm Support

    Answered by Welvin on December 05, 2015 at 10:41 AM

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

  • Profile Image
    JotForm Support

    Answered by Charlie on December 08, 2015 at 09:19 AM

    @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"

          onload="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.