How to Disable the Scrolling Effect on Field Validation Errors

Do you want to disable the scrolling effect when field validation errors occur? Typically, whether you have a full form or one with Page Break fields, the default behavior is to scroll up to the field with the error. By using a simple code snippet, you can disable this scrolling, making the page jump directly to the field with the validation error instead.

Creating the form

First, you’ll need to create your form and add your fields. If you need any help in creating a form, please see this documentation.

Disabling the scrolling effect

To disable this scrolling effect, simply add this code snippet to your site.

If you need assistance in adding snippets to your site, please see this tutorial.

For a specific form

/** 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 374
        if ( isset( $form[ 'id' ] ) && (int) $form[ 'id' ] === 374 ) {
    ?>

            <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 );

By adding this snippet, the code will only run on the form ID 374 and when the scrollToError is triggered which is what triggers the scrolling to the field with the validation error, it will skip the default scrolling and just jump to the field with the error instead.

You’ll need to update the form ID to match your own form ID. If you need help in finding your form ID, please check out this tutorial.

For all WPForms forms

If you would like to have this code run on all forms, use this 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 );

Now when a validation occurs on submitting the form, rather than scrolling to the validation message, the page will just jump up to the first error of the form.

And that’s all you need! Would you like to change the speed of the scrolling when creating multi page forms? Check out our tutorial on How to Change the Scrolling Speed on Multi Page Forms.

Reference Action

wpforms_wp_footer_end