Come creare un modulo WordPress con una barra di avanzamento

Stai cercando un plugin per barre di avanzamento per WordPress?

Gli indicatori di avanzamento, come sono anche conosciuti, tracceranno e indicheranno il progresso generale dell'utente durante la compilazione del modulo.

In questo post, ti mostreremo come aggiungere facilmente una barra di avanzamento al tuo modulo utilizzando WPForms.

Crea subito il tuo modulo WordPress

Come Aggiungere una Barra di Avanzamento per WordPress?

Le barre di avanzamento sono funzionalità visive che aggiungono funzionalità e migliorano l'esperienza utente. Mostrano agli utenti quante pagine ci sono nel tuo modulo e su quale pagina si trovano attualmente.

Avere una barra di avanzamento sul tuo modulo aiuta a ridurre l'abbandono dei moduli mantenendo il tuo visitatore informato sul suo progresso.

Il modo più semplice per aggiungerle ai tuoi moduli è usare un plugin. La buona notizia, specialmente per i principianti, è che non hai bisogno di un plugin specifico per barre di avanzamento per WordPress. WPForms è super intuitivo e semplifica il processo rendendo un gioco da ragazzi creare moduli multipagina con barre di avanzamento.

Come creare un modulo WordPress con una barra di avanzamento

Ecco i passaggi che intraprenderemo:

Iniziamo installando WPForms come nostro plugin per la creazione di moduli e barre di avanzamento.

1. Installa il plugin WPForms

Innanzitutto, per avere una barra di avanzamento sul tuo modulo, dovrai acquistare una Licenza WPForms Pro e poi accedere al tuo account WPForms. Una volta effettuato l'accesso, fai clic sulla scheda Download.

Questo ti mostrerà una pagina con tutte le tue licenze disponibili. Per scaricare il plugin, fai clic sul pulsante Scarica WPForms accanto a una delle tue licenze. Questo salverà un file zippato del plugin WPForms sul tuo computer.

Importante: Avrai bisogno di WPForms Pro poiché include il campo Interruzione di Pagina. Hai bisogno del campo Interruzione di Pagina se hai vari passaggi nel tuo modulo e per mostrare la barra di avanzamento.

Installazione di WPForms sul Tuo Sito WordPress

Una volta scaricato il file zip, vai sul tuo sito web WordPress dove desideri installare WPForms. Quindi, all'interno della dashboard di amministrazione, vai su Plugin » Aggiungi Nuovo e fai clic sul pulsante Carica Plugin.

Da qui, fai clic sul pulsante Scegli File e seleziona il file zip di WPForms che hai appena scaricato.

Dopo che il tuo file è stato caricato, fai clic sul pulsante Installa Ora.

Questo avvierà il processo di installazione per te. Una volta installato il plugin, fai clic sul pulsante Attiva Plugin per attivare WPForms sul tuo sito.

Dopo aver attivato il plugin, verifica la tua chiave di licenza WPForms per ricevere aggiornamenti automatici e supporto per il plugin. L'aggiunta della tua chiave di licenza ti consentirà inoltre di installare e attivare facilmente i componenti aggiuntivi di WPForms dalla dashboard di WordPress.

Fatto! Ora possiamo procedere a creare un nuovo modulo.

2. Crea un Nuovo Modulo

Per iniziare, devi aver effettuato l'accesso all'area di amministrazione di WordPress. Una volta lì, fai clic su WPForms nella barra laterale di amministrazione per andare alla pagina Panoramica moduli.

Quindi, per creare un nuovo modulo, fai clic sul pulsante Aggiungi nuovo per avviare il costruttore di moduli WPForms.

Nella pagina Impostazioni dell'editor di moduli, puoi assegnare un nome al tuo modulo nel campo di immissione Nome modulo.

Se non viene scelto alcun nome, il nome del modulo assumerà il nome del tuo modello per impostazione predefinita.

Sotto il campo Nome modulo, troverai centinaia di modelli di moduli nella sezione Seleziona un modello. Questi sono modelli predefiniti di moduli di uso comune come moduli di contatto, moduli di registrazione e molti altri per aiutarti a iniziare rapidamente.

Nota: Se desideri creare il tuo modulo da zero, utilizza il modello Modulo vuoto.

Per selezionare un modello, puoi utilizzare le categorie nel menu a sinistra. Puoi anche utilizzare la barra di ricerca nell'angolo in alto a sinistra della libreria dei modelli per cercare tra le opzioni disponibili.

Una volta trovato il modello desiderato, passaci sopra con il mouse e fai clic sul pulsante Usa modello.

Da lì, entrerai nell'editor di moduli e potrai trascinare e rilasciare eventuali elementi aggiuntivi se lo desideri. Puoi anche modificare il layout del modulo da campi inline a colonne multiple.

Se hai difficoltà a creare il tuo modulo, leggi le nostre istruzioni dettagliate su come creare e personalizzare completamente il tuo modulo.

3. Aggiungi Interruzioni di Pagina al Tuo Modulo

Ora sei pronto per aggiungere le interruzioni di pagina e una barra di avanzamento. Aggiungendo un'interruzione di pagina, il modulo includerà automaticamente la barra di avanzamento.

