Come personalizzare i moduli WordPress in Elementor

Un modulo di contatto è uno dei moduli più necessari sul tuo sito web e rimane il nostro modello di modulo più popolare.

Con WPForms e il builder di Elementor, puoi ottenere il controllo completo sullo stile, così puoi regolare tutto, dai colori e i font allo spazio e al layout.

In questo articolo, ti mostrerò come personalizzare i tuoi moduli WordPress preferiti in Elementor. Inoltre, presenterò alcuni dei nostri modelli di modulo più popolari che potresti voler ottenere per te.

Personalizza i moduli di WordPress in Elementor! :)

Come personalizzo un modulo in Elementor?

Personalizzare un modulo per il tuo sito web è un ottimo modo per mostrare il tuo marchio specifico, la personalizzazione e l'intento. E con i costruttori intuitivi offerti da WPForms ed Elementor, la personalizzazione è un gioco da ragazzi.

Installa e Attiva i Plugin

Va da sé che avrai bisogno sia di WPForms che di Elementor per seguire questi passaggi.

Ma lo diciamo comunque: assicurati di installare e attivare i plugin WPForms ed Elementor nella tua bacheca di WordPress.

Per istruzioni complete sull'installazione dei plugin sul tuo sito web, consulta questa utile guida.

Ora sei pronto per iniziare la personalizzazione. Ti mostreremo come farlo in Elementor, partendo dagli elementi essenziali necessari per un contatto di base. Poi, costruiremo su questi elementi (inteso il gioco di parole) per ogni esempio di modulo man mano che diventano un po' più complessi.

Vuoi ancora più ispirazione? Dai un'occhiata a questo approccio diverso per aggiungere e personalizzare i moduli di WordPress in Elementor.

Modulo di contatto

Un modulo di contatto è uno dei moduli più necessari sul tuo sito web e rimane il nostro modello di modulo più popolare.

Per creare un modulo di contatto con Elementor, naviga prima nella tua bacheca di WordPress. Fai clic su Pagine dalla barra laterale, quindi su Aggiungi nuova.

Quindi, fai clic sul pulsante blu Modifica con Elementor per caricare il page builder di Elementor, che ti consente di incorporare il tuo modulo di contatto e personalizzare vari elementi della pagina.

Ora si aprirà il page builder di Elementor, dove puoi trascinare e rilasciare tutti i tipi di blocchi ed elementi da includere in una pagina.

Trascina il blocco WPForms e rilascialo sulla pagina. Ora puoi selezionare un modulo da un menu a discesa qui, oppure puoi aggiungere un nuovo modulo.

Facciamo clic su + Nuovo Modulo per inserire il nostro modulo nel blocco.

Il builder di WPForms si caricherà in modo da poter personalizzare il modulo che desideri utilizzare in Elementor.

Innanzitutto, Dai un nome al tuo modulo digitando nella casella in alto sullo schermo. Noi chiameremo il nostro "Modulo di Contatto" in modo da sapere dove e come usarlo in seguito.

Quindi, Seleziona un modello dalla galleria per creare il tuo modulo.

Puoi usare un modello di modulo vuoto per creare il tuo modulo da zero, oppure puoi iniziare subito utilizzando un modello specifico predefinito con tutti i campi necessari per iniziare.

Per il nostro modulo di contatto, useremo un modello.

Puoi scorrere la pagina per sfogliare i modelli, oppure puoi cercare qualcosa di specifico. Cercare ad esempio un "Modulo di Contatto" ti mostrerà tutti i tipi di modelli di modulo di contatto tra cui scegliere.

Utilizzeremo il modello Modulo di contatto semplice per creare il nostro modulo.

Questo è uno dei nostri modelli di modulo più popolari, quindi ti consigliamo di utilizzarlo per goderne anche tu i vantaggi!

E, come sempre, questo modello di modulo è facile da personalizzare con campi e impostazioni aggiuntive. Fai semplicemente clic e tieni premuto sul campo desiderato e trascinalo sul tuo modulo. Quindi, fai clic sul campo per modificarlo.

Con il modello Modulo di contatto semplice, il tuo modulo raccoglie il nome del tuo utente, in modo da poter personalizzare qualsiasi corrispondenza con loro, e ti inoltra anche un messaggio o un commento da parte loro.

Un ulteriore elemento di personalizzazione da considerare sul tuo modulo è il messaggio di conferma che i tuoi utenti ricevono quando inviano il loro modulo. Naviga nella sezione Impostazioni del generatore di moduli e fai clic sulla scheda Conferme.

Qui puoi modificare il messaggio che appare sullo schermo dopo che l'utente del tuo modulo ha fatto clic su "Invia".

Sul nostro modello Modulo di contatto semplice, il messaggio di conferma dice: "Grazie per averci contattato! Ti contatteremo a breve."

