Come creare un modulo di contatto Divi con WPForms

Il modulo per i moduli di contatto integrato in Divi è perfetto per i messaggi semplici. Ma se hai provato ad aggiungere il caricamento di file, a gestire i pagamenti o anche solo a salvare i moduli inviati nella tua dashboard di WordPress, probabilmente ti sei scontrato con i suoi limiti.

Divi 5 ha apportato miglioramenti concreti al modulo dei moduli, tra cui la logica condizionale e opzioni di personalizzazione più avanzate. Detto questo, il modulo integrato continua a non disporre di funzionalità fondamentali di cui la maggior parte dei siti web aziendali ha bisogno. Manca la possibilità di salvare i dati inseriti, l'elaborazione dei pagamenti e anche le funzionalità di protezione dallo spam sono limitate.

WPForms è un generatore di moduli dedicato per WordPress che colma tutte queste lacune e si integra direttamente in Divi tramite un modulo nativo. Avrai a disposizione un vero e proprio generatore drag-and-drop con funzionalità di creazione di moduli basate sull'intelligenza artificiale, oltre 2.100 modelli, e ogni modulo che crei verrà inserito direttamente nel visual builder di Divi tramite un semplice menu a tendina.

Crea un modulo di contatto Divi con WPForms! 🙂

Come creare un modulo di contatto Divi con WPForms

Di seguito illustrerò le principali differenze tra il modulo moduli di Divi e WPForms, per poi guidarvi passo passo attraverso l'intera procedura di configurazione, dall'installazione del plugin alla pubblicazione del modulo su una pagina Divi.

Ti mostrerò anche come personalizzare l'aspetto del modulo utilizzando i controlli di progettazione di Divi e ti illustrerò alcuni tipi di moduli avanzati che potrai creare una volta che tutto sarà collegato.

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

Il modulo del modulo di contatto di Divi gestisce abbastanza bene le funzioni di base. Se utilizzi Divi 5, hai a disposizione campi di testo, campi e-mail, menu a tendina e logica condizionale. Ma non appena hai bisogno di qualcosa che vada oltre la semplice raccolta di nome, e-mail e messaggio, i limiti iniziano a farsi sentire.

Non è possibile accettare il caricamento di file, non è prevista alcuna funzione integrata per l'elaborazione dei pagamenti e i moduli inviati vengono inoltrati direttamente via e-mail, senza alcuna possibilità di visualizzarli o gestirli all'interno di WordPress. Ecco un rapido confronto per evidenziare le differenze tra le due opzioni.

Se ti basta un semplice modulo di contatto con i campi «Nome, E-mail, Messaggio», il modulo di Divi è più che sufficiente. Ma per qualsiasi cosa più complessa, WPForms colma tutte queste lacune in un unico plugin, invece di costringerti ad aggiungere tre o quattro componenti aggiuntivi.

Passo 1: Installare il plugin WPForms

WPForms è un generatore di moduli "drag-and-drop" creato appositamente per WordPress. Include oltre 2.100 modelli di moduli che coprono ogni esigenza: dai moduli di contatto e di pagamento ai sondaggi, ai moduli di registrazione e ai moduli con calcolatrice.

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

Per un modulo di contatto di base, WPForms Lite (gratuito) è l'ideale per iniziare. Se hai bisogno di caricare file, utilizzare la logica condizionale o archiviare i dati inseriti, scegli il piano Pro.

Per iniziare, acquistate la licenza Pro. Quindi, installate WPForms sul vostro sito web. Se avete bisogno di aiuto, seguite queste istruzioni su come aggiungere un plugin a WordPress.

Passate subito a WPForms Pro! 🙂

Passaggio 2: Crea il tuo modulo di contatto Divi

Una volta attivato WPForms, vai su WPForms » Aggiungi nuovo per creare il tuo primo modulo. Hai due modi per iniziare. Il metodo tradizionale è la libreria dei modelli, che contiene centinaia di moduli predefiniti organizzati per categoria.

Cerca "Modulo di contatto semplice" e clicca su "Usa modello" per ottenere una base pulita con i campi Nome, E-mail e Commento/Messaggio già inseriti.

L'opzione più veloce è il generatore di moduli basato sull'intelligenza artificiale, che ti permette di descrivere le funzionalità del modulo, ad esempio: «Ho bisogno di un modulo di contatto con nome, e-mail, numero di telefono, un menu a tendina per il reparto e un campo per il messaggio», e WPForms lo crea per te.

L'IA è utile anche per popolare i campi a scelta multipla. Se aggiungi un menu a tendina con la domanda «Come ci hai conosciuti?» e non hai voglia di digitare tutte le opzioni, AI Choices genererà un elenco pertinente che potrai modificare.

