When I click NEXT it goes to the middle of the next page, cuts off the top of the form...

  • Swoodruff2002
    Asked on June 3, 2015 at 12:16 PM

    I use pages in my form, when I click next it goes to the middle of the next page... rather than showing the progress bar widget and the top of the form page, my clients logo.  Can this be fixed?  

     

    I found other threads with "form focus" issues, and they seem to be dealing with Embed code. I'm seeing this in the preview option, and my form will be served from the JotForm servers, so I won't be embedding it at all.

    See videocast: http://screencast.com/t/uLztxLRe

     

    Thanks,

    Steve

  • Boris
    Replied on June 4, 2015 at 9:08 AM

    Hello Steve.

    I have taken a look at your form, and I can see the issue that you are describing - your logo and the progress bar widget are above the part of the page where the next page is jumping to.

    I'm afraid that both of these issues are caused by the default behavior of the form, for which there is unfortunately no option for changing at the moment. This happens due to a technical way in which the form is made. Progress widget and header are in a sense external to the form fields.

    When you click on to the Next page, the form doesn't really change pages - it hides the fields that are on the first page, and displays the fields that are on the second page, but the fields are all there at the same time, even when they are hidden.

    If you have noticed that the link of the form doesn't change when you click Next or Back, this is how we have managed to do it. So when you click next, the form hides all the form fields that were above the page break, and displays the fields that are under it. Then it jumps to the first field on that second page.

    I will try to explain it with an image of the form source.

    When I click NEXT it goes to the middle of the next page, cuts off the top of the form Screenshot 20

    1. The full form container, it contains the entire form and all other elements are inside it.

    2. The header logo, inside a ::before field. This is the first element of the form, before form fields.

    3. The progress Bar widget. This is the second element of the form, still before any form fields.

    4. Page 1 of the form, this is where your first fields start.

    5. Page 2 of the form, this is where form fields from page 2 are.

    Due to the technical way in which this is implemented, the form jumps to the fields from page two, rather than jumping back to the header. I have taken a look into it, but I do not believe that there is a way around it by using our tools at the moment.

    The only way to work around this issue would be for you to use the Source-Code of your form, and implement the scripting changes for the page jumping yourself, on your own website. You would probably need to hire a developer to help you with this.

    Please let us know if we can assist you further. Thank you.