JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.
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.
Form not returning to the top when clicking Next on a multipage form that's embedded in webpage using the embed script.Asked by benrickard on October 12, 2016 at 04:18 PM
My form: http://builtininsurance.co.nz/small-project-guarantee/ is a multi page form where each page is a different height. I've had problems with iFrame before and have been using the embed script without a problem.
However, when I move on to the next page on this form, the form does not cleanly return to the top of the form, it tends to cut off the heading.
Is there a way to fix this so that when you go to the next page it clearly shows the heading at the top?
I've read previous threads on this issue but would rather not use iFrame because of the fixed height requirement and issues with mobile (unless this has changed)?
Am I experiencing some script conflicts on the page?
It appears that the form jumps to the very top of the page when you click next, but since you have a fixed header on top, the topmost part of the form is being covered by the header.
Can you please try adding ?nojump to the script embed code to see if this resolves the issue? You can use the code below:
If the issue persists, please let us know.
Hi Chriistian, yes I see what you mean. Can we fix this with some padding in the top of the form perhaps?
I've tried the ?nojump however, the problem then is that the form stays at the bottom, which is not ideal for a longer form where you've scrolled down to click NEXT. So you then have to scroll up to get to the top on the next page, which is worse.
Would some form padding help solve the fixed header obscuring the top of the form? If so, could you please suggest the best place to do this?
Yes, we can add a margin on top of the form to prevent the fixed header from covering the top of your form. Please inject the custom CSS code below into your form:
Please let us know if you need further assistance.
Great, that has worked really well, thanks! However, rather than having white space as the margin (it looks a bit off on the webpage to have a blank space),could I replace this with a "form cover" image or a heading that would remain at the top even when moving pages (which I wouldn't mind being blocked by the website menu)?