Passaggio automatico alla pagina successiva nei moduli multipagina

Vorresti che i tuoi moduli multipagina avanzassero automaticamente quando gli utenti effettuano selezioni? Con un semplice snippet di codice, puoi creare un'esperienza di modulo più fluida avanzando automaticamente alla pagina successiva quando gli utenti selezionano le loro risposte. Questo miglioramento riduce i clic e rende i tuoi moduli più intuitivi da completare.

Questa guida ti mostrerà come far avanzare automaticamente i tuoi moduli multipagina in base alle selezioni degli utenti.

Creazione della struttura del tuo modulo

Innanzitutto, avrai bisogno di un modulo multipagina con campi modulo e interruzioni di pagina.

Ai fini di questo tutorial, stiamo creando un modulo per fogli di magazzino, ci saranno tre campi a Scelta multipla utilizzando Scelte immagine. Ogni selezione includerà un Interruzione di pagina.

Se hai bisogno di aiuto per creare un modulo multipagina, consulta la nostra guida su come creare moduli multipagina.

Aggiunta del CSS per l'avanzamento automatico

Poiché vogliamo che il modulo passi automaticamente alla pagina successiva in base a qualsiasi selezione, aggiungeremo del CSS per nascondere i pulsanti Avanti su questo modulo. Per ottenere questo risultato, copia questo CSS sul tuo sito.

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

Ricorda di sostituire 1000 con l'ID del tuo modulo. Se hai bisogno di aiuto per trovare l'ID del tuo modulo, consulta la nostra guida su come trovare gli ID dei moduli e dei campi.

Aggiunta del JavaScript per l'avanzamento automatico

Successivamente, aggiungi questo snippet di codice per abilitare l'avanzamento automatico della pagina. Se hai bisogno di aiuto per aggiungere snippet di codice, consulta il nostro tutorial su come aggiungere snippet di codice.

Lo script funziona prendendo di mira il tuo modulo specifico utilizzando l'ID del modulo (sostituisci 1000 con il tuo ID), ascoltando i clic sugli input delle Scelte immagine e attivando automaticamente il clic sul pulsante Avanti quando viene effettuata una selezione.

Opzioni di personalizzazione

Puoi modificare questa funzionalità per selezionare domande specifiche regolando il selettore jQuery, aggiungere condizioni per quando avanzare o reindirizzare a pagine diverse in base alle risposte.

Ecco un esempio che avanza solo quando viene selezionato "Sì":

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

Utilizzo con popup Elementor

Se il tuo modulo si trova all'interno di un popup Elementor, usa invece questa versione modificata:

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

E questo è tutto! Ora puoi passare automaticamente alla pagina successiva in base alla risposta del tuo campo modulo. Successivamente, vorresti imparare come saltare intere pagine in base alle risposte degli utenti? Dai un'occhiata al nostro tutorial su come saltare le interruzioni di pagina quando si utilizza la logica condizionale per maggiori dettagli.

Articolo di riferimento

wpforms_wp_footer_end