Come aggiungere un modulo in più passaggi in WordPress in 5 semplici passaggi

Sapevi che convertire il tuo modulo WordPress in un solo passaggio in un modulo WordPress multifase può aumentare la tua conversione di quasi il 60% ? Infatti, in alcuni casi, il tasso di conversione può arrivare fino al 300% .

Sì. Perché al giorno d'oggi, le persone sono troppo occupate e hanno un breve intervallo di attenzione. Inoltre, se chiedi loro di compilare un modulo lungo di un passaggio, è molto probabile che lascino il tuo sito Web, lasciando il modulo incompleto.

Tuttavia, puoi modificare questo scenario utilizzando un modulo in più passaggi per il tuo sito WordPress. Ma la domanda è come?

Bene, ecco perché sono qui per mostrarti una guida passo passo su come aggiungere un modulo in più passaggi in WordPress.

Continua a leggere per scoprire come creare facilmente un modulo in più passaggi nel sito Web di WordPress in pochi minuti ….

Che cos'è un modulo a più passaggi?

Bene, come suggerisce il nome, è un modulo con più passaggi in cui domande/campi di input sono divisi in passaggi diversi anziché mettere tutto in un solo passaggio. Se stai cercando una definizione, ecco come HubSpot definisce il modulo a più passaggi.

Un modulo a più passaggi è un modulo lungo che viene suddiviso in più parti. Sono usati per rendere le forme lunghe meno intimidatorie e scoraggianti.

– Punto focale

I moduli a più passaggi sono fondamentalmente un sostituto del modulo lungo con troppi campi di input. Se hai un modulo relativamente più piccolo, puoi attenerti a un modulo a un passaggio.

Ora che sai cos'è un modulo a più passaggi, diamo un'occhiata ad alcuni dei motivi per cui dovresti considerare di aggiungere un modulo a più passaggi al tuo sito WordPress.

Perché utilizzare il modulo in più passaggi in WordPress?

Bene, la semplice risposta è aumentare alle stelle il tuo tasso di conversione. Al giorno d'oggi i moduli multifase stanno diventando estremamente popolari sui siti Web con usi come moduli di registrazione, moduli di prenotazione, moduli per ordini di cibo, ecc. Alcuni dei motivi per cui dovresti anche considerare di utilizzare il modulo multistep nel tuo sito Web includono:

• I moduli in più passaggi funzionano meglio quando si tratta di attirare l'attenzione dell'utente. Di conseguenza, le persone si impegnano di più e completano l'invio dei moduli più spesso.
• Gli utenti ritengono che il multistep sia più intuitivo e fornisce una migliore facilità d'uso rispetto a un modulo lungo in un unico passaggio.
• Poiché è presente una barra di navigazione/barra di avanzamento con un modulo a più passaggi, gli utenti si sentono più incoraggiati a completare un modulo a più passaggi.
• I moduli condizionali a più passaggi sono ottimi per raccogliere solo i dati rilevanti di cui hai bisogno.
• Come risultato di tutti i lati positivi sopra menzionati, i moduli a più fasi aumentano il tasso di conversione.

Ora che sai che dovresti utilizzare i moduli in più passaggi nel sito WordPress, è il momento di creare la configurazione perfetta di cui hai bisogno per creare il tuo modulo in più parti.

Configura è necessario creare un modulo WordPress Multi Step

Insieme a WordPress, avresti bisogno di altri due plug-in per creare facilmente moduli in più passaggi in WordPress. Questi plugin per WordPress sono:

1. Elementor (versione gratuita)
2. MetForm (gratuito e professionale)

Elementor è il miglior generatore di pagine di WordPress e MetForm è uno dei plug-in di moduli multi-step di WordPress in più rapida crescita. Se hai bisogno di aiuto per installare MetForm, puoi dare un'occhiata alla nostra documentazione su come installare MetForm.

Una volta terminata l'installazione, è necessario creare una pagina con il generatore di pagine Elementor prima di poter utilizzare Metform. Per questo, vai su Dashboard ⇒ Pagina ⇒ Aggiungi nuovo .

Ora, fornisci un titolo adatto, seleziona Elementor Full Width come modello, fai clic su Publis h. Successivamente, fai clic su Modifica con Elementor.

Infine, sei pronto per creare il tuo modulo in più passaggi. Quindi, passiamo al processo principale.

