Come creare un modulo a più passi in WordPress [Plugin e codice]

I moduli a più fasi facilitano agli utenti il completamento di attività lunghe, come registrazioni, sondaggi o invii dettagliati. Se sei pronto per implementarne uno sul tuo sito WordPress, questa guida ti mostrerà come creare un modulo a più fasi in WordPress utilizzando un plugin da Claspo o codice personalizzato. 

Cos'è un modulo a più fasi e quando funziona meglio?

Un modulo a più fasi è un modulo che suddivide le domande o i campi di input in più fasi o pagine, invece di presentarli tutti in una volta. Questo approccio rende i moduli lunghi meno intimidatori e più facili da completare per gli utenti, suddividendo il modulo in sezioni più piccole.

I moduli a più fasi sono ideali per attività come registrazioni, prenotazioni, sondaggi e altre invii di moduli dettagliati. Puoi facilmente creare moduli a più fasi per vari scopi, che si tratti di un modulo conversazionale, un semplice modulo di contatto, o un flusso di generazione contatti più complesso. Questa flessibilità ti consente di dividere il modulo in più fasi a seconda delle tue esigenze. Ecco perché vale la pena usarli:

• Maggiore coinvolgimento degli utenti: suddividere il modulo in più parti gestibili li rende meno opprimenti e mantiene gli utenti più coinvolti.
• Miglior usabilità: gli indicatori di progresso guidano gli utenti e mostrano quanto del modulo è rimasto, facendo sembrare il processo più breve e strutturato.
• Maggiore tasso di completamento: gli utenti sono più propensi a completare i moduli quando sono più facili da navigare e non sembrano troppo lunghi.
• Logica condizionale: i moduli a più fasi possono raccogliere solo le informazioni pertinenti adattandosi dinamicamente in base agli input degli utenti.
• Aumento delle conversioni: riducendo l'affaticamento da modulo e creando un'esperienza senza interruzioni, i moduli a più fasi possono aumentare significativamente i tassi di invio.

Come creare un modulo a più fasi in WordPress con Claspo

Claspo è un costruttore di moduli a più fasi per WordPress semplice e flessibile per attività quotidiane. Puoi creare un modulo a più fasi gratuito per WordPress che abbia un aspetto eccellente su qualsiasi dispositivo, supporti più lingue e si integri con strumenti di marketing popolari. Con Claspo, non si aggiunge semplicemente il modulo, si crea un flusso di lavoro che attrae i potenziali clienti e costruisce relazioni con loro.

Passo 1: Installa il plugin Claspo

Per prima cosa, devi integrare il plugin del costruttore di moduli Claspo con la tua dashboard di WordPress. Claspo funziona come un wizard di moduli per WordPress, rendendo facile configurare e personalizzare i tuoi moduli senza bisogno di codice. Ecco cosa devi fare: 

1. Crea un account per utilizzare il nostro creatore di widget per il tuo sito web.
2. Vai al negozio di plugin di WordPress, cerca "Claspo" e clicca su Download.
3. Accedi al tuo pannello amministrativo di WordPress.
4. Vai a Plugin > Carica.
5. Seleziona e carica il file.
6. Una volta installato, vai su Claspo e trova l'ID script. Nel pannello laterale sinistro, vai a <>Script.
7. Verifica l'integrazione, e hai fatto!

Passo 2: Vai su Claspo e crea un nuovo modulo

Accedi al tuo account Claspo e inizia. Clicca sul pulsante "New Widget" e seleziona "Template Library". Se ti senti creativo, puoi iniziare con un modulo vuoto e costruire il tuo layout.

Verrai introdotto al nostro catalogo di template. Nel filtro delle Funzionalità, seleziona Multi-Step, e vedrai tutti i template di moduli multi-step. Scegli il tema del modulo multi-step per il tuo sito WordPress.

Step 3: Progetta il tuo modulo multi-step

Per scopi dimostrativi, utilizzeremo il seguente template:

Prova questo template

Questo modulo di contatto WordPress ha già tre step: 

• Il primo step del modulo raccoglie informazioni personali.
• La seconda parte del modulo raccoglie email ed età.
• Il passo successivo del modulo cattura i dettagli di contatto e la data desiderata della lezione.

Personalizzeremo ciascuna delle sezioni del tuo modulo insieme. Iniziamo con il modulo principale di richiesta.

