How to Disable the Scrolling Effect on Field Validation Errors

Would you like to stop WPForms from automatically scrolling to validation errors? By default, when a form has errors – whether it’s a single-page form or one with Page Breaks – WPForms will scroll up to the first error field.

This guide will show you how to disable this smooth scrolling effect, making the page jump directly to the error instead.

Setting Up Your Form

First, you’ll need to create your form and add your fields. If you need any help in creating a form, our guide on how to create your first form.

Disabling Scrolling Effects

You have two options for disabling the scroll effect: either for a specific form or for all forms on your site. Let’s look at both methods.

For a Specific Form

If you want to disable the scroll effect for just one form, use this code snippet. If you’re not sure how to add custom code to your site, please see our guide on adding code snippets.

/** Disable the scroll on field validation errors
 *
 *  @link   https://wpforms.com/developers/how-to-disable-the-scrolling-effect-on-field-validation/
 */
 
function wpf_dev_disable_scroll_to_error_by_form_id( $forms ) {
     
    // If scrollToError is disabled for at least one form on the page, it will be disabled for all the forms on the page.
 
    foreach ( $forms as $form ) {
 
        // Only run snippet on the form ID 1000
        if ( isset( $form[ 'id' ] ) && (int) $form[ 'id' ] === 1000 ) {
    ?>
 
            <script type="text/javascript">wpforms.scrollToError = function(){};</script>
 
    <?php
        }
    }
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_disable_scroll_to_error_by_form_id', 10, 1 );

Make sure to replace 1000 in the code with your own form ID. If you need help finding your form ID, check out our guide on finding form and field IDs.

For all Forms

If you would like to have this code run on all forms, use this simpler snippet instead.

/** Disable the scrolling effect on field validation errors
 *
 *  @link   https://wpforms.com/developers/how-to-disable-the-scrolling-effect-on-field-validation/
 */
 
function wpf_dev_disable_scroll_to_error() {
 
    // If scrollToError is disabled for at least one form on the page, it will be disabled for all the forms on the page.
    ?>
 
    <script type="text/javascript">wpforms.scrollToError = function(){};</script>
 
    <?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_disable_scroll_to_error', 10 );

After adding either snippet, when a validation error occurs during form submission, the page will immediately jump to the first error instead of smoothly scrolling there. This creates a more instant feedback experience for users who prefer direct navigation to smooth scrolling.

And that’s all you need! Would you like to change the speed of the scrolling when creating multi page forms? Check out our guide on changing scrolling speed on multi page forms for details.

Reference Action

wpforms_wp_footer_end