Automatic Scrolling through tabs & elements

eForm has some nice auto-scrolling features for better user experience.

  • The form scrolls to the top of the tab/container during progress.
  • When validation error occurs, form scrolls to the element.
  • During submission process, form scrolls to messages.

All of these are built into the core of eForm UX. But as always you can customize them. Do note that these features are available only for Tabular & Paginated Appearance. Normal Single Paged form does not implement any scrolling because it does not require.

Setup Scrolling behavior

Setup scrolling behaviour

To get started first select between Tabular and Paginated Appearance. Then the following options will appear.

  • Scroll to the page top: The form will scroll to the form top (not really the page) when user navigates between tabs or pages.
  • Scroll to element on validation error: When the form sees any validation error during navigation, then it will scroll the viewport to focus the element.
  • Scroll to Progress Block: The page will scroll to  the progress block during form submission.
  • Scroll to Message Block: After successful form submission, page will scroll to the success message block.
  • Scroll Offset: If your theme has some kind of fixed header, then try to put the height of the header here. eForm will obey this offset value throughout all automatic scrolling. Do note that eForm automatically takes care of the fixed WP Admin bar.

Note: This will not work in the iFrame emdedding as scrolling to top within iFrame is restricted from the Browser itself. 

Swashata has written 257 articles

Hi there, I am the Lead Developer at WPQuark.com. I love to create something beautiful for WordPress and here I write about how to use them. When I am not working, usually I am doing a number of other creative things ;).