Come creare un modulo di contatto Divi con WPForms

Il modulo di contatto integrato di Divi fa il suo lavoro per messaggi semplici. Ma se hai provato ad aggiungere caricamenti di file, riscuotere pagamenti o anche solo archiviare le richieste nella tua bacheca di WordPress, probabilmente hai riscontrato i suoi limiti.

Divi 5 ha portato miglioramenti reali al modulo di moduli, inclusa la logica condizionale e migliori opzioni di stile. Detto questo, il modulo integrato manca ancora di funzionalità chiave di cui la maggior parte dei siti Web aziendali ha bisogno. Non c'è archiviazione delle voci, elaborazione dei pagamenti e anche le funzionalità di protezione antispam sono limitate.

WPForms è un costruttore di moduli WordPress dedicato che colma tutte queste lacune e si integra direttamente con Divi tramite un modulo nativo. Ottieni un vero costruttore drag-and-drop con funzionalità di generazione di moduli AI, oltre 2.100 modelli e ogni modulo che crei si inserisce direttamente nel costruttore visivo Divi da un semplice menu a discesa.

Crea un modulo di contatto Divi con WPForms! 🙂

Come creare un modulo di contatto Divi con WPForms

Di seguito, tratterò le principali differenze tra il modulo di moduli di Divi e WPForms, quindi illustrerò l'intera configurazione dall'installazione del plugin alla pubblicazione del tuo modulo su una pagina Divi.

Mostrerò anche come personalizzare l'aspetto del modulo utilizzando i controlli di progettazione di Divi ed esplorerò alcuni tipi di moduli avanzati che puoi creare una volta che tutto è collegato.

Perché usare WPForms invece del modulo di contatto integrato di Divi

Il modulo di moduli di contatto di Divi gestisce le basi abbastanza bene. Ottieni campi di testo, campi e-mail, menu a discesa e logica condizionale se sei su Divi 5. Ma nel momento in cui hai bisogno di qualcosa di più della raccolta di un nome, e-mail e messaggio, le limitazioni iniziano ad accumularsi.

Non c'è modo di accettare caricamenti di file, nessuna elaborazione dei pagamenti integrata e le richieste di moduli vanno direttamente via e-mail senza modo di visualizzarle o gestirle all'interno di WordPress. Ecco un rapido confronto affiancato per mostrare dove le due opzioni differiscono.

Se un semplice modulo di contatto "Nome, E-mail, Messaggio" è tutto ciò di cui hai bisogno, il modulo di Divi lo gestisce da solo. Ma per qualsiasi cosa di più complesso, WPForms copre tutte queste lacune in un unico plugin invece di richiedere di aggiungere tre o quattro componenti aggiuntivi.

Passaggio 1: Installa il plugin WPForms

WPForms è un generatore di moduli drag-and-drop realizzato appositamente per WordPress. Viene fornito con oltre 2.100 modelli di moduli che coprono tutto, dai moduli di contatto e moduli di pagamento ai sondaggi, moduli di registrazione e moduli calcolatrice.

Ciò che mi piace di più di WPForms per i siti Divi è l'integrazione nativa dei moduli. Ho configurato moduli sia su siti Divi che Elementor, e il modulo Divi offre un'esperienza decisamente più fluida.

Per un modulo di contatto di base, WPForms Lite (gratuito) ti permette di iniziare. Se hai bisogno di caricamenti di file, logica condizionale o archiviazione delle voci, scegli il piano Pro.

Per iniziare, acquista la licenza Pro. Quindi, installa WPForms sul tuo sito web. Se hai bisogno di aiuto, segui queste istruzioni su come aggiungere un plugin a WordPress.

Aggiorna subito a WPForms Pro! 🙂

Passaggio 2: Crea il tuo modulo di contatto Divi

Con WPForms attivo, vai su WPForms » Aggiungi Nuovo per creare il tuo primo modulo. Hai due modi per iniziare. Il percorso tradizionale è la libreria di modelli, che si carica con centinaia di moduli predefiniti organizzati per categoria.

Cerca "Modulo di Contatto Semplice" e fai clic su Usa Modello per ottenere un punto di partenza pulito con i campi Nome, Email e Commento/Messaggio già presenti.

L'opzione più veloce è il generatore di moduli AI, che ti permette di descrivere cosa dovrebbe fare il tuo modulo, ad esempio "Ho bisogno di un modulo di contatto con nome, email, telefono, un menu a discesa per il reparto e un campo messaggio" e WPForms lo crea per te.

L'IA funziona anche per popolare le scelte dei campi. Se aggiungi un menu a discesa per "Come ci hai conosciuto?" e non hai voglia di digitare tutte le opzioni, le Scelte AI genereranno un elenco pertinente che puoi modificare.