Una volta aperto l'editor di moduli, aggiungi i campi che desideri includere nel tuo modulo. Quindi trascina un campo Interruzione di pagina nell'area di anteprima e rilascialo ovunque tu voglia creare una nuova pagina del modulo.

Ogni campo Interruzione di pagina che aggiungi dividerà il modulo in pagine aggiuntive e puoi aggiungere tutte le pagine necessarie. Per spostare l'Interruzione di pagina in una sezione diversa del tuo modulo, fai clic su di essa nell'area di anteprima e trascinala ovunque tu voglia.

Personalizzazione della barra di avanzamento

Una volta aggiunta un'Interruzione di pagina, potresti notare che nell'area di anteprima è apparsa una sezione Prima pagina nella parte superiore del tuo modulo. Questo è il segnaposto per la barra di avanzamento orizzontale. Fai clic su Prima pagina / Indicatore di avanzamento per accedere alle opzioni per il tuo modulo multipagina.

Puoi personalizzare la tua barra di avanzamento nel menu a discesa Indicatore di avanzamento e ci sono diverse opzioni di personalizzazione disponibili per te.

Innanzitutto, scegli gli stili del tuo indicatore di avanzamento. WPForms offre Barre di avanzamento, Barre di avanzamento circolari e Barre di avanzamento con connettore.

Barra di Avanzamento:

Cerchi:

Connettore:

Hai alcune opzioni di stile quando si tratta di questi moduli multipagina. Per cambiare il colore del tuo Indicatore di avanzamento, usa il selettore di colori o inserisci il codice esadecimale.

Infine, inserisci un nome per il tuo modulo nel campo Titolo pagina.

Tuttavia, se sei soddisfatto dell'aspetto del tuo modulo così com'è, puoi nascondere la barra di avanzamento selezionando Nessuno.

Vuoi saperne di più? Leggi le istruzioni complete su come creare moduli multipagina per sfruttare appieno questo modulo.

Potresti anche voler consentire ai tuoi utenti di salvare i propri progressi e compilare il resto del modulo in un secondo momento. Questo è un ottimo modo per ridurre l'abbandono dei moduli e aumentare i tassi di completamento.

4. Salva e Pubblica il Tuo Modulo

Una volta terminata la personalizzazione del modulo, puoi pubblicarlo. Per prima cosa, fai clic sul pulsante Salva nell'angolo in alto a destra del generatore di moduli.

Puoi aggiungere il tuo modulo al tuo sito web facendo clic sul pulsante Incorpora.

Da qui, avrai la possibilità di creare una nuova pagina o selezionare una pagina esistente per aggiungere il tuo modulo.

Nota che c'è anche un'opzione per lo shortcode, se desideri incorporare il modulo direttamente nella tua pagina in seguito. Questo è utile anche se prevedi di inserire moduli nei widget.

Se selezioni l'opzione Crea nuova pagina, ti verrà chiesto di inserire un nome per la pagina. Quindi fai clic sul pulsante Iniziamo per incorporare il tuo modulo e pubblicare la tua pagina.

Se scegli l'opzione Seleziona pagina esistente, ti verrà chiesto di scegliere su quale pagina incorporare il tuo modulo dal menu a discesa.

Quindi fai clic sul pulsante Iniziamo per incorporare il tuo modulo.

Ora puoi visualizzare il tuo modulo nella pagina selezionata. Vai alla pagina su cui l'hai incorporato o vai su WPForms » Tutti i moduli. Passa il mouse sopra il titolo del modulo per visualizzare un menu aggiuntivo di opzioni. Una volta visualizzate le opzioni, fai clic su Anteprima.

5. Controlla la Barra di Avanzamento del Tuo Modulo

Ora avrai un modulo con un indicatore di avanzamento simile a questo:

Ti consigliamo di testare il tuo modulo compilando i campi e inviandolo per assicurarti che tutto abbia un bell'aspetto e funzioni come desideri.

Nota: I campi di interruzione di pagina possono essere spostati su o giù nel modulo se si desidera modificare il layout.

Successivamente, diventa un esperto nella creazione di moduli

Vuoi aumentare la tua conoscenza nella creazione di moduli WPForms? Assicurati di consultare la nostra guida completa ai campi dei moduli e come personalizzare i campi nei tuoi moduli.

Se sei pronto a portare i tuoi moduli al livello successivo, il nostro articolo su come personalizzare i tuoi moduli per abbinarli al tuo tema WordPress vale la pena leggerlo. Imparerai come personalizzare l'aspetto del tuo modulo, i pulsanti, il colore di sfondo e altro ancora, direttamente dall'editor a blocchi di WordPress. La parte migliore? Se non conosci il CSS, va bene. Non hai bisogno di alcun CSS personalizzato per queste personalizzazioni!

Crea subito il tuo modulo WordPress

Pronto a creare il tuo modulo? Inizia oggi stesso con il plugin per la creazione di moduli WordPress più facile. WPForms Pro include molti modelli gratuiti e offre una garanzia di rimborso di 14 giorni.

Se questo articolo ti è stato utile, seguici su Facebook e Twitter per altri tutorial e guide gratuite su WordPress.