Una volta inseriti i campi, il generatore "drag-and-drop" ti permette di riorganizzarli, rinominarli e configurarli in modo intuitivo. Puoi impostare i campi come desideri, aggiungere un testo di segnaposto, regolare le dimensioni dei campi e utilizzare la logica condizionale per mostrare o nascondere i campi in base alle scelte del visitatore.

Quando i campi sono pronti, clicca sulla scheda Impostazioni per configurare le notifiche del modulo. Qui puoi decidere a quale indirizzo e-mail inviare i moduli compilati e come deve apparire l'e-mail di notifica.

Prenditi un minuto per controllare queste impostazioni prima di pubblicare il post, perché l'impostazione predefinita invia le notifiche all'indirizzo e-mail di amministrazione di WordPress, che potrebbe non essere la casella di posta giusta.

Una cosa da tenere presente riguardo all'invio delle e-mail con WordPress. Di default, WordPress utilizza la funzione mail integrata in PHP, ma molti provider di hosting la bloccano o ne limitano la velocità.

Se ti è capitato che alcuni moduli inviati non siano mai arrivati nella tua casella di posta, questa è quasi sicuramente la causa. Il plugin WP Mail SMTP risolve il problema instradando le tue e-mail attraverso un server SMTP autenticato.

Ti consiglio di configurarlo prima che il modulo venga pubblicato, perché risolvere i problemi relativi alle e-mail mancanti a posteriori è frustrante. Quando tutto sembra a posto, clicca su «Salva» nell'angolo in alto a destra.

Passo 3: aprire il costruttore di Divi

Una volta creata la nuova pagina dei contatti (o la pagina in cui si desidera inserire il modulo di contatto), è necessario fare clic sul pulsante Edit With The Divi Builder per avviare il creatore di pagine di Divi WordPress.

Se si tratta di una pagina già esistente, potrebbe avere un aspetto leggermente diverso. In tal caso, basta cliccare su «Usa Divi Builder » per avviarlo. Entrambe le opzioni ti consentono di accedere allo stesso editor visivo.

Una volta aperto il costruttore, vi verrà chiesto il layout della vostra pagina.

Passo 4: Scegliere il layout della pagina del modulo di contatto di Divi

Una volta caricato il builder, clicca su "Inizia a costruire " per aprire una tela vuota. Divi ti chiederà di scegliere un layout di righe per la tua prima sezione. In questo caso, sceglierei la riga a colonna singola.

In questo modo il modulo di contatto occupa l'intera larghezza della pagina e mantiene l'attenzione del visitatore concentrata sulla sua compilazione, invece di frammentare il layout con altri contenuti che potrebbero distogliere l'attenzione.

Successivamente, apparirà una pagina vuota. Questo è il vostro spazio per creare! È così che deciderete come volete che sia la vostra pagina Divi e dove volete che sia il vostro modulo di contatto WPForms.

Verrà visualizzata una finestra pop-up che ti chiederà quale tipo di layout (basato su righe) desideri aggiungere alla tua pagina Divi. Per questo articolo, scegliamo la prima opzione.

In questo modo il modulo di contatto sarà l'unico "elemento" presente in quella riga, attirando così molta attenzione e incoraggiando le persone a compilarlo. Procedi e seleziona la prima opzione (la riga singola) per le tue righe.

Ora sarete invitati a inserire un modulo. Inseriamo il nostro fantastico modulo WPForms.

Passaggio 5: Inserisci il modulo WPForms per Divi

Questo passaggio è semplicissimo perché WPForms dispone di una propria integrazione con Divi e di un modulo per i moduli di contatto! Per aggiungerlo, cerca WPForms nella barra di ricerca e seleziona il modulo che compare.

Nella scheda "Contenuto ", seleziona il tuo modulo di contatto dal menu a tendina "Modulo". Qui sono elencati tutti i moduli che hai creato in WPForms.

È anche possibile attivare o disattivare il titolo e la descrizione del modulo, anche se la maggior parte degli utenti li disattiva per rendere la pagina più pulita.

Il modulo viene visualizzato immediatamente sulla pagina, così puoi vedere esattamente come si adatta al tuo layout prima della pubblicazione. Se tutto sembra a posto, clicca sul segno di spunta verde per salvare il modulo.

Ottimo lavoro, il tuo modulo di contatto è integrato e pronto all'uso. Ora puoi pubblicarlo proprio come faresti con qualsiasi altra pagina in Divi. Clicca sui tre puntini in fondo al page builder per visualizzare alcune impostazioni aggiuntive di Divi.

A questo punto, clicca sul pulsante "Pubblica" per visualizzarlo online. Il tuo modulo di contatto Divi è ora online. I moduli inviati verranno inoltrati sia alla tua email di notifica che alla dashboard "WPForms » Inserimenti ".

