Question

Modern Designer Pagination - Have page scroll to top of next page after clicking 'Next'

Forms Layout Designer Version 11 Web Customizations Ideas

Updated January 2

asked on May 1, 2023 • Show version history

I have a long form broken into four smaller pages, but the pages are still longer than the average monitor/mobile device screen.

When testing my users found it frustrating that clicking next after filling out a page, took them to the bottom of the next page instead of the top of the next page.

I could easily work it out with JavaScript in classic designer, but I'm struggling wtih JS in the new designer.

I'd also like to hide the 'Previous' button on the first page, and the 'Next' button on the last page, but I'm pretty sure I can work that one out for myself with CSS.

2 0

Answer

SELECTED ANSWER

replied on May 1, 2023 • Show version history

Here's an option to help with the scrolling when going to another page. You can add a link at the bottom of the page that takes you to the top of the page.

First, figure out the q-id that applies for each page. You can see this by going to the CSS configuration screen, and it'll show at top for each page, like this:

On this screenshot, the field ID for "Page 3" is 2, so the q-id is q2. On this test form, the first thing I did was add the pages, so those were the first q-id values issued, so they are q0, q1, and q2 for Page 1, Page 2, and Page 3 respectively. But each page on each form will be different.

At the bottom of each page, add a Custom HTML Element, with the following HTML. Just change the href value to the specific q-id of the specific page that the Custom HTML Element is a part of.

<div style="text-align: right;"><a href="#q0">Back to top</a></div>

If you add that to the bottom of each page, being careful to list the q-id for each specific page, then all pages will have a link at the bottom that takes the user to the top.

2 0

Replies

replied on January 2

In case you haven't seen it yet, this was included in v11 Update 5! It goes to the top of the form, not the whole page.

2 0

replied on May 1, 2023

This CSS should work to hide the Previous/Next buttons when they are disabled:

button.pagination-btn:disabled {
  display: none;
}

Regarding the other part, about jumping to the top of the page when using the Previous/Next buttons. I would love to see that behavior as well. Unfortuntely, I think it is something that would require an enhancement to be implemented.

Unforunately for situations like this, the Javascript on the Forms Layout Designer runs within a sandboxed iFrame, so it cannot modify the structure or functionality of the form directly, only the components and functions that have been enabled in the LFForm interface.

Hopefully Laserfiche will consider adding this functionality in the future. In the meantime, if it is a necessary aspect of your Form's functionality, you may need to utilize the Forms Classic Designer instead.

1 0

View 1 previous reply

SELECTED ANSWER

replied on May 1, 2023 • Show version history

Here's an option to help with the scrolling when going to another page. You can add a link at the bottom of the page that takes you to the top of the page.

First, figure out the q-id that applies for each page. You can see this by going to the CSS configuration screen, and it'll show at top for each page, like this:

At the bottom of each page, add a Custom HTML Element, with the following HTML. Just change the href value to the specific q-id of the specific page that the Custom HTML Element is a part of.

<div style="text-align: right;"><a href="#q0">Back to top</a></div>

If you add that to the bottom of each page, being careful to list the q-id for each specific page, then all pages will have a link at the bottom that takes the user to the top.

2 0

replied on May 3, 2023

Thank you Matthew.

1 0

replied on May 3, 2023

You're welcome.

0 0

You are not allowed to follow up in this post.

Question

Question

Modern Designer Pagination - Have page scroll to top of next page after clicking 'Next'

Answer

Replies

Sign in to reply to this post.