Sostituiremo il campo del cognome con un campo per consentire agli utenti di condividere la propria età. Questo ci darà un'idea di quale parte del pubblico è interessata alle nostre lezioni e può aiutare a preparare i gruppi. Sostituiremo anche il testo sotto l'intestazione con una copia più coinvolgente che aggiunge scarsità.

Passiamo alla pagina successiva. Chiederemo l'email dell'utente e scopriremo il loro stile di danza preferito. Come con il primo modulo, rimuoveremo un campo predefinito e lo sostituiremo con un input di testo. Aggiungeremo anche del testo sotto l'intestazione per spiegare meglio perché stiamo chiedendo queste informazioni. Poiché abbiamo già chiesto il nome della persona, possiamo aggiungere un tag di unione per personalizzare questo step.

E perché non sostituire l'immagine per rendere il modulo ancora più dinamico? Immagina che il nostro business insegni diversi stili — questa è una grande opportunità per rafforzarlo.

E per la pagina finale, sostituiremo anche il testo predefinito e l'immagine e renderemo il campo del telefono opzionale.

E’ una buona idea aggiungere qui un pulsante Indietro nel caso in cui gli utenti vogliano modificare qualcosa inserito in precedenza. Basta aggiungere un secondo pulsante al passaggio, cliccarci sopra, aprire la scheda Generale e selezionare ‘Pagina precedente’ sotto la voce ‘Azione al clic’. In questo modo, gli utenti possono tornare indietro e apportare modifiche in qualsiasi momento.

È tutto. Ora, dobbiamo solo personalizzare le pagine di successo ed errore. Aggiungiamo più dettagli su cosa aspettarsi dopo e inseriamo un tag di fusione con il nome per personalizzare le voci del modulo.

Passo 4: Regola le regole di visualizzazione

Ora che il design è pronto, parliamo delle impostazioni di visualizzazione. Questo modulo particolare nel front end è destinato a prevenire l'uscita dal sito web, quindi attiveremo l'interruttore Exit intent.

Tuttavia, puoi utilizzare questo widget e qualsiasi altro tipo di modulo come modulo di iscrizione. Le regole di Claspo ti offrono molta flessibilità per rendere il tuo targeting super preciso. Ad esempio, puoi scegliere su quali pagine far apparire il popup o targetizzare gli utenti in base al loro paese o città. Perché non creare popup unici con premi speciali per diverse località? Puoi persino utilizzare parametri UTM per garantire che il popup sembri una parte naturale di una campagna più ampia.

Potresti aver notato tre trigger aggiuntivi disponibili:

• Trigger di avvio: un avvio è una piccola icona che rimane nell'angolo inferiore della pagina. Gli utenti possono cliccarci sopra per aprire il popup quando vogliono. Puoi configurarlo durante la prima fase di creazione del popup o aggiungerlo successivamente. È perfetto per dare agli utenti più controllo.
• Trigger di clic HTML: questo ti consente di utilizzare qualsiasi elemento cliccabile sulla pagina per mostrare il popup. Ad esempio, potrebbe apparire quando qualcuno clicca su un'immagine, un pulsante o un link di testo.
• Trigger API: questa opzione ti permette di controllare in modo programmatico quando e come vengono visualizzati i popup. È ottimo per personalizzazioni avanzate, integrazione con altri servizi, o per migliorare l'esperienza utente, ma richiede una certa conoscenza tecnica.

Quindi, sta a te decidere come utilizzare il modulo; per questa guida, ci concentreremo sulla prevenzione dell'uscita. 

Passo 5: Integra i tuoi moduli con ESP o CRM

L'ultimo passo è collegare Claspo ai tuoi altri strumenti, come un CRM o un fornitore di servizi email. Ciò consente alle informazioni raccolte tramite il modulo di creare automaticamente contatti nel tuo CRM o attivare campagne email. Una volta che gli utenti inviano il modulo, tutti i dati raccolti vengono elaborati in modo sicuro e trasferiti.

Claspo si integra con molti software popolari. Basta scegliere quelli di cui hai bisogno e mappare i campi per assicurarti che tutte le informazioni siano salvate correttamente.

Se un fornitore di software non è nell'elenco, puoi creare un webhook e trasferire informazioni dal modulo a praticamente qualsiasi sistema.

