Möchten Sie, dass Ihre mehrseitigen Formulare automatisch weitergehen, wenn die Benutzer eine Auswahl treffen? Mit einem einfachen Codeschnipsel können Sie ein reibungsloseres Formularerlebnis schaffen, indem Sie automatisch zur nächsten Seite wechseln, wenn die Benutzer ihre Antworten auswählen. Diese Verbesserung verringert die Anzahl der Klicks und macht das Ausfüllen Ihrer Formulare intuitiver.
Dieser Leitfaden zeigt Ihnen, wie Sie Ihre mehrseitigen Formulare auf der Grundlage von Benutzerauswahlen automatisch weiterleiten können.
Erstellen Ihrer Formularstruktur
Zunächst benötigen Sie ein mehrseitiges Formular mit Formularfeldern und Seitenumbrüchen.
In diesem Tutorial erstellen wir ein Beutelblatt-Formular, das drei Multiple-Choice-Felder mit Bildauswahlen enthält. Jede Auswahl wird einen Seitenumbruch enthalten.
Wenn Sie Hilfe bei der Erstellung eines mehrseitigen Formulars benötigen, lesen Sie bitte unseren Leitfaden zur Erstellung mehrseitiger Formulare.
Hinzufügen des Auto-Advance-CSS
Da wir möchten, dass das Formular automatisch auf die nächste Seite wechselt, wenn eine Auswahl getroffen wird, fügen wir CSS hinzu, um die Schaltflächen "Weiter" in diesem Formular auszublenden. Kopieren Sie dazu dieses CSS auf Ihre Website.
form#wpforms-form-1000 button.wpforms-page-button {
visibility: hidden;
}
Denken Sie daran, die 1000 mit der ID Ihres Formulars. Wenn Sie Hilfe bei der Suche nach Ihrer Formular-ID benötigen, lesen Sie unseren Leitfaden unter wie man Formular- und Feld-IDs findet.
Hinzufügen des Auto-Advance-JavaScripts
Fügen Sie als Nächstes dieses Code-Snippet hinzu, um den automatischen Seitenaufstieg zu aktivieren. Wenn Sie Hilfe beim Hinzufügen von Codefragmenten benötigen, lesen Sie bitte unser Tutorial zum Hinzufügen von Codefragmenten.
Das Skript funktioniert, indem es Ihr spezifisches Formular über die Formular-ID anspricht (ersetzen Sie 1000 mit Ihrer ID), das Abhören von Klicks auf Image Choice-Eingänge und das Auslösen der Weiter Klicken Sie automatisch auf die Schaltfläche , wenn eine Auswahl getroffen wird.
Anpassungsoptionen
Sie können diese Funktion ändern, um bestimmte Fragen durch Anpassen des jQuery-Selektors gezielt zu beantworten, Bedingungen für die Weiterleitung hinzuzufügen oder auf der Grundlage der Antworten auf verschiedene Seiten umzuleiten.
Hier ist ein Beispiel, das nur bei der Auswahl von "Ja" weitergeht:
function wpf_dev_conditional_next_page() {
?>
<script type="text/javascript">
jQuery(function() {
jQuery( "ul#wpforms-1000-field_25 li input" ).click(function() {
if (jQuery(this).val() === "Yes")
jQuery(this).closest( '.wpforms-page' ).find( '.wpforms-page-next' ).click();
else
location.assign( "https://myexamplesite.com/home" );
});
});
</script>
<?php
}
add_action('wpforms_wp_footer_end', 'wpf_dev_conditional_next_page', 30);
Verwendung mit Elementor Popups
Wenn sich Ihr Formular in einem Elementor-Popup befindet, verwenden Sie stattdessen diese modifizierte Version:
function wpf_dev_automatic_next_page_elementor_popup() {
?>
<script type="text/javascript">
jQuery( document ).on( 'elementor/popup/show', function( event, popup ) {
jQuery( "form#wpforms-form-3241 ul.wpforms-image-choices input" ).click(function() {
jQuery(this).closest( '.wpforms-page' ).find( '.wpforms-page-next' ).click();
});
});
</script>
<?php
}
add_action('wpforms_wp_footer_end', 'wpf_dev_automatic_next_page_elementor_popup', 30);
Und das war's! Sie können jetzt automatisch zur nächsten Seite wechseln, je nach Antwort auf Ihr Formularfeld. Möchten Sie als Nächstes lernen, wie man ganze Seiten auf der Grundlage von Benutzerantworten überspringt? In unserem Tutorial über das Überspringen von Seitenumbrüchen bei der Verwendung von bedingter Logik finden Sie weitere Einzelheiten.