Changing 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. However, you can easily adjust this speed with a small code snippet.

In this tutorial, 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’d like to use. Note that 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.

Frequently Asked Questions

These are answers to some of the top questions we see about changing scrolling speed on multi-page forms.

Can I disable the scrolling completely?

Absolutely! Should you want to remove the scrolling effect completely, just use this snippet instead.

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

function wpf_disable_multipage_scroll() {
    ?>
    <script type="text/javascript">window.wpforms_pageScroll = false;</script>
    <?php
}
add_action( 'wpforms_wp_footer', 'wpf_disable_multipage_scroll' );

That’s it! You’ve learned all you need to adjust the scrolling speed on multi-page forms.

Next, would you like to also include these page breaks in your email notifications? Take a look at the guide to learn how to include Page Break, Section Divider, and HTML fields in notifications.

Related

Action Reference: wpforms_wp_footer