Passo 6: Testare e ottimizzare

Claspo facilita il testing e l'ottimizzazione dei tuoi moduli avanzati di WordPress. Puoi impostare test divisi con pochi clic e Claspo raccoglierà statistiche sulle prestazioni dei tuoi widget del sito. Questo ti aiuta a identificare punti deboli come l'abbandono del modulo o l'affaticamento dell'utente, permettendoti di modificare il design per ottenere risultati migliori.

Per ottenere ulteriori approfondimenti, utilizza strumenti di heatmap o altri software per vedere come gli utenti compilano il modulo, quindi applica quei dati per eseguire test più efficaci su Claspo.

Passo per creare un modulo passo-passo di WordPress con codice personalizzato

Creare un modulo multistep WP da zero è più di un semplice compito di design; è uno sforzo collaborativo che richiede il contributo di vari ruoli per garantire sia la funzionalità che un'esperienza utente senza interruzioni. A seconda della complessità del modulo utilizzando codice personalizzato, potresti aver bisogno di:

• Un designer UI/UX per progettare un design intuitivo.
• Un sviluppatore frontend per implementare l'interfaccia e la logica di navigazione, incluse eventuali configurazioni necessarie dei blocchi di interruzione della pagina del modulo.
• Un sviluppatore backend per gestire l'archiviazione e l'elaborazione dei dati.
• Uno specialista QA per testare il modulo su dispositivi e scenari diversi.

Per un modulo semplice che desideri costruire, questo processo potrebbe richiedere a un piccolo team circa 20-40 ore. Tuttavia, moduli complessi con funzionalità avanzate come la convalida in tempo reale o integrazioni potrebbero richiedere 60-100+ ore, a seconda dell'ambito.

Passo 1. Definire lo scopo e la struttura

La base di un modulo multistep inizia con la comprensione del suo scopo. Questo richiede la collaborazione tra le parti interessate e i product manager per identificare l'obiettivo del modulo e il tipo di informazioni necessarie. Le informazioni sono quindi suddivise in passi logici per garantire che scorrano in modo naturale.

Passo 2. Progettazione dell'interfaccia utente

Una volta delineata la struttura, l'attenzione si sposta sul progettare l'aspetto e il funzionamento del modulo. Un designer UI/UX crea un blueprint visivo. La fase di progettazione è cruciale per garantire chiarezza e facilità d'uso, poiché questi fattori influenzano direttamente il coinvolgimento degli utenti e i tassi di completamento. 

Passo 3. Sviluppo del Frontend

In questa fase, il modulo inizia a prendere forma attraverso lo sviluppo frontend. Usando il design come guida, il sviluppatore frontend crea il layout per ogni passo e implementa il sistema di navigazione. Questo può includere l'impostazione di un'opzione del contenitore del modulo per organizzare in modo ordinato gli elementi e i passi del modulo. 

Passo 4. Aggiunta di validazione e feedback

La validazione garantisce l'accuratezza e la completezza delle informazioni raccolte. La validazione degli input può avvenire in tempo reale sul frontend o dopo l'invio sul backend. 

Ad esempio, il sistema può verificare che gli indirizzi email siano formattati correttamente o che i campi obbligatori del modulo non siano lasciati vuoti. Fornire un feedback istantaneo mantiene gli utenti informati su errori o dettagli mancanti, riducendo la frustrazione e garantendo la qualità dei dati.

Passo 5. Implementazione della gestione dei dati

Con la navigazione e la validazione in atto, l'attenzione si concentra sulla gestione dei dati. Il sviluppatore backend assicura che le informazioni inviate dagli utenti siano catturate e archivate in modo sicuro. 

Questo comporta la configurazione di server o API per ricevere i dati e salvarli in un database sicuro. Nei casi in cui il modulo sia complesso o si integri con strumenti di terze parti, potrebbe essere necessario un lavoro aggiuntivo sul backend per gestire queste connessioni in modo fluido.

Step 6. Test e rifinitura

Prima che il modulo multi-step sia pronto per gli utenti, deve essere testato rigorosamente per garantire che tutto funzioni come previsto. I test identificano anche potenziali problemi di esperienza utente, che vengono affrontati in questa fase. Raffinare il modulo basandosi su queste intuizioni assicura un prodotto finale impeccabile.

Tipi di moduli che convertono meglio nel layout multi-step

