Form Multi-Pagina con Gravity Forms: Creare Wizard e Questionari
I moduli multi-pagina sono uno strumento potente per raccogliere grandi quantità di informazioni senza sopraffare l’utente. Dividendo un modulo lungo in step più piccoli e gestibili, si migliora drasticamente l’esperienza utente e si aumentano i tassi di completamento. Gravity Forms offre una gestione nativa dei form multi-pagina con barra di progresso, navigazione flessibile e logica condizionale per saltare pagine non pertinenti. In questa guida vedremo come progettare e realizzare wizard e questionari efficaci.
Quando Usare un Modulo Multi-Pagina
Non tutti i moduli necessitano di più pagine. Un semplice form di contatto con 4-5 campi funziona perfettamente su una singola pagina. I moduli multi-pagina sono ideali quando:
- Il modulo ha più di 8-10 campi.
- Le domande possono essere raggruppate in categorie logiche distinte.
- Il percorso dell’utente varia in base alle risposte (logica condizionale sulle pagine).
- Vuoi raccogliere informazioni progressivamente, mostrando la complessità gradualmente.
- Il modulo include sia informazioni personali che preferenze o scelte tecniche.
Studi sull’usabilità dimostrano che i moduli multi-step hanno tassi di completamento superiori del 20-30% rispetto ai moduli lunghi a pagina singola, soprattutto su dispositivi mobili dove lo scrolling eccessivo può scoraggiare l’utente.
Creare la Struttura Multi-Pagina
Per dividere un modulo in più pagine, Gravity Forms utilizza il campo Page Break. Ecco come procedere:
- Crea un nuovo modulo o apri uno esistente nell’editor.
- Aggiungi i campi della prima pagina normalmente.
- Trascina un campo Page Break dalla sezione Layout Fields nel punto dove vuoi inserire la divisione.
- Aggiungi i campi della seconda pagina sotto il Page Break.
- Ripeti per ogni pagina aggiuntiva.
Quando inserisci il primo Page Break, Gravity Forms aggiunge automaticamente un elemento “Begin Paging” in cima al modulo (per configurare la barra di progresso) e un elemento “End Paging” in fondo. Questi elementi non sono visibili all’utente ma servono per definire la navigazione del modulo.
Configurare la Barra di Progresso
La barra di progresso è un elemento visuale fondamentale nei moduli multi-pagina: mostra all’utente a che punto si trova nel processo e quante pagine mancano al completamento. Per configurarla, clicca sull’elemento “Begin Paging” in cima al modulo.
Gravity Forms offre tre stili di progresso:
Progress Bar: Una barra orizzontale che si riempie progressivamente. Mostra la percentuale di completamento e può essere personalizzata con colori e stili diversi. È l’opzione più comune e immediatamente comprensibile.
Steps: Mostra i numeri delle pagine come step sequenziali (1, 2, 3…) evidenziando la pagina corrente. È ideale quando le pagine rappresentano fasi distinte di un processo con nomi specifici.
None: Nessun indicatore di progresso. Usa questa opzione solo quando il modulo ha poche pagine e l’utente non ha bisogno di sapere quanti step mancano.
Per ogni pagina puoi impostare un nome personalizzato che appare nella barra di progresso. Ad esempio, invece di “Pagina 1, Pagina 2, Pagina 3”, puoi mostrare “Dati Personali, Preferenze, Conferma”. Questo orienta l’utente e rende il percorso più comprensibile.
Navigazione tra le Pagine
Ogni Page Break include pulsanti di navigazione configurabili:
Previous Button: Il pulsante per tornare alla pagina precedente. Puoi personalizzare il testo (ad esempio “Indietro” o “Pagina precedente”) o sostituirlo con un’immagine. È anche possibile nasconderlo se non vuoi che l’utente torni indietro.
Next Button: Il pulsante per avanzare alla pagina successiva. Personalizza il testo con chiamate all’azione specifiche come “Continua”, “Prossimo step” o “Vai alle preferenze”.
I pulsanti di navigazione attivano la validazione della pagina corrente prima di procedere: se un campo obbligatorio non è compilato o la validazione fallisce, il modulo mostra gli errori e impedisce l’avanzamento. Questo garantisce che ogni pagina sia completata correttamente prima di passare alla successiva.
Logica Condizionale sulle Pagine
Una delle funzionalità più potenti dei moduli multi-pagina è la possibilità di applicare la logica condizionale ai Page Break per saltare pagine non pertinenti. Questo crea percorsi dinamici dove ogni utente vede solo le pagine rilevanti per il suo caso specifico.
Esempio: Questionario di Valutazione
Immagina un questionario per un servizio di consulenza con questa struttura:
- Pagina 1: Informazioni generali (nome, email, tipo di attività).
- Pagina 2: Domande per startup (solo se tipo attività = “Startup”).
- Pagina 3: Domande per aziende consolidate (solo se tipo attività = “Azienda consolidata”).
- Pagina 4: Preferenze e budget (per tutti).
- Pagina 5: Riepilogo e invio (per tutti).
Con la logica condizionale, un utente startup vedrà le pagine 1, 2, 4 e 5, mentre un utente con azienda consolidata vedrà le pagine 1, 3, 4 e 5. Il percorso è personalizzato senza che l’utente debba fare nulla: Gravity Forms gestisce tutto automaticamente.
Creare un Wizard di Configurazione
I wizard sono moduli multi-pagina dove ogni step guida l’utente attraverso una scelta o una configurazione specifica. Sono perfetti per:
- Configuratori di prodotti (scegli modello, colore, accessori).
- Calcolatori di preventivi (tipo servizio, quantità, opzioni aggiuntive).
- Processi di registrazione (dati personali, preferenze, conferma).
- Sondaggi e ricerche di mercato.
Per creare un wizard efficace, segui queste linee guida di progettazione:
Una scelta principale per pagina: Ogni pagina dovrebbe focalizzarsi su una decisione o un gruppo di informazioni strettamente correlate. Evita di mescolare domande di categorie diverse nella stessa pagina.
Progressione logica: Organizza le pagine in un ordine che abbia senso per l’utente. Parti dalle scelte più generali e procedi verso i dettagli specifici.
Feedback visivo: Usa campi HTML per mostrare riepiloghi parziali delle scelte fatte nelle pagine precedenti. Questo aiuta l’utente a tenere traccia delle sue decisioni.
Pagina di riepilogo: L’ultima pagina prima dell’invio dovrebbe mostrare un riepilogo completo di tutte le scelte fatte, permettendo all’utente di verificare e, se necessario, tornare indietro per modificare.
Salvare e Continuare Più Tardi
Per moduli particolarmente lunghi, Gravity Forms offre la funzionalità Save and Continue che permette all’utente di salvare il progresso e tornare a completare il modulo in un secondo momento. Per attivarla:
- Vai nelle impostazioni del modulo (Settings > Form Settings).
- Abilita l’opzione Save and Continue Later.
- Personalizza il testo del link di salvataggio.
Quando l’utente clicca sul link di salvataggio, Gravity Forms genera un URL univoco che l’utente può utilizzare per riprendere la compilazione. L’URL viene mostrato sullo schermo e, opzionalmente, inviato via email. I dati salvati vengono conservati per 30 giorni (configurabile) e poi cancellati automaticamente.
Validazione Pagina per Pagina
La validazione nei moduli multi-pagina avviene pagina per pagina: l’utente non può procedere alla pagina successiva finché tutti i campi obbligatori della pagina corrente non sono compilati correttamente. Questo approccio ha diversi vantaggi:
- Gli errori vengono segnalati subito, quando l’utente è ancora nel contesto della domanda.
- L’utente non rischia di arrivare alla fine del modulo per scoprire errori nelle prime pagine.
- La validazione è meno scoraggiante perché riguarda solo pochi campi alla volta.
Puoi personalizzare i messaggi di errore nelle impostazioni di ogni campo e aggiungere validazioni personalizzate tramite hook PHP per scenari specifici.
Ottimizzazione per Mobile
I moduli multi-pagina sono particolarmente efficaci su dispositivi mobili, dove lo schermo ridotto rende i moduli lunghi difficili da compilare. Tuttavia, ci sono alcuni accorgimenti specifici per il mobile:
- Mantieni il numero di campi per pagina ancora più basso (3-4 campi massimo).
- Usa pulsanti di navigazione grandi e ben distanziati per facilitare il tap.
- Assicurati che la barra di progresso sia leggibile anche su schermi piccoli.
- Testa il modulo su diversi dispositivi e orientamenti (verticale e orizzontale).
Tracciamento e Analytics
Con i moduli multi-pagina, è importante monitorare dove gli utenti abbandonano il processo. Gravity Forms non include nativamente analytics per pagina, ma puoi implementare il tracciamento con Google Analytics 4 utilizzando eventi personalizzati.
Aggiungi un campo HTML nascosto in ogni pagina con un pixel di tracciamento o uno script JavaScript che invia un evento GA4 quando la pagina viene visualizzata. Questo ti permetterà di identificare le pagine con il tasso di abbandono più alto e ottimizzarle.
Per assistenza nella creazione di wizard e questionari multi-pagina professionali, contatta G Tech Group.
Continua a Leggere: Guide WordPress Essenziali
Migliora il Tuo Sito WordPress
Scopri le nostre guide complete sugli altri plugin essenziali per WordPress: