Thank you message: Make page automatically scroll to the top after submitting

  • Profile Image
    koob199
    Asked on April 28, 2014 at 06:09 PM
    My form is a bit long so when my users get to the "submit" button the page has been scrolled down. When they click "submit" and the form completes uploading, my thank you message appears, however it appears at the top of the page, so they can't see it... and they question if it submitted properly. Can I have the page automatically scroll to the top after submitting?
  • Profile Image
    Jeanette
    Answered on April 28, 2014 at 06:32 PM

    Looks like your iFrame code needs to be updated, so far it's missing the code in bold:

    So, please replace the current code for the one in green and yellow. If the problem persist, you should get rid of the yellow part

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

  • Profile Image
    Jeanette
    Answered on April 28, 2014 at 06:34 PM

     

    Actually, this is the right code:

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

  • Profile Image
    koob199
    Answered on April 29, 2014 at 01:49 PM

    Thank you but I believe I read on your website that when using with Squarespace I was supposed to actually delete that section in bold so it worked properly. Is that not true? I will try to put that back in and test.

    UPDATE: I tried the update and it worked for my one form. Is the code you gave me just the "I Frame" code copied as is? Maybe squarespace fixed their issue.

     

    Thanks

  • Profile Image
    EliezerN
    Answered on April 29, 2014 at 02:53 PM

    Yes, the code share by Jeanette is the iframe code as is. Probably the elements that were making the form to fail if the code included the bold part were removed or it was temporary glitch.

    Please inform us if you still need assitance with this query.

    Thanks