Form embedded to our Shopify website is jumping to the form instead of starting on top of the website page

1. Upon completion, the form scrolls to the top of the page when I would like it to just scroll to the top of the grey div containing the form

Could you tell us if the following code, mentioned by my colleague previously helps you to achieve the scrolling to the top of the form and not the page:

<iframe
      id="JotFormIFrame"
      onDISABLEDload="window.parent.scrollTo(0,750)"
      allowtransparency="true"
      src="https://form.jotform.com/61044845797163?nojump"
      frameborder="0"
      style="width:100%;
      height:539px;
      border:none;"
      scrolling="no">
   </iframe>

 

When I have this code, the page jumps to the top of the form upon landing on the page. I only want it to scroll to the top when I have submitted the button.

I checked your website where the form was used and I was able to see the jumping behavior you described.

 

so to fix this behavior, just reset the iframe onload code to zero(0) i.e. onDISABLEDload="window.parent.scrollTo(0,0)"

 

I suggest we fixed this first so that we can properly test again the submission jump you want to happen.

I test submitted the form on the website and I see it was not jumping to the top of the page, but instead was staying to the Thank You section of the form.

 

There are 2 objectives here:

#1 On page load, it should be at the top/start of the page (not to the form section)

#2 On form submission, the Thank you page should be at the top/start of the page.

I have a hunch that fixing the code  onDISABLEDload="window.parent.scrollTo(0,0)"   should achieve both the mentioned requirements already. So change that code for now and we will test again.

We will wait for your updated response.

 

 

Hi,

The page doesn't jump to the top of the form upon the page loading which is good. 

However, I am STILL jumping to the top of the page (and not the iFrame) when the form has been submitted. Additionally, the "our blog" link STILL opens up in the iFrame. 

Might have to start looking into a different solution if I cant solve this soon.

Mitchell 

Solved the our blog link issue. So all we need to focus on is making the form scroll up to the top of the iFrame upon submission only.

Thanks!

Mitchell 

I have checked your form and I can see you've changed the function onload with onsubmit this trigger the function when the form is submitted, here you may follow the code provided on the reply above, so replace the current code with this one: 

onDISABLEDsubmit="parent.scroll(0,0)" 

This should scroll the form to the thank you message once this is submitted. 

Do let us know here how it goes. 

Hi Kevin,

This did not work either. I don't know what else to do -- been trying to solve this for way too long. I may have to try a different provider. 

I appreciate your efforts though,

Mitchell 

After making some tests, I found a way to scroll to the thank you message once the form is submitted, to achieve it you will need to embed your form using the iFrame code, since it has an ID and it is used to get this code working. 

Once you have embedded your form using the iFrame code you will need to add this jQuery code to your website: 

<script type="text/javascript">

$( document ).ready(function() {

i = 0;

   $('#JotFormIFrame').load(function(){

    i++;

   if(i>1){

    position  =  $(this).offset();

$('html, body').animate({ scrollTop: (position.top)});

   }

});

});

</script>

Even though the form will keep scrolling to the top of the website when it is submitted, this jQuery code will force the scroll to the thank you message, so your users will not need to scroll down to see the thank you message, also it does not matter the elements that are above the iFrame JotForm it will always scroll to the same position of the thank you message, here is an example about how it works: 

Hope this helps.