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 will change all forms but will also change the offset on where the form will scroll.
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.
Related
Action Reference: wpforms_wp_footer
FAQ
Q: Can I disable the scrolling completely?
A: Absolutely! Should you want to remove the scrolling effect completely, just use this snippet instead.
function wpf_disable_multipage_scroll() {
?>
<script type="text/javascript">window.wpforms_pageScroll = false;</script>
<?php
}
add_action( 'wpforms_wp_footer', 'wpf_disable_multipage_scroll' );