Back / Next buttons at both the top and bottom of the page

Hi,

Due to the nature of our form being 31 pages long, the use of tabs won't work as they bunch up at the top and look really messy, taking up an undesirable portion of the page.

Also as a result of the form being so long, it becomes an issue in the event that a user needs to go back in the form to a previous page. As clicking the back button on the bottom of the page brings the user back to the top, and instead of having to then scroll down again to click the back button again, would it be possible to have a back and next button at the top of the page as well as at the bottom.

That way a user can click the next button easily at the bottom when they finish the page, and then can click the back button at the top of the page to see where they are when navigating in reverse.

If this is not possible, is there another method to achieve the same outcome / goal?

If you'd like to test around on the form, you can clone this form:  https://form.jotformeu.com/83092696433363

Thanks,

-Oliver

There isn't currently an option that would allow for having the back/next button at both the top and the bottom of the page.  Short of doing something like adjusting the tabs widget to be on the side of the form instead I am not sure if there are any other options.  With 30+ pages it still looks odd down the side.  The form would need to be adjust to account for the tabs but this is how the tabs would look going down the side:

https://form.jotform.com/83464327903965

Thanks for your help David.

-Oliver

Just had another thought David.

I am currently injecting css code into the form to manipulate the tabs so that they fit correctly on the page.

I've figured a way around having 31 tabs, instead we are happy to suffice with sectioning the form. That way instead of there being 31 tabs, there can be 5-10, where each tab will be the start of a section.

Given this, we can fit the tabs along the top as they'll now fit in one line given some adjustments.

However I am having an issue with placing them without affecting the rest of the form.

As the tabs don't allow me to manually inject css into them, I'm having to use the forms general css. This uses the "form-all" class, which is a problem because this class is also used by the form column code that @Mike helped me with. Thus the resulting issue is that I can't use the form columns whilst using the tabs as the tab code allows me to position them correctly which affects the page columns.

If there is a way around that that you or Mike can help me with then that would be great, however the thought I had was changing the position of the back and forward buttons to the top of the page using the css injection, by making the position declaration to fixed, then those buttons should continue down the page whilst the user scrolls.

Would it be possible to fix the next and back buttons to the screen using css code injection?

Thanks,

-Oliver

I think I may have solved my problem regarding having the next and back buttons fixed to the page in the corners. I've used:

.form-all .form-pagebreak-back {

      position: fixed !important;

      top: 0px;

      left: 0px;

}

.form-all .form-pagebreak-next {

      position: fixed !important;

      top: 0px;

      right: 0px;

}

Just a test form with this implemented, in case you could better the navigation:

https://form.jotformeu.com/83472769615368

The buttons are in the very top corners, left and right respective to the back and next. Hard to see at the moment, but I'm just testing around.

Thanks,

-Oliver

I checked the form and the buttons are indeed at the top right and left respectively.  The position adjusts based on the width of the page so it does seem functional.  Since they are above the form it should also work on mobile.  Not a bad solution.

Yes I think I will be sticking with this method. I've managed to style it up a bit more so that the back and next buttons make a little more sense:

and I've managed to manipulate the page error message to appear at the top. Since I can't add custom HTML, I've grabbed the container for the back and next buttons when they were at the bottom and placed it at the top, stretched it and made it grey so that it looks like something new but it's actually just an invisible container from before.

The one issue I'm having is that when I click the back or next button a little too fast, the page doesn't return to the top but stays at the same height equivalent from the previous page. Is there a way to set the page view to focus the top every time the next or back button is pressed?

Form link if you need to mess with it to find a solution:  https://form.jotformeu.com/83092696433363

I've tried messing around with that but can't seem to find a solution.

Thanks,

-Oliver

I have also noticed that if you press the next button fast enough, you can skip pages that require entry without entering anything. Upon further analysis, it seems this is because the narrative fields don't load fast enough and thus it seem the pages moves on despite them being required:

The pages I was able to skip regardless of required fields was pages 10 and 11. The way I was able to keep replicating this is by using the preview view and selecting fill form. This fills in all fields except the narrative fields. I had always assumed this never filled narrative fields because they were custom widgets, but it got me thinking that they don't fill because they don't load fast enough for the auto filler. Just a thought. Any way around this?

Thanks,

-Oliver

For the narrative fields, try requiring the field itself in addition to setting each portion to be required in the widget settings:

It should make for a stricter check on the fields being empty.

As for the form not loading new pages at the top, I have so far been unable to reproduce the issue, even when navigating in between pages rather quickly.  Does this only occur in the preview?  Let us know when you can and we can look into this further.

Hi David, thanks, I believe that has fixed the issue with the narrative fields. 

Regarding the pages being at the top, I've noticed that the screen displays the first field at the top rather than the logo and title, which isn't that much of an issue anymore.

-Oliver