Nota: in questo tutorial, ti mostrerò come aggiungere un modulo in più passaggi a una pagina. Ma puoi anche aggiungere facilmente moduli creati con MetForm in un popup modale.

Come creare un modulo in più passaggi in WordPress

In questo blog imparerai a creare da zero un modulo multifase dall'aspetto moderno in soli 5 semplici passaggi:

Passaggio 1: trascina e rilascia MetForm

Una volta che sei in modalità Modifica con Elementor , cerca MetForm e trascina e rilascia nel punto in cui desideri che appaia il modulo.

Passaggio 2: crea un nuovo modulo

Fare clic sulla sezione del modulo per accedere alle opzioni Modifica MetForm . Fare clic sul pulsante Modifica modulo .

Una volta che si apre una nuova finestra

• Seleziona Nuovo (crea nuovo modulo)
• Fornire un nome modulo per il modulo
• Scegli il modello vuoto,
• e fare clic su Modifica modulo

Passaggio 3: crea moduli in più passaggi da zero utilizzando MetForm e il generatore di pagine Elementor

Dopo aver fatto clic su Modifica modulo, avrai accesso a un'altra nuova finestra con il generatore di pagine Elementor per creare il tuo modulo da zero. Per creare un singolo passaggio di un modulo a più passaggi, è necessario seguire questi quattro passaggi:

Aggiungi una nuova sezione

Trascina e rilascia i campi di input in base ai requisiti

Trascina e rilascia il pulsante Prec/Next/Submit a seconda della frase del modulo

Fornire un nome proprio alla sezione

Per questo blog, creerò una demo di 3 passaggi Prenotazione hotel Modulo multifase utilizzando i passaggi sopra menzionati. I tre passaggi del modulo includeranno Informazioni personali, Informazioni sulla prenotazione e Informazioni aggiuntive

Modulo di prenotazione Fase uno – Informazioni personali:

• Per la sezione Informazioni personali, fai clic sull'icona Elementor + e scegli una struttura con due colonne uguali .

• Cerca il campo di immissione del testo e trascina e rilascia il campo del modulo nella colonna di sinistra.

• Ora per modificare l'attributo di questo campo di input, fai clic sul segno di modifica, vai su Contenuto ⇒ contenuto e modifica le seguenti opzioni:
  • Mostra etichetta: attiva questa opzione per mostrare l'etichetta del campo di input.
  • Posizione: puoi scegliere di posizionare l'etichetta in alto oa sinistra.
  • Etichetta: dai un nome alla tua etichetta. Userò "Nome".
  • Nome: il campo del nome è obbligatorio e deve essere univoco. Quindi, assicurati di assegnare un nome diverso a ciascun campo e sostituisci lo spazio con trattino basso/trattino.
  • Segnaposto: fornisce un testo segnaposto.
  • Testo della guida: nel caso in cui desideri fornire un testo della guida per gli utenti, puoi farlo qui.

• Quindi, vai su Contenuto ⇒ Impostazioni per modificare le seguenti opzioni:
  • Obbligatorio: per rendere obbligatorio questo campo modulo, attivare questa opzione.
  • Tipo di convalida: puoi impostare diversi tipi di convalida per il campo di testo in base alla lunghezza del carattere, della parola e dell'espressione.
  • Messaggio di avviso: qui è possibile impostare il messaggio di avviso che verrà visualizzato se il requisito non è soddisfatto.

Nota: userò la funzione di logica condizionale nel secondo passaggio di questo modulo.

Proprio come il nome, aggiungi un altro campo di immissione di testo per il cognome. Come parte della fase delle informazioni personali, qui aggiungerò altri due campi; E-mail e numero di cellulare.

Una volta terminata la modifica delle impostazioni del campo Email e Numero di cellulare. Cerca e trascina e rilascia il pulsante Next Step . È possibile modificare diverse impostazioni dei pulsanti come Etichetta, Allineamento pulsante, icona, posizione dell'icona, ecc.

• Ora la sezione per il primo passaggio è pronta, per dare un nome proprio al primo passaggio
  • Fare clic sull'icona a sei punti per aprire l'opzione delle impostazioni e andare su layout ⇒ multistep .
  • Fornisci un nome sull'opzione Titolo scheda multipasso
  • Scegli un'icona dalla libreria o carica un SVG.
  • Clicca su aggiorna per salvare.