Come nota, tutti i modelli di modulo che offriamo nella nostra galleria sono pronti all'uso con un Messaggio di conferma pertinente per i tuoi utenti, ma ti incoraggiamo a modificare questo messaggio come ritieni opportuno!

Al termine di qualsiasi personalizzazione del modulo, fai clic sul pulsante Salva in alto. Puoi chiudere il generatore di moduli facendo clic sulla X nell'angolo in alto a destra della finestra del generatore di moduli.

Ora, torneremo al generatore di pagine Elementor.

Con il nostro modello di modulo di contatto incorporato nella pagina, possiamo ora personalizzare gli stili del modulo.

Fai clic sulla scheda Stile per aprire tutte le opzioni del menu. Possiamo modificare lo stile dei campi, delle etichette, dei pulsanti e altro ancora.

Oppure, utilizza semplicemente uno dei tanti Temi forniti qui che hanno l'immagine di sfondo, i colori e altri stili predefiniti per te.

È un modo semplice per ottenere un aspetto coeso e personalizzato senza spendere troppi sforzi nello stile!

Sul nostro modulo, abbiamo utilizzato le impostazioni Stile del campo per aumentare il raggio e il colore del bordo con pochi clic.

Puoi vedere come un paio di rapide personalizzazioni abbiano un certo effetto sullo stile di questa pagina del modulo.

Che tipo di stile ti verrà in mente?

Assicurati di pubblicare la tua pagina del modulo quando hai finito di personalizzare gli stili del modulo.

Fai semplicemente clic sul pulsante Pubblica nella barra degli strumenti in basso.

Ora, costruiremo su questi passaggi per personalizzare altre pagine del modulo con Elementor.

Crea il tuo modulo di contatto in Elementor! :)

Modulo di iscrizione alla newsletter

Un altro tipo comune di modulo che potresti voler avere sul tuo sito web è un modulo di iscrizione alla newsletter.

Per personalizzare questo modulo in Elementor, inizierai con i primi passaggi sopra descritti: aggiungere e modificare una nuova pagina con Elementor, utilizzare il blocco WPForms per aggiungere un nuovo modulo e selezionare un modello da utilizzare per il modulo.

Poiché questo è un modulo che i visitatori del tuo sito utilizzeranno per iscriversi per ricevere newsletter da te, vorrai un modello che includa campi per raccogliere i loro nomi e indirizzi email.

Quindi, useremo il Modello di modulo di iscrizione alla newsletter.

Quindi, puoi usare il generatore di moduli per includere campi aggiuntivi come una casella di controllo dei termini e delle condizioni, CAPTCHA personalizzato per prevenire iscrizioni spam e persino funzionalità di geolocalizzazione.

Per quanto riguarda il messaggio di conferma, è ancora una volta gestito per te grazie al modello.

Come sempre, ti incoraggiamo a scrivere qualsiasi messaggio desideri che i tuoi nuovi iscritti ricevano. Nel frattempo, dice: "Grazie per esserti iscritto alla newsletter! Ti contatteremo presto."

Non dimenticare di salvare il tuo modulo di iscrizione alla newsletter ogni volta che hai finito, prima di uscire.

Quindi, di nuovo in Elementor, possiamo personalizzare ancora una volta lo stile del modulo. Questa volta, cambiamo gli Stili dei campi, gli Stili delle etichette e gli Stili dei pulsanti.

Procederemo a personalizzare gli Stili dei campi qui, come abbiamo fatto sul modulo di contatto sopra: aumentando il raggio del bordo a 10 pixel e cambiando il suo colore in nero.

Ora, concentriamoci anche sugli Stili delle etichette. Per rendere le etichette sul modulo più evidenti, aumenta la loro dimensione. Scegliamo anche un colore divertente da usare per i messaggi di errore. Puoi vedere questo colore utilizzato per gli asterischi sulle etichette dei campi.

Quindi, rivolgi la tua attenzione al pulsante di invio.

Come puoi vedere sul nostro modulo, abbiamo utilizzato gli Stili dei pulsanti per aumentare le dimensioni del pulsante, insieme ai colori dello sfondo e del bordo per abbinarli al resto della nostra stilizzazione.

E per ottenere una corrispondenza di colore perfetta, abbiamo semplicemente copiato il colore rosa che abbiamo scelto con il selettore di colori negli Stili delle etichette e lo abbiamo incollato nel selettore di colore dello sfondo per gli Stili dei pulsanti.

Successivamente, diventeremo ancora più creativi con tutte le opzioni di stilizzazione dei moduli in Elementor.

Crea un modulo di iscrizione alla newsletter in Elementor! :)

Modulo Registrazione Campo Estivo

I moduli di registrazione sono alcuni dei nostri modelli più richiesti, con i modelli di moduli per le registrazioni ai campi estivi che sono i più richiesti, di recente.

