How to Disable Scroll Animation on Multi Page Forms

Overview

Do you want to disable the scroll animation on multi page forms? Turning this animation off can be easily done. In this tutorial, we’ll show you how to disable this option using JavaScript.

If you’re unsure what a multi page form is, please have a look at our tutorial on how to create one.

When you create a multi page form in WPForms it creates a page break for each of your form sections.

When a user clicks the Next or Page 2 link to continue filling in the form, the user’s view, by default, will be pulled back to the top when the page loads. This brings into focus the top of the form.

Turning off this animation is easy enough with just a little JavaScript code snippet that we’ll show you below.

Setup

To disable scroll animation, simply copy and paste the code shown below to your site.

/**
 * Disable scroll animation on multi page forms
 *
 * @link https://wpforms.com/developers/disable-scroll-animation-on-multi-page-forms/
 *
 */
function wpf_dev_disable_multipage_scroll() {
	?>
	<script type="text/javascript">window.wpforms_pageScroll = false;</script>
	<?php
}
add_action( 'wpforms_wp_footer', 'wpf_dev_disable_multipage_scroll' );

Setting the window.wpforms_pageScroll to false will stop any scroll animation on all your multi page forms created with WPForms.

Now when your user clicks to get to the next page of your form, they’ll no longer see the animation when the next page loads.

And that’s all you need to stop the scrolling animation! Would you like to change the styling on the confirmation message using CSS? Take a look at our article on How to Remove Confirmation Message Box Styling.

Action Reference: wpforms_wp_footer

FAQ

Q: How do I disable the scrolling on submit?

A: To disable the scrolling you see when a form is submitted just open the form builder and go to Settings » Confirmation. Here you can uncheck the box for Automatically scroll to the confirmation message.

Uncheck the option to automatically scroll to the confirmation message to stop the form scrolling up on the confirmation message