Deaktivieren des Scroll-Effekts bei Feldvalidierungsfehlern

Möchten Sie WPForms daran hindern, automatisch zu Validierungsfehlern zu scrollen? Standardmäßig, wenn ein Formular Fehler aufweist – sei es ein einseitiges Formular oder eines mit Seitenumbrüchen – scrollt WPForms zum ersten Fehlerfeld.

Diese Anleitung zeigt Ihnen, wie Sie diesen sanften Scroll-Effekt deaktivieren, sodass die Seite stattdessen direkt zum Fehler springt.

Einrichtung Ihres Formulars

Zuerst müssen Sie Ihr Formular erstellen und Ihre Felder hinzufügen. Wenn Sie Hilfe beim Erstellen eines Formulars benötigen, finden Sie hier unsere Anleitung zum Erstellen Ihres ersten Formulars.

Scroll-Effekte deaktivieren

Sie haben zwei Möglichkeiten, den Scroll-Effekt zu deaktivieren: entweder für ein bestimmtes Formular oder für alle Formulare auf Ihrer Website. Sehen wir uns beide Methoden an.

Für ein bestimmtes Formular

Wenn Sie den Scroll-Effekt nur für ein Formular deaktivieren möchten, verwenden Sie diesen Code-Snippet. Wenn Sie nicht sicher sind, wie Sie benutzerdefinierten Code zu Ihrer Website hinzufügen, lesen Sie bitte unsere Anleitung zum Hinzufügen von 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 );

Stellen Sie sicher, dass Sie 1000 im Code durch Ihre eigene Formular-ID ersetzen. Wenn Sie Hilfe beim Finden Ihrer Formular-ID benötigen, lesen Sie unsere Anleitung zum Finden von Formular- und Feld-IDs.

Für alle Formulare

Wenn Sie möchten, dass dieser Code für alle Formulare ausgeführt wird, verwenden Sie stattdessen diesen einfacheren Snippet.

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

Nachdem Sie einen der beiden Snippets hinzugefügt haben, springt die Seite bei einem Validierungsfehler während der Formularübermittlung sofort zum ersten Fehler, anstatt dorthin zu scrollen. Dies schafft eine direktere Feedback-Erfahrung für Benutzer, die eine direkte Navigation gegenüber sanftem Scrollen bevorzugen.

Und das ist alles, was Sie brauchen! Möchten Sie die Geschwindigkeit des Scrollens beim Erstellen von mehrseitigen Formularen ändern? Lesen Sie unsere Anleitung zum Ändern der Scroll-Geschwindigkeit bei mehrseitigen Formularen für Details.

Referenzaktion

wpforms_wp_footer_end