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

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

    Asked by totallee on May 19, 2016 at 04:50 PM
    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
    scrollTo top form submission
  • Profile Image

    Answered by Ben on May 19, 2016 at 05:02 PM

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

     

  • Profile Image

    Answered by totallee on May 19, 2016 at 05:43 PM

    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.


  • Profile Image
    JotForm Support

    Answered by jonathan on May 19, 2016 at 08:23 PM

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

     

     

  • Profile Image

    Answered by totallee on May 20, 2016 at 03:59 PM

    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 

  • Profile Image

    Answered by totallee on May 20, 2016 at 04:07 PM

    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 

  • Profile Image
    JotForm Support

    Answered by Kevin_G on May 20, 2016 at 05:22 PM

    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: 

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

  • Profile Image

    Answered by totallee on May 23, 2016 at 05:07 PM

    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 

  • Profile Image
    JotForm Support

    Answered by Kevin_G on May 23, 2016 at 07:03 PM

    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.