Una volta che hai i tuoi campi al loro posto, il costruttore drag-and-drop ti permette di riorganizzare, rinominare e configurare tutto visivamente. Puoi impostare i campi come obbligatori, aggiungere testo segnaposto, regolare le dimensioni dei campi e utilizzare la logica condizionale per mostrare o nascondere i campi in base a ciò che il visitatore seleziona.

Quando i tuoi campi sono pronti, fai clic sulla scheda Impostazioni per configurare le tue notifiche del modulo. Questo controlla a quale indirizzo email vengono inviate le richieste, come appare l'email di notifica.

Prenditi un minuto per controllare queste impostazioni prima di andare online, perché l'impostazione predefinita invia le notifiche all'email di amministrazione di WordPress, che potrebbe non essere la casella di posta giusta.

Una cosa da tenere a mente con la consegna delle email di WordPress. WordPress utilizza la funzione di posta integrata di PHP per impostazione predefinita, e molti provider di hosting la bloccano o la limitano.

Se hai ricevuto richieste di moduli che non sono mai arrivate nella tua casella di posta, questa è quasi certamente la causa. Il plugin WP Mail SMTP risolve questo problema instradando le tue email tramite un server SMTP autenticato.

Ti consiglio di configurarlo prima che il tuo modulo vada online, perché la risoluzione dei problemi di email mancanti dopo il fatto è frustrante. Fai clic su Salva nell'angolo in alto a destra quando tutto sembra a posto.

Passaggio 3: Apri il generatore Divi

Una volta creata la tua nuova Pagina Contatti (o qualunque pagina tu voglia per il tuo modulo di contatto), vorrai fare clic sul pulsante Modifica con Divi Builder per avviare il creatore di pagine di WordPress Divi.

Se si tratta di una pagina esistente, potrebbe apparire leggermente diversa. In tal caso, fai semplicemente clic su Usa Divi Builder per avviarlo. Entrambi ti porteranno nello stesso editor visivo.

Una volta aperto il costruttore, ti verrà chiesto il layout della tua pagina.

Passaggio 4: Scegli il layout della pagina del tuo modulo di contatto Divi

Una volta caricato il costruttore, fai clic su Inizia a Costruire per aprire una tela bianca. Divi ti chiederà di scegliere un layout di riga per la tua prima sezione. Io sceglierei la riga a colonna singola qui.

Dà al modulo di contatto la larghezza intera e mantiene l'attenzione del visitatore concentrata sulla compilazione, piuttosto che dividere il layout con altri contenuti che competono per l'attenzione.

Successivamente, vedrai apparire una pagina vuota. Questo è il tuo spazio per creare! E, deciderai come vuoi che appaia la tua pagina Divi e dove vuoi che si trovi il tuo modulo di contatto WPForms.

Vedrai un popup che ti chiederà quale tipo di layout (usando le righe) desideri aggiungere alla tua pagina Divi. Per questo post, scegliamo la prima opzione.

Ciò farà sì che il modulo di contatto sia l'unico 'oggetto' che entra in quella riga, in modo che riceva molta attenzione e le persone lo compilino. Procedi e seleziona la prima opzione (la riga singola) per le tue righe.

Ora, ti verrà chiesto di inserire un modulo. Inseriamo il tuo fantastico modulo WPForms la prossima volta.

Passaggio 5: Inserisci il modulo Divi di WPForms

Questo passaggio è facilissimo perché WPForms ha la sua integrazione Divi e un modulo per moduli di contatto! Per aggiungerlo, cerca WPForms nella casella di ricerca e quindi seleziona il modulo che appare.

Nella scheda Contenuto, scegli il tuo modulo di contatto dal menu a discesa Modulo. Questo elenca ogni modulo che hai creato in WPForms.

Puoi anche attivare o disattivare il titolo e la descrizione del modulo, anche se la maggior parte delle persone li disattiva per un aspetto più pulito sulla pagina.

Il modulo viene visualizzato immediatamente sulla pagina, in modo da poter vedere esattamente come si adatta al tuo layout prima della pubblicazione. Se tutto sembra a posto, fai clic sulla spunta verde per salvare il modulo.

Ottimo lavoro, il tuo modulo di contatto è incorporato e pronto. Ora, puoi pubblicarlo nello stesso modo in cui pubblichi qualsiasi pagina in Divi. Fai clic sui 3 punti in fondo al page builder per visualizzare alcune impostazioni aggiuntive di Divi.

Successivamente, seleziona il pulsante Pubblica per vederlo dal vivo. Il tuo modulo di contatto Divi è in diretta. Le richieste verranno inviate sia alla tua email di notifica sia alla dashboard WPForms » Entries.

