Riassunto AI
Vuoi creare un modulo interattivo per acquisire contatti sul tuo sito WordPress? Con il nostro addon Moduli di Contatto, potrai creare un modulo che consente agli utenti di progredire un passo alla volta durante la compilazione del modulo.
Questo tutorial ti mostrerà come installare e utilizzare l'addon Moduli di Contatto in WPForms.
Requisiti:
- Avrai bisogno della licenza Pro o superiore per accedere all'addon Moduli di Contatto
- Assicurati di aver installato l'ultima versione di WPForms per soddisfare la versione minima richiesta per l'addon Moduli di Contatto
Cosa sono i moduli Lead?
I Moduli di Contatto sono moduli online utilizzati per raccogliere informazioni da potenziali clienti, noti anche come "lead". Sono simili ai moduli conversazionali in quanto consentono agli utenti di progredire un passo alla volta durante la compilazione del modulo.
I Moduli di Contatto offrono un modo per raccogliere informazioni di contatto sugli utenti interessati ai tuoi prodotti o servizi senza sopraffarli con più campi contemporaneamente.
Installazione dell'addon Moduli di Contatto
Prima di iniziare, dovrai assicurarti che WPForms sia installato e attivato sul tuo sito WordPress e che tu abbia verificato la tua licenza.
Dopo averlo fatto, sarai in grado di installare e attivare rapidamente l'addon Moduli di Contatto.
Abilitazione della modalità Moduli di Contatto
Le impostazioni dell'addon Moduli di Contatto si trovano nell'editor dei moduli. Per procedere, dovrai creare un nuovo modulo o modificare uno esistente per accedere all'editor dei moduli.
Per convertire il tuo modulo in un Modulo di Contatto, vai su Impostazioni » Moduli di Contatto. Dovrai attivare l'opzione Abilita modalità Moduli di Contatto.
Vedrai una sovrapposizione che ti notifica che il tuo modulo verrà ristrutturato. Per procedere, fai clic su Abilita Moduli di Contatto.
Una volta abilitata la modalità Moduli di Contatto, appariranno opzioni aggiuntive. Tratteremo queste opzioni quando personalizzeremo il Modulo di Contatto.
Vedrai anche un avviso che ti invita ad anteprima il modulo nell'editor dei moduli e ad assicurarti che i campi siano formattati correttamente prima di salvare le modifiche. Fai clic sul link Scheda Campi per accedere ai tuoi campi.
Nella scheda Campi, noterai che sono state aggiunte interruzioni di pagina accanto a ciascun campo. Tutti i campi saranno inoltre allineati al centro e utilizzeranno un'opzione di visualizzazione a larghezza intera.
Nota: Non potrai aggiungere i campi Layout o Anteprima Inserimento all'editor dei moduli una volta abilitata la modalità Moduli di Contatto.
Con la modalità Moduli di Contatto abilitata, le dimensioni dei campi, il layout e i colori saranno disabilitati per ciascun campo. Tutte le personalizzazioni vengono gestite nella pagina delle impostazioni dei Moduli di Contatto.
Puoi salvare rapidamente e visualizzare in anteprima il modulo per vedere come appare il Modulo di Contatto nel frontend.
Personalizzazione del tuo modulo di contatto
L'addon Moduli di Contatto offre varie opzioni che ti consentono di personalizzare l'aspetto del tuo Modulo di Contatto. Troverai tutte le opzioni di personalizzazione nella pagina delle impostazioni dei Moduli di Contatto.
Di seguito esamineremo le opzioni di personalizzazione disponibili.
Titolo del Modulo di Contatto
Il Titolo del Modulo di Contatto ti consente di inserire un titolo per il tuo Modulo di Contatto. Il titolo sarà visibile nel frontend quando gli utenti compilano il tuo modulo.
Consigliamo di utilizzare un titolo breve ma descrittivo in modo che gli utenti conoscano lo scopo del tuo Modulo di Contatto prima di compilarlo.
Quando visualizzi in anteprima il modulo nel frontend, il titolo verrà visualizzato nella parte superiore del Modulo di Contatto nella prima pagina.
Colore d'accento
Questa impostazione ti consente di modificare il colore predefinito per i tuoi pulsanti, la barra di avanzamento e le icone. Facendo clic sul menu a discesa, potrai utilizzare il selettore di colori per scegliere un colore d'accento.
In alternativa, puoi inserire il codice HEX del colore del tuo brand nel campo Colore d'Accento.
Impostazioni Avanzate di Stile
Ci sono impostazioni avanzate per personalizzare ulteriormente il tuo Modulo di Contatto. Per accedere a queste opzioni, dovrai attivare le Impostazioni Avanzate di Stile.
Una volta abilitate, troverai opzioni aggiuntive. Di seguito tratteremo le opzioni disponibili.
Contenitore del Modulo
Sotto l'interruttore delle Impostazioni Avanzate di Stile, troverai l'opzione Contenitore del Modulo. Quando abilitata, racchiude il Modulo di Contatto in un contenitore in modo che si distingua dagli altri elementi della pagina.
Dopo aver abilitato l'opzione Contenitore del Modulo, appariranno opzioni di stile aggiuntive.
- Ombra Prospettica: Questa opzione aggiunge automaticamente un'ombra al contenitore del Modulo di Contatto quando è abilitata. È utile se desideri che il tuo Modulo di Contatto appaia sollevato dallo sfondo.
- Angoli Arrotondati: Questa impostazione conferisce al tuo Modulo di Contatto un design moderno aggiungendo angoli arrotondati al contenitore quando è abilitata.
Ecco come apparirà il modulo nel frontend con l'ombra prospettica e gli angoli arrotondati abilitati.
Sotto le impostazioni del contenitore, troverai opzioni aggiuntive per personalizzare i colori degli elementi sul Modulo di Contatto.
- Sfondo del Contenitore: Questa impostazione controlla il colore del contenitore del Modulo di Contatto. Puoi utilizzare il selettore di colori o inserire manualmente un valore HEX per aggiornare il colore del contenitore del modulo.
- Bordi dei Campi: Questa opzione viene utilizzata per modificare il colore del bordo dei campi sul tuo Modulo di Contatto.
- Testo Primario: Questa opzione ti consente di cambiare il colore dei testi primari, come i titoli delle pagine e le etichette dei campi.
- Testo Secondario: Con questa opzione, puoi aggiornare il colore degli elementi secondari come i testi di input o le descrizioni dei campi.
Esporta / Importa Impostazioni di Stile
L'addon Moduli di contatto consente di importare ed esportare le impostazioni di stile da un Modulo di contatto all'altro. Tutte le impostazioni di stile che configuri vengono archiviate come stringhe di esportazione nel campo Esporta le tue impostazioni di stile.
Per esportare le impostazioni di stile del tuo Modulo di contatto, fai clic sull'icona Copia accanto al campo Esporta le tue impostazioni di stile.
Se hai copiato le impostazioni di stile da un altro Modulo di contatto, sarai in grado di incollare e importare rapidamente gli stili nel Modulo di contatto che stai modificando.
Per importare stili da un altro Modulo di contatto, dovrai incollare gli stili che hai copiato nel campo Importa nuove impostazioni di stile.
Una volta aggiunti gli stili, fai clic sul pulsante Importa impostazioni di stile per continuare.
Vedrai una sovrapposizione che ti informa che l'importazione aggiornerà le impostazioni di stile sul tuo Modulo di contatto. Procedi e fai clic su Sì, importa per continuare.
Una volta importate le impostazioni di stile, queste aggiorneranno le impostazioni di stile avanzate con i valori inseriti durante l'importazione.
Nota: Durante l'importazione delle impostazioni di stile, assicurati di incollare correttamente gli stili copiati dal campo Esporta le tue impostazioni di stile. Inoltre, assicurati di non aggiungere spazi extra alla stringa di importazione.
Riceverai un errore di stringa di importazione non valida se la stringa di importazione che hai incollato non aderisce al formato previsto.
Best Practice per i moduli di contatto
Come abbiamo detto in precedenza, l'abilitazione dei Moduli di contatto ristruttura il tuo modulo. Ecco alcune best practice per migliorare l'aspetto del tuo Modulo di contatto.
1. Combina campi correlati
Campi correlati come Nome ed Email possono essere raggruppati in una pagina del Modulo di contatto trascinandoli nella pagina appropriata.
Per convenzione, i Moduli di contatto dovrebbero avere 1-3 campi correlati per pagina. Si consiglia di mantenere ogni pagina breve in modo che gli utenti non si sentano intimiditi durante la compilazione del modulo.
2. Utilizzo dei titoli delle pagine
Per impostazione predefinita, le etichette dei campi vengono utilizzate come titolo della pagina in una pagina del Modulo di contatto. Una volta raggruppati campi correlati, ogni campo utilizzerà la propria etichetta di campo come titolo.
Invece di avere titoli individuali per ogni campo nella pagina, puoi creare un titolo generico che descriva di cosa tratta la pagina.
Per aggiungere un titolo di pagina, fai clic su un campo Interruzione di pagina per aprire le sue opzioni. Nella scheda Generale, troverai una casella di testo Titolo pagina per aggiungere un titolo a una pagina del Modulo di contatto.
Una volta aggiunto il titolo della pagina, questo verrà aggiunto appena sopra i campi in quella pagina.
3. Utilizza il testo segnaposto
Nei Moduli di contatto, le etichette dei campi vengono utilizzate come titoli delle pagine per impostazione predefinita. Se hai aggiunto un titolo di pagina alle tue pagine del modulo, puoi disabilitare le etichette dei campi e utilizzare il testo segnaposto per migliorare il design del Modulo di contatto.
Per disabilitare un'etichetta di campo, fai clic sul campo per aprire il menu Opzioni campo. Nella scheda Avanzate, troverai l'opzione per aggiungere un segnaposto per il campo.
Dopo aver aggiunto il testo segnaposto, scorri verso il basso e attiva l'opzione Nascondi etichetta.
4. Usa Icone per Scelte per Pulsanti Radio e Caselle di Controllo
Se stai usando Caselle di Controllo o campi a Scelta Multipla nel tuo Modulo Lead, potrai aggiungere icone per ogni elemento. Questo renderà il tuo modulo visivamente accattivante per gli utenti durante la compilazione del Modulo Lead.
Per utilizzare questa funzionalità, aggiungeremo una Interruzione di Pagina e un campo Scelta Multipla al nostro Modulo Lead. Puoi aggiungere un campo cliccandoci sopra o trascinandolo nell'area di anteprima del modulo.
Successivamente, seleziona il campo Scelta Multipla per aprire le sue opzioni. Personalizzeremo l'Etichetta e le Scelte del campo per il nostro esempio.
Successivamente, scorri verso il basso e attiva l'opzione Usa icone per le scelte.
Una volta abilitate le Icone per Scelte, le icone erediteranno il colore d'accento specificato durante la personalizzazione del tuo Modulo Lead. Potrai scegliere icone dalla libreria di icone Font Awesome.
Potrai anche aggiornare la dimensione delle icone sul tuo modulo.
Una volta terminata la personalizzazione del tuo Modulo Lead, fai clic su Salva per aggiornare le modifiche.
Ecco un modulo interattivo per darti una panoramica di come questi moduli apparirebbero sul tuo sito.
Domande frequenti
Queste sono le risposte ad alcune delle domande più frequenti sull'utilizzo del componente aggiuntivo Moduli Lead con WPForms.
Posso usare il componente aggiuntivo Moduli Lead con altri componenti aggiuntivi di WPForms?
Sì. Il componente aggiuntivo Moduli Lead è compatibile con la maggior parte dei nostri altri componenti aggiuntivi. Una volta abilitato Moduli Lead, puoi integrarlo con uno qualsiasi dei nostri componenti aggiuntivi di pagamento e marketing.
Tuttavia, il componente aggiuntivo Moduli Lead è un'alternativa ai componenti aggiuntivi Moduli Pagina e Moduli Conversazionali, progettato per semplificare la cattura dei lead. Quindi non potrai utilizzare nessuno di questi componenti aggiuntivi quando la Modalità Modulo Lead è abilitata per un modulo.
Ecco fatto! Ora sai come installare e personalizzare il componente aggiuntivo Moduli Lead in WPForms.
Successivamente, desideri collegare il tuo Modulo Lead a un servizio di marketing per seguire facilmente i lead? Assicurati di consultare i nostri tutorial di integrazione marketing per Mailchimp, Constant Contact, AWeber, Drip, Campaign Monitor, e GetResponse per saperne di più.