Ora che la prima sezione è pronta, costruiamo il Secondo Step.

Modulo di prenotazione Fase due – Informazioni sulla prenotazione:

• Per il secondo passaggio devi scegliere una nuova sezione. Sceglierò una nuova sezione con una singola colonna e quindi aggiungerò una nuova sezione interna con due colonne uguali.
• Dopo aver scelto la colonna, trascina e rilascia il campo di inserimento della data 2 per le opzioni di check-in e check-out.

Regola da seguire : devi scegliere una nuova sezione per iniziare il nuovo passaggio , altrimenti qualsiasi campo di input aggiunto verrà aggiunto al passaggio precedente. Quindi, ricorda sempre, i nuovi passaggi richiedono una nuova sezione anche se ha lo stesso layout.

• Insieme all'opzione di impostazione menzionata per il campo di testo, ottieni le seguenti impostazioni per il campo di immissione Data in Contenuto ⇒ Impostazioni
  • Imposta la data corrente come data minima: attiva questa opzione per impostare la data corrente come data minima.
  • Imposta la data minima manualmente: se non desideri impostare la data corrente come data minima, puoi anche impostare manualmente la data minima.
  • Imposta manualmente la data massima: qui puoi impostare la data massima.
  • Disattiva elenco date: puoi utilizzare questa opzione per disabilitare alcune date. Per disabilitare qualsiasi data clicca sul pulsante +AGGIUNGI ARTICOLO e seleziona la data.
  • Immissione della data dell'intervallo: attivando questa opzione è possibile consentire agli utenti di selezionare un intervallo di date. Ma per questo modulo, lascerò questa opzione disattivata.
  • Input anno: attiva questa opzione per prendere un anno come parte dell'inserimento della data.
  • Immissione del mese: per abilitare il mese come parte dell'immissione della data, attivare questa opzione.
  • Inserimento data: attiva questa opzione per prendere una data (giorno) come parte dell'inserimento della data
  • Formato data: impostare qui il formato della data immessa.
  • Localizzazione: scegli la posizione dal menu a discesa in base alle tue preferenze.
  • Vuoi inserire il tempo con esso: attiva questa opzione per prendere tempo insieme ai dati come input. Se attivi questa opzione, otterrai un'altra opzione che è Abilita tempo 24 ore. Usando questa opzione puoi abilitare il formato 24 ore.

Ora, finalmente, utilizzeremo la funzione del modulo condizionale per il campo Check out. Per rendere visibile il campo check out solo quando il campo check in è vuoto,

• Copia il valore del campo Nome del campo di immissione Check-in.
• Quindi vai su Contenuto ⇒ Condizionale , attiva l'opzione di abilitazione
• Scegli E dal menu a discesa Criteri di corrispondenza delle condizioni.
• Dalle opzioni a discesa Azione, scegli Mostra questo campo .
• Fai clic su + AGGIUNGI ARTICOLO , nel campo di input if, incolla il valore del nome del campo di check-in che hai copiato.
• Scegli " non vuoto " dal menu a discesa di Match (confronto).

Ora fai clic sul pulsante di anteprima per vedere. Il campo Check out dovrebbe essere visibile solo dopo aver scelto una data di Check-in.

Aggiungi una nuova sezione interna in modo che il modulo non appaia male quando l'opzione condizionale nasconde il check-out inizialmente. Trascina due volte il campo del modulo Numero per creare altri due campi per il numero di stanze e il numero di persone.

E poiché è il passaggio intermedio, dobbiamo includere sia Prev che Next Buttons .

Una volta che hai finito di modificare le impostazioni per tutti i campi aggiunti per questa sezione, cambia il nome della sezione/passo dal layout ⇒ multistep proprio come hai fatto con la prima sezione. Lo sto chiamando Informazioni sulla prenotazione.

Ora il secondo passaggio è pronto, passiamo al terzo passaggio

Modulo di prenotazione Fase tre – Informazioni aggiuntive

Per il terzo passaggio, aggiungiamo una nuova sezione con una singola colonna. E aggiungi un campo di testo e denominalo Informazioni aggiuntive.

Quindi, aggiungi una sezione interna di due colonne all'interno della sezione. Successivamente, trascina e rilascia un pulsante precedente e quindi un pulsante di invio per l'invio del modulo.

