Volete che i vostri moduli a più pagine avanzino automaticamente quando gli utenti effettuano delle selezioni? Con un semplice snippet di codice, potete creare un'esperienza di formulazione più fluida, passando automaticamente alla pagina successiva quando gli utenti selezionano le loro risposte. Questo miglioramento riduce i clic e rende i moduli più intuitivi da compilare.
Questa guida mostra come far avanzare automaticamente i moduli a più pagine in base alle selezioni dell'utente.
Creare la struttura del modulo
Innanzitutto, è necessario un modulo a più pagine con campi modulo e interruzioni di pagina.
Per lo scopo di questa esercitazione, stiamo creando un modulo per la scheda swag; ci saranno tre campi a scelta multipla che utilizzano le scelte di immagine. Ogni selezione includerà un'interruzione di pagina.
Se avete bisogno di aiuto per creare un modulo a più pagine, consultate la nostra guida sulla creazione di moduli a più pagine.
Aggiunta del CSS di avanzamento automatico
Poiché vogliamo che il modulo si sposti automaticamente alla pagina successiva in base a qualsiasi selezione, aggiungeremo del CSS per nascondere i pulsanti Avanti di questo modulo. Per farlo, copiate questo CSS nel vostro sito.
form#wpforms-form-1000 button.wpforms-page-button {
visibility: hidden;
}
Ricordarsi di sostituire 1000 con l'ID del modulo. Se avete bisogno di aiuto per trovare l'ID del vostro modulo, consultate la nostra guida su come trovare gli ID dei moduli e dei campi.
Aggiunta del JavaScript di avanzamento automatico
Quindi, aggiungere questo snippet di codice per abilitare l'avanzamento automatico della pagina. Se avete bisogno di aiuto per aggiungere snippet di codice, consultate il nostro tutorial sull'aggiunta di snippet di codice.
Lo script funziona puntando al modulo specifico utilizzando l'ID del modulo (sostituire 1000 con il proprio ID), ascoltando i clic sugli ingressi di Image Choice e attivando la funzione Avanti cliccate automaticamente quando viene effettuata una selezione.
Opzioni di personalizzazione
È possibile modificare questa funzionalità per indirizzare domande specifiche regolando il selettore jQuery, aggiungere condizioni per l'avanzamento o reindirizzare a pagine diverse in base alle risposte.
Ecco un esempio che avanza solo quando si seleziona "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 i popup di Elementor
Se il modulo si trova all'interno di un popup di Elementor, utilizzare 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);
Ed ecco fatto! Ora è possibile passare automaticamente alla pagina successiva in base alla risposta data al campo del modulo. Volete poi imparare a saltare intere pagine in base alle risposte dell'utente? Per maggiori dettagli, consultate il nostro tutorial su come saltare le interruzioni di pagina utilizzando la logica condizionale.