Wordpress: Move the page up after the submission.

  • Profile Image
    Itzik Yahav 
    Asked on January 24, 2021 at 06:41 AM

    Hi Team,


    I am using a Jotform form on my WordPress website as a contact us form. The form itself is a bit long therefore when the user is done filling it out and clicks submit he/she is at the end of the website page. so when the "thank You" note appears they cannot see it since the wordpress not know how to read the iframe code that has now change, become shorter, and appears higher on the page.


    Is there anyway that i can ensure that the page moves up when the jotform is submitted so that the user can see the Thank you?


    Thank you


    1611486483_600d551354b94_

  • Profile Image
    KrisLei
    Answered on January 24, 2021 at 10:40 AM

    Hello Itzik,

    Please try adding "?nojump" parameter after the form ID on the iframe codes, then remove the onload="window.parent.scrollTo(0,0), or please try using this iframe codes:

      <iframe

       id="JotFormIFrame-90232933200444?nojump"

       title="NEW Jotform 2020 - YNH Contact Form "

       allowtransparency="true"

       allowfullscreen="true"

       allow="geolocation; microphone; camera"

          src="https://form.jotform.me/90232933200444"

       frameborder="0"

       style="

       min-width: 100%;

       height:539px;

       border:none;"

       scrolling="no"

      >

      </iframe>

    Kindly give it a try and let us know how it goes.

  • Profile Image
    OfficeYNH
    Answered on January 26, 2021 at 08:46 AM

    Hi,


    Thank you for your help, but if I add in the no jump wouldn't that have it not move when the submission is made?


    I want the page to move up when the submission is made so that the user can see the thank you page.


    Thank you

  • Profile Image
    Alexander_G
    Answered on January 26, 2021 at 09:58 AM

    Hello,


    Thank you for contacting Jotform Support.

    Currently, I am testing some workarounds for you - Please, allow me some time to test.


    Thank you for your patience,

    Alex

  • Profile Image
    Alexander_G
    Answered on January 26, 2021 at 11:28 AM

    Hi again,


    You can try to achieve it with a custom Thank you page and anchor on the top of it:


    Please, add an anchor to the custom Thank You page:

    Related Guide: Create-a-custom-thank-you-page-with-auto-redirect

    1444331897anchor.png

    You can copy it here:

    <a name="anchor"></a>


    Please position the anchor on the top of the page.


    The custom thank you page URL will look something like this:

    http://www.mywebsite.com/customthankyoupage.html#anchor


    How to change the thank you link:

    1611678323_6010427366a6f_


    Please try it and tell us if the issue still persists.


    Cheers,

    Alex

  • Profile Image
    OfficeYNH
    Answered on February 02, 2021 at 02:20 AM

    Hi team,

    Thank you for all of your help. However, our team does not work with code so I may be asking a simple question but would very much appreciate your help.

    This is our code below, where would I have to position this code <a name="anchor"></a> to make the page jump back up to see the thank you page when the user is done submiiting the form? What we did was create the form in jotform and just copy paste the Iframe into our wordpress backend. When i add the anchor code it does not change anything :(


    <iframe id="JotFormIFrame-90232933200444" style="min-width: 100%; height: 800px; border: none;" title="NEW Jotform 2020 - YNH Contact Form " src="https://form.jotform.me/90232933200444" frameborder="0" scrolling="no" allowfullscreen="allowfullscreen">

    </iframe>

    <script type="text/javascript">

       var ifr = document.getElementById("JotFormIFrame-90232933200444");

       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) {

        if (typeof e.data === 'object') { return; }

        var args = e.data.split(":");

        if (args.length > 2) { iframe = document.getElementById("JotFormIFrame-" + args[(args.length - 1)]); } 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;

         case "loadScript":

          var src = args[1];

          if (args.length > 3) {

            src = args[1] + ':' + args[2];

          }

          var script = document.createElement('script');

          script.src = src;

          script.type = 'text/javascript';

          document.body.appendChild(script);

          break;

         case "exitFullscreen":

          if   (window.document.exitFullscreen)    window.document.exitFullscreen();

          else if (window.document.mozCancelFullScreen)  window.document.mozCancelFullScreen();

          else if (window.document.mozCancelFullscreen)  window.document.mozCancelFullScreen();

          else if (window.document.webkitExitFullscreen) window.document.webkitExitFullscreen();

          else if (window.document.msExitFullscreen)   window.document.msExitFullscreen();

          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>

  • Profile Image
    Richie_P
    Answered on February 02, 2021 at 03:56 AM

    Adding an anchor tag in the form Iframe will not work without creating a new thank you page.

    As what my colleague has suggested, try creating a thank you page on your WordPress.com website and use it as a redirect in the form.

    In this new page, add the link so users can click on it. 

    Please check my colleagues work around and let us know how it goes.