Proprio come ci sono migliori utilizzi per moduli semplici e a un solo passo, i moduli multi-step di WordPress sono ideali per:

1. Moduli di iscrizione

Prendiamo un modulo di iscrizione alla newsletter. Con l'aiuto di un modulo di registrazione multi-step gratuito per WordPress, puoi risolvere due problemi in un colpo solo: creare un processo di iscrizione facile da usare e raccogliere preziose informazioni per inviare newsletter che i tuoi lettori vogliono leggere.

Usa questo modello

2. Moduli di generazione lead

I moduli multi-step migliorano gli sforzi di generazione lead permettendo di raccogliere informazioni dettagliate sui potenziali clienti senza sopraffarli. Questo, a sua volta, rende più facile valutare e categorizzare i contatti per determinare la loro probabilità di diventare clienti paganti.

Usa questo modello

3. Sondaggi e feedback 

Il numero ottimale di domande per un modulo multipagina di feedback varia a seconda dello scopo del sondaggio, del pubblico e del tempo di completamento desiderato. Tuttavia, la ricerca suggerisce che 5-15 domande siano generalmente sufficienti per ottenere approfondimenti significativi. Se raggruppi saggiamente le tue domande e suddividi il modulo in passaggi, renderai più facile per gli utenti impegnarsi.

Usa questo modello

4. Moduli di pre-ordine 

Utilizzare moduli multi-step in WordPress per raccogliere preordini permette agli utenti di convalidare facilmente le informazioni a ogni passaggio, cosa che può aiutare a ridurre gli errori. Poiché ogni passaggio segue logicamente il precedente, diventa più difficile dimenticare campi critici o inserire dati errati.

Usa questo modello

5. Modulo di registrazione multi-step per WordPress

Per le registrazioni, è meglio creare un modulo multi-step piuttosto che sopraffare gli utenti con moduli più lunghi. Suddividere il modulo in sezioni — come informazioni personali, creazione dell'account, e preferenze — aiuta le persone a restare concentrate e a completare il processo.

Con Claspo, creare moduli di questo tipo è facile. Puoi controllare tutte le impostazioni del modulo: campi richiesti, passaggi e flusso. E se hai bisogno di modifiche, gli aggiornamenti sono semplici. Alla fine, questo modulo funziona meglio sia per gli utenti che per il tuo business.

Usa questo modello

Consigli UX per migliorare la conversione dei moduli WP con layout multi-step

Anche se stai utilizzando un plugin o un builder gratuito, un buon design fa comunque la differenza più grande. Ecco alcuni semplici consigli UX per aiutarti a creare un modulo WordPress multi-step che non solo appare ben fatto ma converte anche i visitatori in lead o clienti.

Indicatori di progresso del modulo

Un elemento cruciale di un modulo WP multi-step di successo è l'indicazione chiara del progresso. Agli utenti piace sapere a che punto si trovano e quanto sforzo è necessario per completare. Una barra di progresso o indicatori di passaggio in cima al modulo multi-parte sono ottimi strumenti per visualizzare il progresso delle pagine del modulo.

Se stai utilizzando modelli di modulo multi-step da Claspo, questo consiglio è incluso. Tutti i moduli hanno indicatori di progresso, ma puoi regolarli come preferisci. Ad esempio, invece di una barra di progresso, puoi aggiungere pagine checkpoint che informano gli utenti su quanto sono avanzati nel processo. 

Un passaggio = un compito

È altrettanto importante un raggruppamento attento delle informazioni correlate. Ad esempio, un passaggio potrebbe concentrarsi esclusivamente sui dettagli personali, un altro sulle informazioni di contatto, e così via. 

Troverai molti esempi di moduli multi-step che seguono questo approccio — ogni sezione ha uno scopo chiaro, permettendo agli utenti di concentrarsi sul completare un compito alla volta. Per supportare ulteriormente questo, mantenere ogni passaggio conciso, idealmente con non più di cinque o sette campi, e usare intestazioni per indicare chiaramente lo scopo di ciascuna sezione.

Suggerimenti e istruzioni

Quando crei il tuo modulo multi-step in WordPress, fornisci contesto e istruzioni chiare. Gli utenti sono più propensi a completare i moduli quando capiscono chiaramente perché vengono richieste determinate informazioni e come compilare campi specifici.

