Form not returning to the top when clicking Next on a multipage form that's embedded in webpage using the embed script.

  • Profile Image
    benrickard
    Asked on October 12, 2016 at 04:18 PM

    Hi there,

    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?

    Thanks!

    Ben.

  • Profile Image
    Chriistian
    Answered on October 12, 2016 at 11:39 PM

    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:

    <script type="text/javascript" src="https://form.jotform.com/jsform/62079025870962?nojump"></script>

    If the issue persists, please let us know.
    Regards.

  • Profile Image
    benrickard
    Answered on October 13, 2016 at 03:24 AM

    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?

    Thanks,

    Ben.

     

     

     

  • Profile Image
    Chriistian
    Answered on October 13, 2016 at 04:35 AM

    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:

    .form-all {

        margin-top: 90px;

    }

    Please let us know if you need further assistance.
    Cheers.

  • Profile Image
    benrickard
    Answered on October 13, 2016 at 04:39 PM

    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)?