Salta la maggior parte dei passaggi che abbiamo già coperto qui e passiamo direttamente alla selezione di un modello di modulo da WPForms.

Per questo modulo, procedi e prendi il modello di modulo di registrazione al campo scout per ragazze dalla selezione nella nostra galleria.

Non ci preoccuperemo troppo di modificare i campi del modulo o il messaggio di conferma, anche se sei più che benvenuto a personalizzare il modello per soddisfare le esigenze della tua organizzazione.

Quindi, all'interno del page builder di Elementor, lavoreremo nelle impostazioni avanzate.

Questa scheda di impostazioni ci consente di fare molto in termini di stilizzazione con il blocco WPForms, inclusa l'immagine per uno sfondo personalizzato.

Fai clic sulla scheda Sfondo sotto le impostazioni Avanzate per creare il tuo sfondo. e assicurati che il Tipo di sfondo sia impostato su Classico.

Quindi puoi caricare un'immagine da utilizzare come sfondo visualizzato nel blocco WPForms.

Sebbene richieda una certa configurazione delle dimensioni dell'immagine di sfondo, della posizione e di altri elementi, questa funzionalità di personalizzazione vale lo sforzo.

Con il nostro esempio sopra, ad esempio, probabilmente vorremmo modificare i colori del testo, i margini e l'allineamento, e altri elementi del modulo prima della pubblicazione.

Crea un modulo di registrazione in Elementor! 🙂

Modulo Ordine Cliente

Non possiamo scrivere un articolo che presenti modelli di modulo e non menzionare i nostri modelli di modulo d'ordine.

Salta ancora una volta i passaggi che abbiamo già coperto e passa direttamente alle personalizzazioni. Per il nostro modulo qui, utilizzeremo il nostro modello di modulo d'ordine più popolare: il Modello di modulo d'ordine cliente.

Ora, torniamo alle impostazioni Avanzate del blocco WPForms. Rivediamo anche la scheda Sfondo, ma questa volta, il Tipo di sfondo è Gradiente.

Con le impostazioni Gradiente, puoi combinare qualsiasi tipo di accoppiamento di colori che ti venga in mente, che verrà applicato in un gradiente sullo sfondo del tuo modulo d'ordine.

Il risultato finale è sbalorditivo e le opzioni di personalizzazione sono infinite.

Ora, questo è solo un assaggio di tutte le opzioni di personalizzazione e stile che hai con WPForms ed Elementor. Quindi, assicurati di dare un'occhiata ai nostri ulteriori tutorial e articoli su Elementor.

Crea un modulo d'ordine in Elementor! 🙂

Domande frequenti su come personalizzare i moduli WordPress in Elementor

La personalizzazione dei moduli in Elementor è un argomento di interesse popolare tra i nostri lettori. Ecco le risposte ad alcune domande comuni al riguardo:

Ho bisogno di Elementor per WordPress?

Non è necessario disporre del plugin Elementor per il tuo sito WordPress, ma è incredibilmente utile.

Elementor è un plugin per la creazione di pagine che offre un'interfaccia drag-and-drop, rendendolo ideale per coloro che non hanno forti competenze di codifica o esperienza di progettazione. Offre una personalizzazione estesa, consentendoti di creare layout e design del sito web desiderati.

Quindi, averne bisogno per il tuo sito web WordPress dipende dai tuoi requisiti e preferenze specifici. Se hai familiarità con HTML, CSS e hai forti capacità di progettazione, potresti non aver bisogno di Elementor.

Elementor è disponibile sia in versione gratuita che premium, quindi puoi sempre iniziare con la versione gratuita e aggiornare se necessario, rendendolo adattabile alle tue esigenze.

Come personalizzo un modulo in WordPress?

Per personalizzare un modulo in WordPress, puoi usare WPForms con Elementor. Innanzitutto, crea il tuo modulo in WPForms, quindi apri l'editor di Elementor, aggiungi il widget WPForms e scegli il modulo che hai creato. Da lì, usa gli strumenti di progettazione di Elementor per modificare colori, font e layout per adattarli allo stile del tuo sito.

Come accedere ai moduli di Elementor?

Per accedere ai moduli di Elementor, aggiungi il widget WPForms nell'editor di Elementor. Apri una pagina in Elementor, trascina il widget WPForms sulla pagina e seleziona il modulo che desideri visualizzare. Questo ti consente di personalizzare l'aspetto del modulo direttamente in Elementor.

Successivamente, collega i moduli di Elementor a Google Sheets

Congratulazioni! Sei sulla buona strada per creare moduli fantastici in Elementor. Sebbene Elementor possa archiviare le tue voci del modulo all'interno della tua bacheca WordPress, ci sono momenti in cui potresti voler conservare una copia delle tue voci del modulo e dei lead in un foglio Google. Prova a collegare questi moduli a Google Sheets. 

Crea ora il tuo modulo WordPress

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.