Automatisches Wechseln zur nächsten Seite bei mehrseitigen Formularen

Möchten Sie, dass Ihre mehrseitigen Formulare automatisch weiterblättern, wenn Benutzer eine Auswahl treffen? Mit einem einfachen Code-Snippet können Sie ein reibungsloseres Formularerlebnis schaffen, indem Sie automatisch zur nächsten Seite wechseln, wenn Benutzer ihre Antworten auswählen. Diese Verbesserung reduziert Klicks und macht Ihre Formulare intuitiver zu vervollständigen.

Diese Anleitung zeigt Ihnen, wie Sie Ihre mehrseitigen Formulare automatisch basierend auf Benutzerauswahlen weiterblättern lassen.

Erstellen Ihrer Formularstruktur

Zuerst benötigen Sie ein mehrseitiges Formular mit Formularfeldern und Seitenumbrüchen.

Für dieses Tutorial erstellen wir ein Swag-Sheet-Formular. Es wird drei Multiple-Choice-Felder mit Bildauswahlen geben. Jede Auswahl beinhaltet einen Seitenumbruch.

Wenn Sie Hilfe beim Erstellen eines mehrseitigen Formulars benötigen, lesen Sie bitte unsere Anleitung zum Erstellen von mehrseitigen Formularen.

Hinzufügen des Auto-Advance-CSS

Da das Formular bei jeder Auswahl automatisch zur nächsten Seite wechseln soll, fügen wir CSS hinzu, um die Weiter-Schaltflächen in diesem Formular auszublenden. Kopieren Sie dazu diesen CSS-Code auf Ihre Website.

form#wpforms-form-1000 button.wpforms-page-button {
    visibility: hidden;
}

Denken Sie daran, 1000 durch die ID Ihres Formulars zu ersetzen. Wenn Sie Hilfe beim Finden Ihrer Formular-ID benötigen, lesen Sie unsere Anleitung zum Finden von Formular- und Feld-IDs.

Hinzufügen des Auto-Advance-JavaScript

Fügen Sie als Nächstes diesen Code-Snippet hinzu, um die automatische Seitenweiterleitung zu aktivieren. Wenn Sie Hilfe beim Hinzufügen von Code-Snippets benötigen, lesen Sie bitte unser Tutorial zum Hinzufügen von Code-Snippets.

Das Skript zielt auf Ihr spezifisches Formular über die Formular-ID (ersetzen Sie 1000 durch Ihre ID), lauscht auf Klicks auf Image Choice-Eingaben und löst automatisch den Klick auf die Weiter-Schaltfläche aus, wenn eine Auswahl getroffen wird.

Anpassungsoptionen

Sie können diese Funktionalität anpassen, um bestimmte Fragen anzusprechen, indem Sie den jQuery-Selektor anpassen, Bedingungen für die Weiterleitung hinzufügen oder basierend auf Antworten zu verschiedenen Seiten weiterleiten.

Hier ist ein Beispiel, das nur weiterleitet, wenn "Ja" ausgewählt wird:

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 ist alles! Sie können jetzt automatisch zur nächsten Seite wechseln, basierend auf der Antwort auf Ihr Formularfeld. Möchten Sie als Nächstes lernen, wie Sie ganze Seiten basierend auf Benutzerantworten überspringen können? Schauen Sie sich unser Tutorial zum Überspringen von Seitenumbrüchen bei Verwendung von bedingter Logik für weitere Details an.

Referenzartikel

wpforms_wp_footer_end