How to Change the Scrolling Speed on Multi-Page Forms

Overview

Would you like to change the scrolling speed on multi-page forms? Clicking on the next page will have the next page load and scroll to the first question, you can easily adjust this speed with a small code snippet. We’ll walk you through the JavaScript needed to adjust this speed.

Setup

Simply copy and paste this snippet to your site.

If you need assistance in how and where to add snippets to your site, please see this tutorial.

/**
 * Adjust the scrolling speed on multi-page forms.
 *
 * @link https://wpforms.com/developers/how-to-change-the-scrolling-speed-on-multi-page-forms/
 */

function wpf_page_break_scroll() {
?>
	<script type="text/javascript">
		window.wpform_pageScroll = 160;
	</script>
<?php
}
add_action( 'wpforms_wp_footer', 'wpf_page_break_scroll' );

Simply change the 160 in the code above to the speed you would like.

The higher the number the faster the scroll. For example, changing the number from 160 to 3000 will result in a faster scroll on page 2.

Please note that changing this also changes the offset on where the form will scroll too.

And that’s it, that’s all you need to adjust the scrolling speed on multi-page forms. Would you like to also include these page breaks in your email notifications? Take a look at the article on
How to Include Page Break, Section Divider, and HTML Fields in Notifications.

Action Reference: wpforms_wp_footer