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

    Page Break: Page doesn't scroll to top when the Next/Back button is pressed

    Asked by buildmyhomenz on April 26, 2015 at 12:02 PM
    Sorry, no it's still not resolved 2 years, 4 months later....
  • Profile Image

    Answered by raul on April 26, 2015 at 12:07 PM

    Can you provide more details about your inquiry?
    Is this happening in the standalone version of your form or when the form is embedded on your website? 

    I've checked this form: http://www.jotform.co/form/51122715297857 which has page breaks, but I was unable to reproduce the issue on my side using Chrome v42.

    Please provide as many details as you can on how to reproduce the issue so we can better understand it and provide further assistance.

  • Profile Image

    Answered by buildmyhomenz on April 30, 2015 at 12:21 AM

    Thanks for your reply,  and thank you for providing the link http://www.jotform.co/form/51122715297857 .

    I can see why you think that the issue is resolved, however on the long pages - lets say Stage 2, Part 2 of the attached link (where the form is higher than the users screen) - when the user scrolls to the bottom of the form and clicks "Part 3" the form reloads and the page jumps to the top of the form, but not the top of the webpage.  In this example you can scroll up further to reveal white space where a website header may be located.

    Is it possible that when the "Next" button is clicked the page/form refreshes at the very top of the webpage, not just the top off the form?

     

    Thanks

  • Profile Image
    JotForm Support

    Answered by Charlie on April 30, 2015 at 02:57 AM

    Hi,

    This is because the actual jump will be on top of the form itself and not on the white space of it, which is I believed the padding of the form. We could just remove the padding so that there won't be a spacing at the top of it.

    I've cloned your form as a test form and remove the padding there, this is how it will looked like: http://form.jotformpro.com/form/51191324163952?.

    This is the custom CSS code that I used and I added it under Form Designer Tool->CSS Tab:

    .jotform-form {

    padding-top: 0 !important;

    padding-bottom: 0 !important;

    }

    Do let us if this works.

    Thank you.

  • Profile Image

    Answered by buildmyhomenz on April 30, 2015 at 04:40 AM

    Thanks

     
    This works excellently to remove the padding from the top and bottom of the form and move the form to the top of a blank page, however I will be placing the form on a webpage with a navigation menu at the top within a header.  After editing the CSS the form indeed moves immediately below the header of the page.  but I would like to see the webpage header (which is located above the form) when a user clicks 'next'
     
    Basically, when a user clicks 'next' the page will jump to the very top of the webpage, not just the top of the form regardless of if there is content above the form or not.
     
    Thanks again. 
  • Profile Image
    JotForm Support

    Answered by Charlie on April 30, 2015 at 04:48 AM

    Just to confirm, you would like the menu to be inside the form as a header? Or is the menu in your actual webpage? If the menu is in the website itself and not in the form, then you can try using the iFrame code, here's how you can get your iFrame: http://www.jotform.com/help/148-Getting-the-Form-iFrame-Code.

    Here's an example of my form with the iFrame code, assuming I have a web page and will embed that iFrame code:

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)"allowtransparency="true" src="//form.jotformpro.com/form/50885628517971" frameborder="0" style="width:100%; height:539px; border:none;" scrolling="no"></iframe>

    You'll notice the "onload='window.parent.scrollTo(0,0)'". It has the coordinates to up to where the jump should be, could you try if that's a possible fix, however, you'll need to embed your own iFrame in your website to see that changes.

    I hope that helps.

    Thank you.

  • Profile Image

    Answered by ToliverBancroft on March 22, 2016 at 04:49 PM

    Just an FYI, that didn't work for me. I think I know what buildmyhomenz is referring to.  Instead of iFrame, I used "source code" and it worked perfectly for me.  Hope this helps.

  • Profile Image
    JotForm Support

    Answered by BDAVID on March 22, 2016 at 04:57 PM

    @ToliverBancroft thank you for your contribution.