Cercate un modo per rendere più positiva l'esperienza dei visitatori di un sito web che vi contattano con un modulo a più fasi?
Suddividendo il modulo in diverse sezioni, è possibile combattere la stanchezza da modulo e aumentare il coinvolgimento degli utenti e la generazione di contatti sul sito web.
In questa guida vi illustreremo le basi dell'impostazione di un modulo multi-step in WordPress con WPForms attraverso 2 metodi diversi.
Come creare un modulo a più fasi in WordPress
Creare un modulo multi-step in WordPress utilizzando WPForms è incredibilmente facile. È sufficiente seguire i passaggi indicati di seguito:
In questo articolo
Passo 1: Installare un plugin per la creazione di moduli multi-step
Se state cercando un plugin per la creazione di moduli che vi permetta di creare moduli in più fasi, calcolatori e altri tipi di moduli, non cercate oltre WPForms. Offre numerose funzioni che rendono incredibilmente facile la creazione di un modulo personalizzato.
Per questo tutorial, vi consigliamo di iscrivervi a WPForms Pro, in quanto dispone di molte funzioni come le interruzioni di pagina, l'addon Lead Forms, la logica condizionale e i modelli personalizzabili che rendono molto semplice la creazione di un modulo in più fasi.
Una volta acquistata la licenza di WPForms Pro, tutto ciò che dovete fare è attivare e installare il plugin sul vostro sito web. Per istruzioni passo passo su come farlo, consultate questa guida sull'installazione di un plugin per WordPress.
Passo 2: Creare il modulo e aggiungere i campi rilevanti
Ora creiamo il nostro modulo multi-step in WordPress. Dalla vostra dashboard, navigate semplicemente su WPForms e cliccate sul pulsante Aggiungi nuovo.
Nella pagina successiva, date un nome al vostro modulo. Ai fini di questo tutorial, chiameremo il nostro modulo "WordPress Multi-Step Form".
A questo punto, si può scegliere di iniziare a costruire il modulo da zero facendo clic sul pulsante Crea modulo vuoto, oppure si possono aggiungere campi a un modello esistente.
Per risparmiare tempo e procedere con l'aggiunta dei campi pertinenti al nostro modulo, selezioneremo il Modulo di contatto semplice e poi faremo clic sul pulsante Usa modello.
Dopo aver fatto clic sul pulsante Usa modello, si verrà reindirizzati al Form Builder. Sul lato sinistro, si possono vedere tutti i campi disponibili.
Nel frattempo, sul lato destro dello schermo, è possibile vedere un'anteprima modificabile del modulo, dove è possibile trascinare e rilasciare altri campi a proprio piacimento.
Con il modello di modulo SimpleContact, avrete già i campi del modulo Nome, Email e Commento o Messaggio.
Fare clic su uno qualsiasi dei campi del modulo per apportare modifiche o aggiungere nuovi campi per personalizzare il modulo. Ad esempio, abbiamo aggiunto dei campi per consentire agli utenti di fornire informazioni relative a:
- Nome della società - Utilizzando il campo Testo a riga singola.
- Titolo del lavoro - Anche in questo caso, utilizzare il campo Testo a riga singola.
- Sito web - Utilizzando il campo Sito web / URL della sezione Campi fantasia.
- Industria - Utilizzando un campo Checkbox e aggiungendo scelte come Information Technology, Manufacturing, Retail e Healthcare.
- Paese/Regione - Utilizzando un campo a discesa e aggiungendo scelte come Stati Uniti, Canada, Australia, Regno Unito e Nuova Zelanda.
- Come ha saputo di noi? - Ancora una volta, utilizzando il campo a tendina e aggiungendo scelte come Google, Facebook, LinkedIn, ecc.
Abbiamo aggiunto questi campi per migliorare ulteriormente il modello di modulo e renderlo pertinente al nostro caso d'uso. Vediamo ora come suddividere il modulo in più parti.
Passo 3: Dividere il modulo in più parti
Sarete felici di sapere che dividere il vostro modulo in più parti è molto facile con WPForms e non c'è solo un metodo per farlo!
A seconda delle vostre esigenze, potete utilizzare il campo Interruzione di pagina per suddividere il modulo o utilizzare l'addon Lead Forms. Vi mostreremo i passaggi per entrambi!
Metodo 1: Aggiungere il campo interruzione di pagina per dividere il modulo
Per iniziare a suddividere il modulo in più parti, trascinare il campo Interruzione di pagina dal pannello di sinistra a quello di destra.
Ricordare che è necessario inserire il campo Interruzione di pagina nella posizione esatta in cui si desidera che il modulo venga suddiviso.
Se volete dividere nuovamente il modulo, ripetete gli stessi passaggi. WPForms vi consentirà di creare tutte le pagine di modulo di cui avete bisogno.
È possibile creare moduli a due fasi o di livello superiore, ma ricordate di mantenere le cose semplici per non sovraccaricare gli utenti.
Una volta terminato, è possibile personalizzare la barra di avanzamento a più pagine per aumentare la facilità d'uso del modulo.
Personalizzare la barra di avanzamento dei moduli multipagina
Utilizzando una barra di avanzamento, è possibile far conoscere agli utenti le diverse sezioni del modulo, in modo che sappiano quanto hanno ancora da compilare prima di fare clic su Invia.
WPForms semplifica enormemente le cose introducendo tre diverse barre di indicatori in stile breadcrumb per i moduli a più fasi:
- Barra di avanzamento: Questa opzione consente all'utente di vedere l'avanzamento del modulo durante la compilazione, per tenerlo informato.
- Cerchi: Questa opzione consente al modulo a più fasi di visualizzare un cerchio e il titolo della pagina su ogni pagina.
- Connettore: Questa opzione visualizza i titoli delle pagine e una barra di collegamento per ogni sezione del modulo a più fasi.
Fare clic sulla sezione Interruzione prima pagina per personalizzare la barra di avanzamento e il titolo della prima pagina del modulo a più fasi. Da questa posizione è possibile:
- Selezionare il tipo di indicatore di avanzamento desiderato.
- Modificare il colore dell'indicatore di pagina a proprio piacimento.
- Personalizzate il titolo della pagina per aiutare gli utenti a capire in quale sezione del modulo si trovano (se avete selezionato Cerchi o Connettori).
Personalizzare il titolo della pagina successiva e il testo del pulsante
Avete cambiato il titolo della pagina per la prima sezione del modulo, ma cosa succede alle altre sezioni del modulo?
Come per la prima pagina, è possibile modificare il titolo della pagina per la sezione successiva facendo clic sul relativo campo Interruzione di pagina e anche personalizzare la sua Etichetta successiva.
Inoltre, è possibile attivare l'opzione Visualizza precedente per mostrare un pulsante di pagina precedente ai visitatori del sito e personalizzare l'etichetta precedente a proprio piacimento.
In questo modo, se necessario, i clienti possono tornare alla pagina precedente del modulo, aumentando ulteriormente la facilità d'uso del modulo.
Metodo 2: utilizzare l'addon Lead Forms per dividere il modulo
Il campo Interruzione di pagina funziona bene per suddividere il modulo in numerose sezioni, ma se cercate un'alternativa, potete utilizzare l'addon Lead Forms.
Inoltre, la generazione di contatti è ottima per gestire la vostra piccola impresa su WordPress, il che è totalmente possibile con WPForms.
L'installazione dell'addon Lead Forms è molto semplice. Dalla vostra dashboard di WordPress, andate su WPForms, quindi cliccate su Addons.
Successivamente, cercare "Lead Forms" nella sezione Cerca componenti aggiuntivi. Quindi, fare clic su Installa addon, seguito dal pulsante Attiva.
Abilitare la modalità Lead Form nel costruttore di moduli
Una volta installato e attivato l'addon Lead Forms, tornare al costruttore di moduli dove si sta creando il modulo.
A questo punto, fare clic sulla scheda Impostazioni e selezionare l'opzione Moduli di richiesta. A questo punto, non resta che attivare l'opzione Abilita la modalità modulo di compilazione.
In questo modo apparirà un popup che informa che il Lead Forms Addon ristrutturerà il modulo. Fare clic sul pulsante Abilita i moduli di piombo.
I vostri campi saranno ora trasformati automaticamente in un modulo per i contatti. A meno che non si disponga di un numero elevato di campi, questa operazione richiede normalmente pochi secondi.
Il modulo sarà ora automaticamente suddiviso in numerose sezioni. Sentitevi liberi di aggiungere, modificare e disporre i campi a vostro piacimento.
Personalizzare le impostazioni di stile del modulo di compilazione
Uno degli aspetti migliori di Lead Forms Addon è che consente di personalizzare l'aspetto del modulo sul front-end.
La pagina delle impostazioni di Lead Forms contiene tutte le opzioni di personalizzazione. Di seguito illustreremo le scelte di personalizzazione disponibili.
- Titolo del modulo di ricerca: È possibile assegnare un titolo al proprio modulo di raccolta inserendolo nel campo Titolo del modulo di raccolta. Quando gli utenti compileranno il modulo, il titolo apparirà sul front-end.
- Colore accento: questa opzione consente di modificare il colore dei pulsanti, della barra di avanzamento e delle icone tramite uno strumento interattivo di selezione dei colori.
- Animazione di scorrimento: Con questa opzione attivata, WPForms farà scorrere l'utente fino all'inizio della pagina, dopo aver fatto clic sul pulsante Avanti del modulo.
Il modulo Lead può essere ulteriormente personalizzato con l'aiuto di impostazioni aggiuntive. Per accedere a queste opzioni è necessario attivare le Impostazioni di stile avanzate.
C'è anche un'opzione Contenitore modulo, che si può attivare per racchiudere il modulo Lead in un contenitore, facendolo risaltare dal resto degli elementi della pagina.
Una volta personalizzato il modulo a più fasi per includere tutte le caratteristiche desiderate, non dimenticate di premere il pulsante Salva.
Potete anche usare un modulo a più fasi per catturare nuovi contatti e far crescere la vostra lista di e-mail. Date un'occhiata a questa guida su come creare una pagina di lead magnet con WPForms!
Passo 4: personalizzare notifiche e conferme
La configurazione delle notifiche garantisce che siate sempre aggiornati sulle nuove voci del modulo. Nel costruttore di moduli, andare su Impostazioni, quindi su Notifiche.
Da qui è possibile modificare le impostazioni di notifica predefinite, come l'oggetto, o cambiare le e-mail dei destinatari secondo le necessità.
Una volta fatto, è sufficiente navigare in Conferme nel menu Impostazioni per impostare le risposte per gli invii di moduli andati a buon fine.
A questo punto, selezionate il tipo di conferma (messaggio, visualizzazione della pagina o reindirizzamento) più adatto al vostro sito web e configuratene le opzioni.
Ricordarsi di salvare nuovamente il modulo per evitare di perdere le modifiche e assicurarsi che le impostazioni siano aggiornate.
Passo 5: Pubblicare il modulo WordPress a più fasi
Ottimo lavoro! Avete creato con successo un modulo multi-step in WordPress. Ora è il momento di renderlo operativo e di vedere gli invii di moduli che arrivano a raffica!
Il processo è incredibilmente semplice e non è nemmeno necessario lasciare il costruttore di moduli. È sufficiente fare clic sul pulsante Incorpora nell'angolo in alto a destra.
Si può scegliere di pubblicare il modulo su una pagina esistente o di creare una nuova pagina, dopodiché si verrà reindirizzati all'editor di blocchi di WordPress.
Il modulo sarà già incorporato. Tutto ciò che dovete fare ora è cliccare sul pulsante Pubblica e il vostro modulo WordPress a più fasi sarà attivo!
Se si utilizza un costruttore di pagine come Divi, è possibile consultare questa guida per scoprire come creare un modulo di contatto in Divi.
Altre domande sui moduli a più fasi
I moduli multi-step di WordPress sono un argomento di grande interesse per i nostri lettori. Ecco le risposte ad alcune domande su di essi.
Che cos'è un modulo multifase?
Un modulo a più fasi divide un modulo in più fasi o pagine, migliorando l'esperienza dell'utente grazie alla suddivisione dei moduli più lunghi in sezioni gestibili. È l'ideale per moduli complessi come applicazioni, sondaggi o registrazioni. WPForms semplifica la creazione di moduli a più fasi grazie al campo Interruzione di pagina, che consente agli utenti una facile navigazione.
Un modulo a più fasi rallenterà il mio sito web?
No, un modulo multifase non rallenta il vostro sito web. WPForms, in particolare con il suo addon Lead Forms, ottimizza questi moduli per la velocità e le prestazioni, assicurando che si carichino rapidamente senza influire sulla velocità complessiva del vostro sito web.
Quando utilizzare un modulo multifase?
Utilizzate un modulo a più fasi quando avete moduli lunghi o dettagliati. Sono perfetti per registrazioni, sondaggi o applicazioni in cui è necessario raccogliere molte informazioni, ma si vuole evitare di sovraccaricare l'utente sulla pagina di destinazione. WPForms consente di creare in modo efficiente moduli a più fasi, migliorando il coinvolgimento degli utenti.
Quali tipi di moduli si convertono meglio nel layout a più fasi?
I moduli che richiedono informazioni dettagliate, come le domande di lavoro, i sondaggi complessi e le lunghe registrazioni, si convertono meglio con un layout Multi-Step. Questo formato, facilmente realizzabile con WPForms, aiuta a mantenere gli utenti impegnati e riduce la sensazione di essere sopraffatti da un modulo lungo, aumentando i tassi di conversione.
Successivamente, imparare a creare un modulo di calcolo in WordPress
Volete imparare a creare un modulo di calcolo in WordPress per aumentare il coinvolgimento degli utenti sul vostro sito web? Siete fortunati! Creare un modulo di calcolo personalizzato è facile e veloce, grazie a WPForms e al suo Addon Calcoli.
Se vi state chiedendo come incoraggiare gli utenti a compilare un modulo che richiede il loro indirizzo e-mail per scaricare un file, anche questo è possibile. Consultate questa guida su Come richiedere un indirizzo e-mail per scaricare un file.
Correggete subito le vostre e-mail di WordPress
Siete pronti a sistemare le vostre e-mail? Iniziate oggi stesso con il miglior plugin SMTP per WordPress. Se non avete il tempo di sistemare le vostre e-mail, potete ottenere l'assistenza completa di White Glove Setup come acquisto aggiuntivo e c'è una garanzia di rimborso di 14 giorni per tutti i piani a pagamento.
Se questo articolo vi è stato utile, seguiteci su Facebook e Twitter per altri consigli e tutorial su WordPress.