Aggiungi descrizioni brevi e utili all'inizio di ogni passaggio. Ad esempio, un passaggio che chiede i dettagli dell'indirizzo potrebbe includere una nota come, "Si prega di fornire l'indirizzo dove si desidera ricevere i propri articoli." 

Schermate di conferma ed errore

I momenti finali dell'interazione di un utente con il tuo modulo multi-step possono lasciare un'impressione duratura sul tuo business. Una schermata di conferma ben progettata offre rassicurazione e chiarezza, aiutando gli utenti a sapere che le loro azioni sono state completate con successo. Se crei moduli multi-step con un plugin per moduli multi-step di WordPress come Claspo, puoi facilmente personalizzare queste schermate per adattarle al tuo brand. 

Usa un tono amichevole che rifletta il tuo marchio e usa elementi visivi, come una spunta verde o un'icona celebrativa, per rafforzare il successo. Includere un chiaro invito all'azione (CTA), come esplorare il loro account o tornare alla homepage, può guidare agevolmente gli utenti verso il loro prossimo passo.

Le schermate di errore, d'altra parte, dovrebbero spiegare chiaramente cosa è andato storto e fornire passaggi attuabili per risolvere il problema. La specificità è fondamentale — gli utenti hanno bisogno di un percorso chiaro. Usa un tono di supporto e offri soluzioni come un pulsante "Riprova" o consigli per la risoluzione dei problemi per ridurre la frustrazione e mantenere la fiducia.

Come le barre di avanzamento, queste schermate sono il default in Claspo. Le abbiamo semplicemente aggiunte per ciascuna pagina del tuo modulo multi-step. 

Usabilità mobile

Rendere i tuoi moduli multi-step adatti ai dispositivi mobili è irrinunciabile. Sebbene la dimensione media dello schermo oggi vari da 6,1 pollici a 6,7 pollici in diagonale — che può sembrare abbastanza spazio — devi assicurarti che il tuo modulo sia facile da interagire. 

I campi e i pulsanti devono essere sufficientemente grandi per un facile tocco e tutti gli elementi dovrebbero essere impilati verticalmente per evitare lo scorrimento orizzontale. Potresti anche voler disabilitare immagini o video di grandi dimensioni per risparmiare spazio.  

Plugin per moduli multi-step su WordPress vs. codice personalizzato

Quindi, sei di fronte a una scelta: costruire un codice personalizzato o utilizzare un plugin per moduli multi-step su WordPress come Claspo. Analizziamolo per facilità d'uso, tempo di lancio e costo — tre fattori chiave per i marketer di tutti i giorni che hanno bisogno di risultati rapidi.

Facilità d'uso

Il codice personalizzato richiede competenze di programmazione, che possono richiedere tempo ed essere difficili da gestire, specialmente per i marketer che vogliono concentrarsi sulle loro campagne. Al contrario, Claspo offre un semplice generatore di moduli WordPress senza codice, che chiunque può utilizzare. Non hai bisogno di competenze tecniche — basta trascinare, rilasciare e personalizzare. Anche configurazioni più complesse come un modulo multi-step con logica condizionale possono essere realizzate facilmente con l'interfaccia di Claspo.

Tempo di lancio

La costruzione di moduli personalizzati può richiedere giorni (o addirittura settimane) di sviluppo e test. Con Claspo, puoi gestire la creazione e il lancio di un modulo multi-step su WP gratuitamente e in meno di 15 minuti. Questa velocità ti permette di testare rapidamente nuove idee, aggiustarle al volo e mantenere i tuoi sforzi di marketing agili.

Costo

Il codice personalizzato richiede un investimento sostanziale, tenendo conto delle tariffe degli sviluppatori e dei potenziali costi di manutenzione. D'altra parte, il plugin per il generatore di moduli WordPress di Claspo ha un piano gratuito per sempre, il che significa che puoi creare moduli senza alcun costo. È un'opzione economica per i marketer che cercano di sperimentare senza rischi economici.

In sintesi

Per i marketer di tutti i giorni, il plugin per moduli wizard di WordPress di Claspo è la scelta chiara. È gratuito, facile da usare e veloce, permettendoti di dare vita alle tue idee senza problemi. Perché spendere tempo e denaro per lo sviluppo personalizzato quando puoi ottenere gli stessi (o migliori) risultati in pochi minuti con Claspo?