Riassunto AI
Stai cercando un modo per rendere l'esperienza dei visitatori del sito web che ti contattano con un modulo multi-step più positiva?
Suddividendo il tuo modulo in diverse sezioni, puoi combattere la fatica da modulo e aumentare il coinvolgimento degli utenti e la generazione di lead sul tuo sito web.
In questa guida, ti illustreremo le basi per impostare un modulo multi-step in WordPress con WPForms tramite 2 metodi diversi.
Come Creare un Modulo Multi-Step in WordPress
Creare un modulo multi-step in WordPress utilizzando WPForms è incredibilmente facile. Segui semplicemente i passaggi qui sotto:
In Questo Articolo
Passaggio 1: Installa un Plugin per la Creazione di Moduli Multi-Step
Se stai cercando un plugin per la creazione di moduli che ti permetta di creare moduli multi-step, calcolatori e altri tipi di moduli, non cercare oltre WPForms. Offre numerose funzionalità che rendono la creazione di un modulo personalizzato incredibilmente facile.
Per questo tutorial, consigliamo di iscriverti a WPForms Pro, poiché dispone di molte funzionalità come Interruzioni di Pagina, il componente aggiuntivo Lead Forms, logica condizionale e modelli personalizzabili che rendono molto facile la creazione di un modulo multi-step.
Una volta acquisita la licenza WPForms Pro, tutto ciò che devi fare è attivare e installare il plugin sul tuo sito web. Per istruzioni passo passo su come farlo, consulta questa guida su come installare un plugin di WordPress.
Passaggio 2: Crea il Tuo Modulo e Aggiungi i Campi Pertinenti
Ora, creiamo il tuo modulo multi-step in WordPress. Dalla tua dashboard, naviga semplicemente su WPForms e fai clic sul pulsante Aggiungi Nuovo.
Nella pagina successiva, dai un nome al tuo modulo. Ai fini di questo tutorial, chiameremo il nostro "Modulo Multi-Step di WordPress".
Dopodiché, puoi scegliere di iniziare a costruire il tuo modulo da zero facendo clic sul pulsante Crea Modulo Vuoto, oppure puoi 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 quindi faremo clic sul pulsante Usa Modello.
Dopo aver fatto clic sul pulsante Usa Modello, verrai reindirizzato al Costruttore di Moduli. Sul lato sinistro, puoi vedere tutti i Campi disponibili.
Nel frattempo, sul lato destro dello schermo, puoi vedere un'anteprima modificabile del tuo modulo, dove puoi trascinare e rilasciare altri campi a tuo piacimento.
Con il Modello di Modulo di Contatto Semplice, avrai già i campi del modulo Nome, Email e Commento o Messaggio.
Fai clic su uno qualsiasi dei campi del modulo per apportare modifiche o aggiungere nuovi campi per personalizzare il tuo modulo. Ad esempio, abbiamo aggiunto campi per consentire agli utenti di fornire informazioni riguardanti:
- Nome Azienda – Utilizzando il campo Testo a Riga Singola.
- Posizione Lavorativa – Ancora, utilizzando il campo Testo a Riga Singola.
- Sito Web – Utilizzando il campo Sito Web / URL dalla sezione Campi Fantasia.
- Settore – Utilizzando un campo Casella di controllo e aggiungendo Scelte come Information Technology, Produzione, Vendita al dettaglio e Assistenza sanitaria.
- Paese/Regione – Utilizzando un campo Menu a tendina e aggiungendo Scelte come Stati Uniti, Canada, Australia, Regno Unito e Nuova Zelanda.
- Come sei venuto a conoscenza di noi? – Ancora una volta, utilizzando il campo Menu a discesa 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. Ora, diamo un'occhiata a come suddividere il tuo modulo in più parti.
Passaggio 3: Dividi il Tuo Modulo in Più Parti
Sarai lieto di sapere che suddividere il tuo modulo in più parti è molto facile con WPForms, e non hai solo un metodo per farlo!
A seconda delle tue esigenze, puoi utilizzare il campo Interruzione di pagina per suddividere il tuo modulo o utilizzare l'Addon Lead Forms. Ti mostreremo i passaggi per entrambi!
Metodo 1: Aggiungi il campo Interruzione di pagina per suddividere il modulo
Per iniziare a suddividere il tuo modulo in più parti, trascina e rilascia il campo Interruzione di pagina, dal pannello di sinistra al pannello di destra.
Ricorda che devi inserire il campo Interruzione di pagina nella posizione precisa in cui desideri che il modulo venga suddiviso.
Se desideri suddividere nuovamente il modulo, ripeti gli stessi passaggi. WPForms ti consentirà di creare tutte le pagine del modulo di cui hai bisogno.
Puoi creare moduli in 2 passaggi o andare più in alto quanto vuoi, ma ricorda di mantenere le cose semplici perché non vuoi sopraffare i tuoi utenti.
Una volta terminato, puoi personalizzare la barra di avanzamento multipagina per aumentare l'usabilità del modulo.
Personalizza la barra di avanzamento del modulo multipagina
Utilizzando una barra di avanzamento, puoi informare gli utenti delle diverse sezioni del tuo modulo, in modo che sappiano quanto resta da compilare prima di fare clic su Invia.
WPForms ti semplifica le cose introducendo tre diverse barre indicatrici in stile breadcrumb per i moduli multi-step:
- Barra di avanzamento: Questa opzione consente all'utente di vedere l'avanzamento del modulo mentre lo compila per tenerlo informato.
- Cerchi: Questa opzione consente al tuo modulo multi-step di visualizzare un cerchio e il titolo della pagina su ciascuna pagina.
- Connettore: Questa opzione visualizza i titoli delle pagine e una barra di collegamento per ogni sezione del tuo modulo multi-step.
Fai clic sulla sezione di interruzione della Prima pagina per personalizzare la prima pagina della barra di avanzamento e del titolo della pagina del tuo modulo multi-step. Da questa posizione, puoi:
- Seleziona il tipo di Indicatore di avanzamento desiderato.
- Modifica il Colore dell'indicatore di pagina a tuo piacimento.
- Personalizza il Titolo della pagina per aiutare gli utenti a capire su quale sezione del modulo si trovano (se hai selezionato Cerchi o Connettori).
Personalizza il titolo della pagina successiva e il testo del pulsante
Hai modificato il titolo della pagina per la prima sezione del modulo, ma per quanto riguarda le altre sezioni del tuo modulo?
Come la prima pagina, puoi modificare il Titolo della pagina per la sezione successiva facendo clic sul campo Interruzione di pagina pertinente, e persino personalizzare la sua Etichetta successiva.
Inoltre, puoi attivare l'opzione Mostra precedente per mostrare un pulsante Pagina precedente ai visitatori del sito e persino personalizzare l'etichetta Etichetta precedente a tuo piacimento.
In questo modo, se necessario, i clienti possono tornare alla pagina precedente del tuo modulo, il che aumenta ulteriormente l'usabilità del tuo modulo.
Metodo 2: Usa l'addon Moduli di contatto per dividere il modulo
Il campo Interruzione di pagina funziona benissimo per dividere il modulo in numerose sezioni, ma se stai cercando un'alternativa, puoi usare l'addon Moduli di contatto.
Inoltre, generare contatti è ottimo per gestire la tua piccola impresa su WordPress, cosa assolutamente possibile anche con WPForms.
Installare l'addon Moduli di contatto è molto semplice. Dalla tua bacheca di WordPress, vai su WPForms, quindi fai clic su Addon.
Dopo di che, cerca "Moduli di contatto" nella sezione Cerca addon. Quindi, fai clic su Installa addon, seguito dal pulsante Attiva.
Abilita la modalità Modulo di contatto nell'editor di moduli
Una volta che l'addon Moduli di contatto è installato e attivato, torna all'editor di moduli in cui stai creando il tuo modulo.
Da lì, fai clic sulla scheda Impostazioni, e poi seleziona l'opzione Moduli di contatto. Ora, tutto ciò che devi fare è attivare l'opzione Abilita modalità Modulo di contatto.
Ciò farà apparire un popup che informa che l'addon Moduli di contatto riorganizzerà il tuo modulo. Fai clic sul pulsante Abilita Moduli di contatto.
I tuoi campi verranno ora trasformati automaticamente in un Modulo di contatto. A meno che tu non abbia un gran numero di campi, questo richiede normalmente pochi secondi.
Il tuo modulo sarà ora automaticamente diviso in numerose sezioni. Sentiti libero di aggiungere, modificare e disporre i campi a tuo piacimento.
Personalizza le impostazioni di stile del Modulo di contatto
Una delle cose migliori dell'addon Moduli di contatto è che ti consente di personalizzare l'aspetto del tuo modulo sul front-end.
La pagina delle impostazioni dei Moduli di contatto contiene tutte le opzioni di personalizzazione. Di seguito esamineremo le scelte di personalizzazione disponibili.
- Titolo Modulo di contatto: Puoi dare un titolo al tuo Modulo di contatto inserendolo nel campo Titolo Modulo di contatto. Quando gli utenti compilano il tuo modulo, il titolo apparirà sul front-end.
- Colore d'accento: Questa opzione ti consente di cambiare il colore dei tuoi pulsanti, della barra di avanzamento e delle icone tramite uno strumento interattivo di selezione del colore.
- Animazione di scorrimento: Con questa opzione abilitata, WPForms navigherà l'utente in cima alla pagina, dopo aver fatto clic sul pulsante Avanti nel modulo.
Il tuo Modulo di contatto può essere ulteriormente personalizzato con l'aiuto di impostazioni aggiuntive. Dovrai attivare le Impostazioni di stile avanzate per accedere a queste opzioni.
C'è anche un'opzione Contenitore Modulo, che puoi abilitare per racchiudere il Modulo di contatto in un contenitore, facendolo risaltare dal resto degli elementi della pagina.
Una volta che hai personalizzato il tuo modulo multi-step per includere tutte le funzionalità desiderate, non dimenticare di premere il pulsante Salva.
Puoi anche usare un modulo multi-step per acquisire nuovi lead e far crescere la tua lista email. Dai un'occhiata a questa guida su come creare una pagina lead magnet con WPForms!
Passaggio 4: Personalizza Notifiche e Conferme
La configurazione delle notifiche garantisce che tu sia sempre aggiornato sulle nuove voci del modulo. Nell'editor del modulo, vai su Impostazioni, quindi su Notifiche.
Puoi modificare le impostazioni di notifica predefinite, come la riga dell'oggetto, o cambiare le email dei destinatari secondo necessità da qui.
Una volta terminato, naviga semplicemente su Conferme nel menu Impostazioni per configurare le risposte per l'invio corretto del modulo.
Ora, seleziona il Tipo di Conferma (messaggio, visualizzazione pagina o reindirizzamento) che funziona meglio per il tuo sito web e configura le sue opzioni.
Ricorda di salvare nuovamente il tuo modulo per evitare di perdere eventuali modifiche e assicurati che le tue impostazioni siano aggiornate.
Passaggio 5: Pubblica il Tuo Modulo Multi-Step di WordPress
Ottimo lavoro! Hai creato con successo un modulo multi-step in WordPress. Ora è il momento di metterlo online e vedere arrivare le submission del modulo!
Il processo è incredibilmente semplice e non devi nemmeno lasciare l'editor del modulo. Fai semplicemente clic sul pulsante Incorpora nell'angolo in alto a destra.
Puoi scegliere di pubblicare il modulo su una pagina esistente o crearne una nuova, dopodiché verrai reindirizzato all'editor a blocchi di WordPress.
Il modulo sarà già incorporato. Tutto quello che devi fare ora è fare clic sul pulsante Pubblica e il tuo modulo multi-step di WordPress sarà online!
Se stai usando un page builder come Divi, puoi anche consultare questa guida per i passaggi su come creare un modulo di contatto Divi.
Altre domande sui moduli multi-step
I moduli multi-step di WordPress sono un argomento di interesse popolare tra i nostri lettori. Ecco le risposte ad alcune domande su di essi.
Cos'è un modulo multi-step?
Un modulo multi-step divide un modulo in più passaggi o pagine, migliorando l'esperienza utente suddividendo moduli più lunghi in sezioni gestibili. Questo è ideale per moduli complessi come candidature, sondaggi o registrazioni. WPForms semplifica la creazione di moduli multi-step con il suo campo Interruzione di pagina, consentendo una facile navigazione per gli utenti.
Un modulo multi-step rallenterà il mio sito web?
No, un modulo multi-step non rallenterà il tuo sito web. WPForms, in particolare con il suo componente aggiuntivo Lead Forms, ottimizza questi moduli per velocità e prestazioni, assicurando che si carichino rapidamente senza influire sulla velocità generale del tuo sito web.
Quando dovrei usare un modulo multi-step?
Usa un modulo multi-step quando hai moduli lunghi o dettagliati. Sono perfetti per registrazioni, sondaggi o candidature in cui devi raccogliere molte informazioni ma vuoi evitare di sopraffare l'utente sulla pagina di destinazione. WPForms consente una creazione efficiente di moduli multi-step, migliorando il coinvolgimento dell'utente.
Quali tipi di moduli convertono meglio nel layout multi-step?
Moduli che richiedono informazioni dettagliate, come candidature di lavoro, sondaggi complessi e registrazioni lunghe, convertono meglio con un layout Multi-Step. Questo formato, facilmente creabile con WPForms, aiuta a mantenere gli utenti coinvolti e riduce la sensazione di essere sopraffatti da un modulo lungo, aumentando i tassi di conversione.
Successivamente, Scopri Come Creare un Modulo Calcolatore in WordPress
Vuoi imparare come creare un modulo calcolatore in WordPress per aumentare il coinvolgimento degli utenti sul tuo sito web? Sei fortunato! Creare un modulo calcolatore personalizzato è rapido e semplice, grazie a WPForms e al suo Addon Calcoli.
Se ti stai chiedendo come incoraggiare gli utenti a compilare un modulo che richiede la loro email per scaricare un file, anche questo è possibile. Dai un'occhiata a questa guida su Come richiedere un indirizzo email per scaricare un file.
Correggi subito le tue email WordPress
Pronto a risolvere i tuoi problemi di posta elettronica? Inizia oggi stesso con il miglior plugin SMTP per WordPress. Se non hai tempo per risolvere i tuoi problemi di posta elettronica, puoi ottenere assistenza completa per la configurazione White Glove come acquisto aggiuntivo, e c'è una garanzia di rimborso di 14 giorni per tutti i piani a pagamento.
Se questo articolo ti è stato d'aiuto, seguici su Facebook e Twitter per altri suggerimenti e tutorial su WordPress.