Nota: puoi aggiungere tutte le sezioni interne che desideri. Ma per creare un nuovo passaggio, devi aggiungere una nuova sezione.

Per dare un nome alla terza sezione, vai su layout ⇒ multistep e aggiungi il titolo “ Informazioni aggiuntive ” e aggiungi un'icona.

Alla fine, abbiamo finito di creare il nostro modulo multi-passo WordPress con 3 passaggi. Ora fai clic su Aggiorna per salvare e chiudi la finestra per passare alle impostazioni a più passaggi.

Passaggio 4: abilitare l'opzione Multi Step Form di MetForm

Ora che abbiamo il nostro modulo, è il momento di convertirlo in un modulo funzionante a più passaggi. Fare così

• Vai a Contenuto ⇒ Impostazioni multifase
• Attivare l'opzione Abilita Multi-step per rendere attive le opzioni multi-step
• Abilita il Display Multistep Nav in modo che il menu Sezione venga visualizzato in alto. Puoi anche modificare le diverse impostazioni come Altezza contenitore modulo adattivo, Abilita scorrimento verso l'alto, ecc.
• Dopo aver apportato tutte le modifiche, fare clic su aggiorna per salvare

Passaggio 5: configurare conferma, notifica e altre impostazioni da completare

Ora che hai progettato il tuo modulo multistep. Configuriamo tutte le impostazioni del modulo che MetForm ha da offrire. Per modificare le impostazioni di MetForm dalla dashboard di WordPress, vai su MetForm ⇒ Moduli ⇒ Fai clic sull'opzione Modifica del modulo che hai appena creato.

Nota: qui troverai anche lo shortcode del modulo che hai creato che devi semplicemente copiare e incollare per aggiungere il tuo modulo in qualsiasi punto del sito web. Puoi accedere alle impostazioni del modulo anche dall'opzione Modifica modulo .

Qui troverai le seguenti impostazioni:

Generale:

Come parte delle impostazioni generali, puoi modificare Titolo, Messaggio di successo, Accesso richiesto, Conteggio visualizzazioni e così via. Puoi anche impostare qualsiasi URL personalizzato su cui desideri che gli utenti accedano dopo aver inviato il modulo.

Conferma:

Puoi inviare un'e-mail di conferma ai tuoi utenti con una copia del modulo inviato con questo plug-in per la creazione di moduli. Attiva l'opzione di conferma, quindi puoi impostare Oggetto dell'e-mail, E-mail da, Da e-mail, E-mail di risposta a e messaggio di ringraziamento.

Impostazioni di notifica:

Puoi anche inviare e-mail di notifica del modulo all'amministratore con MetForm. Abilita l'e-mail di notifica all'opzione amministratore. Quindi impostare l' oggetto dell'e-mail, l'e-mail a, l'e-mail da, la nota dell'amministratore , ecc.

Dopo aver apportato tutte le modifiche, scorri verso il basso e fai clic su salva modifiche per aggiornare le impostazioni.

Oltre alle impostazioni che ho trattato in questo blog, ottieni anche l'integrazione come API REST, Mail Chimp, Google Sheet , ecc. Inoltre, integrazione del gateway di pagamento come PayPal, Stripe. Integrazione CRM che include HubSpot, Zoho, ecc. Ottieni anche opzioni di autenticazione come accesso e registrazione . Per maggiori dettagli su queste impostazioni, consulta la nostra documentazione di MetForm.

Se hai seguito correttamente i passaggi indicati, dovresti ottenere un modulo di prenotazione in più passaggi come quello qui sotto:

Incartare

Lì, hai appena creato il tuo modulo multistep WordPress in pochi minuti. Se pensi che questo modulo sia semplice, non preoccuparti. Lo scopo principale di questo blog era mostrare come creare un modulo in più passaggi in WordPress utilizzando MetForm.

Ora che sai come creare un modulo in più passaggi di WordPress, puoi creare il tuo modulo e la tua logica personalizzati. Spero che utilizzi le funzionalità di MetForm per creare meravigliosi moduli in più passaggi. In caso di problemi lungo il percorso, condividi con noi, il nostro team ti risponderà al più presto.

Non dimenticare di controllare tutte le straordinarie funzionalità che MetForm ha da offrire.