Wordpress: Move the page up after the submission.

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

Hello Itzik,

Please try adding "?nojump" parameter after the form ID on the iframe codes, then remove the onDISABLEDload="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.

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

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

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

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:

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

Cheers,

Alex

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>

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.