Qui puoi visualizzare, cercare, contrassegnare, esportare e gestire ogni richiesta dall'interno di WordPress. Già da solo questo è un importante miglioramento rispetto al modulo integrato di Divi, che invia le richieste via email e poi spariscono.

Oltre un modulo di contatto

Il modulo WPForms Divi funziona per qualsiasi tipo di modulo che crei, non solo per i moduli di contatto. Una volta installato il plugin e reso disponibile il modulo in Divi, ecco alcuni dei tipi di modulo più popolari che gli utenti Divi tendono a configurare.

Moduli di pagamento e ordini

Puoi accettare pagamenti con Stripe, PayPal Commerce o Square direttamente da qualsiasi modulo. Ho visto freelance usarlo per la raccolta di acconti per progetti e piccole imprese usarlo per semplici moduli d'ordine con selettori di quantità e codici coupon. Se gestisci un sito Divi per un'attività di servizi, questo è uno dei miglioramenti più pratici che puoi apportare.

Moduli di caricamento file

WPForms include un campo per il caricamento di file con trascinamento della selezione che supporta tipi di file multipli, acquisizione diretta dalla fotocamera, limiti di dimensione configurabili e sincronizzazione automatica del cloud con Google Drive o Dropbox.

Il modulo integrato di Divi non ha alcuna funzionalità di caricamento file, che è uno dei motivi più comuni per cui gli utenti Divi finiscono per cercare un plugin di moduli separato in primo luogo.

Moduli Lead Multi-Step

Moduli lunghi con una dozzina di campi su una pagina tendono ad essere abbandonati. Con i moduli multi-step, puoi suddividere quei campi su più pagine con una barra di avanzamento in modo che i visitatori vedano una sezione gestibile alla volta.

Ho messo insieme una guida completa su come creare un modulo multi-step con interruzioni di pagina, indicatori di avanzamento e logica di pagina condizionale se vuoi approfondire la configurazione.

Moduli di sondaggio e feedback

WPForms Pro include punteggi NPS, campi scala Likert e report di sondaggi interattivi che ti forniscono ripartizioni visive di ogni risposta.

Se stai raccogliendo feedback dei clienti, conducendo sondaggi sulla soddisfazione o facendo ricerche di mercato su un sito basato su Divi, questo sostituisce completamente la necessità di uno strumento di sondaggio separato.

Domande frequenti sui moduli di contatto Divi

WPForms e Divi sono una combinazione popolare per la creazione di moduli WordPress. Ecco le risposte alle domande che sorgono più spesso sull'utilizzo congiunto.

WPForms funziona con Divi 5?

Sì. WPForms ha un modulo nativo Divi che funziona sia con Divi 4 che con Divi 5. Cerchi WPForms nella libreria dei moduli Divi, selezioni il tuo modulo da un menu a discesa e viene incorporato direttamente nel builder visivo. Non è richiesto nulla di aggiuntivo per la compatibilità con Divi 5.

WPForms è gratuito per Divi?

WPForms Lite è completamente gratuito e include il builder drag-and-drop, il generatore di moduli AI, AI Choices, pagamenti Stripe di base e integrazione completa con i moduli Divi.

Puoi creare e incorporare un modulo di contatto funzionante senza spendere nulla. Per funzionalità avanzate come caricamenti di file, logica condizionale, gestione delle voci e moduli multipagina, i piani a pagamento partono da $49.50/anno.

Perché il mio modulo di contatto Divi non invia email?

WordPress si basa sulla funzione di posta integrata di PHP per impostazione predefinita, e molti provider di hosting la bloccano, la limitano o la instradano tramite server che finiscono per attivare i filtri antispam sul lato ricevente.

L'installazione di un plugin SMTP come WP Mail SMTP risolve questo problema inviando le email del tuo modulo tramite un server di posta autenticato. Ciò risolve il problema sia per il modulo integrato di Divi che per WPForms.

Successivamente, porta i tuoi moduli Divi oltre

Ora che il tuo modulo di contatto Divi è attivo, potresti voler perfezionare il suo aspetto sul tuo sito. Dai un'occhiata alla nostra guida su come stilizzare i moduli di contatto in WordPress per suggerimenti su come abbinare il design del tuo modulo ai colori, ai font e alla spaziatura del tuo tema Divi.

Se preferisci che il tuo modulo di contatto appaia come un overlay invece di trovarsi su una pagina dedicata, ecco come creare un popup per modulo di contatto in WordPress. Mantiene le tue pagine pulite rendendo il modulo accessibile da qualsiasi pagina del tuo sito tramite un pulsante o un trigger di link.

Crea ora il tuo modulo di contatto Divi

Pronto a creare il tuo modulo? Inizia oggi stesso con il plugin per la creazione di moduli WordPress più semplice. 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.