Da qui puoi visualizzare, cercare, aggiungere ai preferiti, esportare e gestire ogni modulo inviato direttamente da WordPress. Già solo questo rappresenta un notevole miglioramento rispetto al modulo integrato in Divi, che invia i moduli via e-mail e poi li fa sparire.

Andare oltre il semplice modulo di contatto

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

Moduli di pagamento e d'ordine

Puoi accettare pagamenti tramite Stripe, PayPal Commerce o Square direttamente da qualsiasi modulo. Ho visto freelance utilizzarlo per riscuotere anticipi sui progetti e piccole imprese per semplici moduli d'ordine con selettori di quantità e codici promozionali. Se gestisci un sito Divi per un'azienda di servizi, questo è uno degli aggiornamenti più pratici che puoi apportare.

Moduli per il caricamento dei file

WPForms include un campo modulo per il caricamento dei file con funzione drag-and-drop che supporta diversi tipi di file, l'acquisizione in tempo reale tramite fotocamera, limiti di dimensione configurabili e la sincronizzazione automatica con servizi di archiviazione cloud come Google Drive o Dropbox.

Il modulo integrato di Divi non offre alcuna possibilità di caricare file, il che è uno dei motivi principali per cui gli utenti di Divi finiscono per cercare un plugin per moduli separato.

Moduli di contatto in più fasi

I moduli lunghi con una dozzina di campi su un'unica pagina tendono a essere abbandonati. Con i moduli in più fasi, puoi suddividere quei campi su più pagine, aggiungendo una barra di avanzamento in modo che i visitatori vedano una sezione alla volta, più facile da gestire.

Ho preparato una guida completa su come creare un modulo in più fasi con interruzioni di pagina, indicatori di avanzamento e logica condizionale delle pagine, nel caso volessi approfondire la configurazione.

Moduli di sondaggio e di feedback

WPForms Pro include il punteggio NPS, campi con scala Likert e report interattivi dei sondaggi che forniscono un'analisi visiva dettagliata di ogni risposta.

Se raccogli i feedback dei clienti, conduci sondaggi sulla soddisfazione o svolgi ricerche di mercato su un sito basato su Divi, questo strumento elimina completamente la necessità di ricorrere a uno strumento di sondaggio separato.

Domande frequenti sui moduli di contatto Divi

WPForms e Divi sono una combinazione molto diffusa per la creazione di moduli in WordPress. Ecco le risposte alle domande più frequenti sul loro utilizzo combinato.

WPForms funziona con Divi 5?

Sì. WPForms dispone di un modulo nativo per Divi compatibile sia con Divi 4 che con Divi 5. Basta cercare WPForms nella libreria dei moduli di Divi, selezionare il modulo desiderato dal menu a tendina e questo verrà incorporato direttamente nel builder visivo. Non è necessario alcun intervento aggiuntivo per garantire la compatibilità con Divi 5.

WPForms è gratuito per Divi?

WPForms Lite è completamente gratuito e include il builder drag-and-drop, il generatore di moduli basato sull'intelligenza artificiale, le opzioni AI Choices, i pagamenti Stripe di base e la piena integrazione con i moduli Divi.

Puoi creare e integrare un modulo di contatto funzionante senza spendere nulla. Per funzionalità avanzate come il caricamento di file, la logica condizionale, la gestione dei dati inseriti e i moduli multipagina, i piani a pagamento partono da 49,50 $ all'anno.

Perché il mio modulo di contatto Divi non invia le e-mail?

WordPress utilizza di default la funzione mail integrata in PHP, ma molti provider di hosting la bloccano, ne limitano la velocità o la reindirizzano attraverso server che finiscono per attivare i filtri antispam sul lato ricevente.

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

Ora, porta i tuoi moduli Divi a un livello superiore

Ora che il tuo modulo di contatto Divi è attivo, potresti voler perfezionarne l'aspetto sul tuo sito. Consulta la nostra guida su come personalizzare i moduli di contatto in WordPress per scoprire come adattare il design del tuo modulo ai colori, ai caratteri e alla spaziatura del tuo tema Divi.

Se preferisci che il tuo modulo di contatto appaia come una finestra sovrapposta anziché in una pagina dedicata, ecco come creare un popup per il modulo di contatto in WordPress. In questo modo le tue pagine rimarranno pulite e il modulo sarà accessibile da qualsiasi pagina del tuo sito tramite un pulsante o un link.

Crea subito il tuo modulo di contatto Divi

Siete pronti a creare il vostro modulo? Iniziate oggi stesso con il più semplice plugin per la creazione di moduli per WordPress. WPForms Pro include molti modelli gratuiti e offre una garanzia di rimborso di 14 giorni.

Se questo articolo vi ha aiutato, seguiteci su Facebook e Twitter per altre guide e tutorial gratuiti su WordPress.