Möchten Sie verhindern, dass WPForms automatisch zu Validierungsfehlern scrollt? Standardmäßig, wenn ein Formular Fehler hat - ob es eine einseitige Form oder eine mit Seitenumbrüchen ist - WPForms wird bis zu dem ersten Fehlerfeld scrollen.
In dieser Anleitung erfahren Sie, wie Sie diesen Effekt des sanften Bildlaufs deaktivieren und die Seite stattdessen direkt zum Fehler springen lassen können.
Einrichten Ihres Formulars
Zunächst müssen Sie Ihr Formular erstellen und Ihre Felder hinzufügen. Wenn Sie Hilfe beim Erstellen eines Formulars benötigen, lesen Sie unseren Leitfaden zum Erstellen Ihres ersten Formulars.
Deaktivieren von Bildlaufeffekten
Sie haben zwei Möglichkeiten, den Bildlaufeffekt zu deaktivieren: entweder für ein bestimmtes Formular oder für alle Formulare auf Ihrer Website. Schauen wir uns beide Methoden an.
Für ein bestimmtes Formular
Wenn Sie den Bildlaufeffekt nur für ein Formular deaktivieren möchten, verwenden Sie dieses Code-Snippet. Wenn Sie nicht sicher sind, wie Sie Ihrer Website benutzerdefinierten Code hinzufügen können, 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 bei der Suche nach Ihrer Formular-ID benötigen, lesen Sie unseren Leitfaden zur Suche nach Formular- und Feld-IDs.
Für alle Formulare
Wenn Sie möchten, dass dieser Code auf allen Formularen ausgeführt wird, verwenden Sie stattdessen dieses einfachere 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 );
Nach dem Hinzufügen eines der beiden Snippets springt die Seite beim Auftreten eines Validierungsfehlers während des Absendens des Formulars sofort zum ersten Fehler, anstatt sanft dorthin zu scrollen. Dies schafft ein unmittelbareres Feedback für Benutzer, die eine direkte Navigation dem sanften Scrollen vorziehen.
Und das ist alles, was Sie brauchen! Möchten Sie die Geschwindigkeit des Bildlaufs bei der Erstellung mehrseitiger Formulare ändern? In unserem Leitfaden zur Änderung der Bildlaufgeschwindigkeit bei mehrseitigen Formularen finden Sie weitere Informationen.