Sei qui: Home 5 Wordpress 5 Come creare un form contatti su WordPress con un tema senza plugin

Come creare un form contatti su WordPress con un tema senza plugin

da | 7 Mag 2021 | 0 commenti

Hai realizzando un sito web in WordPress oppure ci stai pensando e giustamente ti stai informando su come creare un form contatti su WordPress.

Il modulo contatti è il principale strumento per acquisire i contatti dei potenziali clienti che vogliono informazioni relative ai tuoi prodotti e i tuoi servizi. Dunque, avrai compreso anche tu che non è un elemento facoltativo, ma rappresenta un must per tutti i siti web.

Per un lungo periodo creare un form contatti con WordPress non è stato così semplice, o meglio è secondo me è stato poco intuitivo: qualcuno utilizzava il codice, altri installavano dei plugin come Contact Form 7 che è ancora la prima scelta nella categoria dei plugin per contatti.

A mio avviso però, c’è un modo ancora più semplice e soprattutto immediato perché non vuole impazzire con le configurazioni e soprattutto vuole avere anche un buon margine per la personalizzazione del modulo.

Infatti, al di là del funzionamento del form contatti con il plugin c’è sempre da considerare un lato estetico che a mio avviso conta. Con l’arrivo dei page builder alcuni anni fa inserire un modulo per farti contattare è diventato molto semplice, il tempo di realizzazione si è ridotto a pochi minuti una volta che conosci i passaggi.

Di seguito te li spiego.

Form contatti: perché è così importante?

modulo contatti come crearlo

Quando visiti un sito web e vuoi maggiori informazioni la prima cosa che fai e cercare il modulo contatti proprio perché sai che è il principale modo per contattare il proprietario del sito.

Il form contatti è considerato un elemento essenziale fin dalla nascita dei primissimi siti web, quando la creazione di ogni singola pagina veniva fatta in codice.

Il numero di siti web era ovviamente molto basso e soltanto i programmatori si dedicavano alla creazione di siti web sotto commissione delle aziende, in primis perché era un mondo nuovo e sconosciuto e in secondo luogo perché risultava essere inaccessibile a causa delle competenze che era fondamentale avere.

Oggi, è rimasto lo stesso concetto per quanto riguarda il marketing, infatti a mio avviso così come accade per la maggior parte dei settori quando vuoi creare uno strumento di marketing come un sito web avvalersi di un consulente è importante per avere chiaro l’obiettivo e il percorso da compiere.

Strumenti di costruzione di siti web invece diventano sempre più accessibili agli utenti e negli anni si sono aggiornati e ampliati sempre di più. Questo è il caso anche dei moduli di contatto che in un primo momento potevano essere realizzati su WordPress con appositi plugin e inserimento di shortcode.

Ora ovviamente non esiste una regola precisa o fissa, per cui se tu ti trovi bene con un plugin come Contact Form 7 che è molto utilizzato e magari hai anche delle esigenze particolari può avere senso. Il senso di questo articolo (oltre che spiegarti come creare il tuo modulo) è anche quello di farti comprendere che esiste sempre un modo più semplificato per svolgere un’attività senza impazzire.

In questo articolo ti propongo qualcosa di diverso, l’inserimento di un modulo di contatto attraverso un apposito modulo che mette a disposizione il tema Premium che io utilizzo con maggiore frequenza che è Divi di Elegant themes.

Questo tema ti fa risparmiare diverso tempo perché ti permette di inserire all’interno delle pagine diversi moduli che avresti a disposizione soltanto con l’istallazione di numerosi plugin che andrebbero nel tempo a peggiorare le tue performance.

Un’altra cosa che ci tengo a dire è che per una questione di sicurezza e di privacy io preferisco sempre gestire i contatti dei miei clienti o di coloro che decidono di lasciarmi l’e-mail per la newsletter sempre in un luogo separato dal sito web.

Così, se per qualsiasi ragione il sito non dovesse essere disponibile o dovessi avere un problema tecnico ho sempre a disposizione la lista e non dipendo dall’accesso su WordPress o da un plugin.

Elementi da inserire nel modulo contatti

Gli elementi da inserire all’interno di un form contatti sono solitamente i seguenti:

  • Nome
  • Cognome
  • Email
  • Numero di telefono
  • Eventuale selezione del servizio
  • Flag del trattamento dati personali (ti ricordo che è obbligatorio)
  • Pulsante invia il messaggio 

Gli elementi differiscono anche in base alle tue scelte e a quello di cui ti occupi, per esempio potresti inserire anche semplicemente nome e email, evitando il numero di telefono o ancora inserirlo come facoltativo.

Stessa cosa per l’elenco dei servizi, personalmente preferisco inserire un modulo di contatto con pochi elementi, così che l’utente non debba compilare molti campi. La cosa migliore quando hai diversi servizi all’interno del tuo sito web e diversificare con più pagine, così che la persona possa compilare il modulo di contatto specifico per pagina.

Come creare un modulo contatti con un tema Premium

creare modulo di contatto con tema premium

Divi di Elegant themes mette a disposizione tutta una serie di moduli già pronti e che puoi personalizzare in un’area dedicata chiamata design.

Per darti un’idea nel momento in cui installi questo tema e abiliti il builder all’interno di una pagina puoi inserire:

  • Titoli
  • Paragrafi
  • Immagini
  • Video
  • Slider
  • Gallerie
  • Commenti
  • Email optin, dei box per lasciare nome e e-mail e far iscrivere gli utenti al tuo programma di e-mail marketing, come una newsletter. A differenza degli altri sistemi non avrai bisogno di plugin per il collegamento.
  • Mappe
  • Modulo testimonianze
  • Box per fare ricerca sul sito/blog
  • Tabelle prezzi
  • Pulsanti per seguire sui social media

E ovviamente il modulo di contatto.

inserisci modulo contatto divi

Ecco alcuni esempi di moduli di contatto creati in siti che utilizzano Divi di Elegant themes, sì perché la cosa bella è che oltre a tutti i moduli a disposizione ci sono anche tutta una serie di layout già pronti che poi utilizzare per le tue pagine web.

modulo contatti esempio divi
modulo contatti esempio divi 2
modulo contatti esempio divi 3
modulo contatti esempio divi 4
modulo contatti esempio divi 5
modulo contatti esempio divi 6

Per vederli puoi andare sul sito ufficiale di Divi, nel menù in alto seleziona layout library, così da vedere tutti i layout a disposizione con l’acquisto di Divi.

layouts library menu divi

Come personalizzare il modulo contatti

Come avviene per tutti i moduli Divi anche questo è suddiviso in tre sezioni:

  1. Contenuti: in cui inserisci elementi che faranno parte del form, come i campi e il sistema antispam.
  2. Design: in cui per andare a definire lo stile del modulo, quindi modificare il font, i colori, lo sfondo dei campi, i bordi, le ombreggiature e l’animazione.
  3. Avanzate: attribuisci se vuoi anche una classe CSS, così che tu possa fare ulteriori modifiche (ma le opzioni già presenti ti permettono già di spaziare).

Se hai bisogno che il modulo di contatto assolve una funzione particolare di seguito ti inserisco tutte le impostazioni che troverai all’interno del modulo di Divi.

Contenuti

Contenuti modulo contatti divi

In contenuti inserisci principalmente i campi del tuo modulo di contatti, i testi, imposti le e-mail, inserisci la protezione dallo spam, aggiungi un colore di sfondo all’intero modulo.

Per quanto riguarda la parte dei campi che penso sia quella più interessante, ogni campo può essere personalizzato inserendo l’ID e il nome che l’utente vedrà, io di solito per esempio per il campo nome utilizzo:

ID Campo: Name

Titolo: Nome

All’interno delle opzioni di campo e invece poi definire la tipologia di campo scegliendo tra:

  • Campo di inserimento, per esempio il nome, il cognome, il messaggio
  • Campo email
  • Area testo in cui l’utente ha la possibilità di inserire un testo
  • Casella di spunta che poi utilizzare anche per il flag per la privacy policy, impostazione che la maggior parte dei plugin non ha
  • Pulsanti radio
  • Selezione a tendina

Per ogni singolo campo poi definire se l’utente è obbligato a compilarlo o meno selezionando subito sotto campo obbligatorio. 

Nel caso in cui tu volessi inserire per esempio delle domande, potresti anche inserire una logica condizionale per la quale nel momento in cui l’utente seleziona un determinato campo gli appaiono altre scelte.

L’utilizzo dei pulsanti radio e della selezione a tendina trovo che sia molto utile per esempio per chi fornisce servizi e vuole che l’utente selezioni una tipologia di servizio, o ancora mi vengono in mente tutti quei form di contatto in cui sono presenti i budget. Un esempio è:

Qual è il tuo budget?  Selezione a tendina:

1000€-1500€

1500€-3000€

3000€-5000€

Design

design modulo contatti divi

Nell’area definita design puoi gestire sia il design complessivo dell’intero form contatti oppure ancora selezionare uno specifico campo e dare uno stile sempre nell’area design.

Ovviamente, il menù cambierai relazione della tua selezione, per cui se selezioni l’intero modulo avrei anche a disposizione la sezione campi, mentre se selezioni singolo campo modificherai solo il layout di quel campo.

Ecco le modifiche principali che puoi apportare al tuo modulo di contatto:

  • Colore di sfondo dei campi
  • Colore del testo dei campi
  • Colore di sfondo alla messa a fuoco
  • Colore del testo attivo
  • Spaziature e margini dei campi
  • Tipologia di font, selezionando il campo font avrai a disposizione centinaia di Google font disponibili in qualsiasi momento (senza bisogno di installare plugin o fare integrazioni)
  • Modificare lo stile del titolo e del captcha per la protezione dei dati
  • Cambiare lo stile del pulsante, modificando colore del testo, sfondo, dimensioni, aggiungere icone
  • Aggiungere ombreggiature particolari ai tuoi campi modificandone anche il colore
  • Aggiungere animazioni di dissolvenza, diapositiva, rimbalzo, ingrandimento, girevole, a piega e rotolo

 

Avanzate

avanzate modulo contatti divi

Oltre a poter aggiungere una classe CSS al modulo, una delle impostazioni più interessanti di questa sezione è quella della visibilità. Infatti, potresti inserire un modulo di contatto all’interno del tuo sito web disponibile soltanto per gli utenti che ti visitano da desktop e fare scelte diverse per gli utenti che invece ti visitano da mobile.

Fare un ragionamento in questo senso secondo me è intelligente perché vai a diversificare le esigenze dell’utente in base al tipo di dispositivo. Considera che tutti i moduli di devi possono essere resi invisibili in base al dispositivo.

Come riutilizzare il modulo contatti nelle altre pagine

Ora, facciamo finta che tu abbia creato il tuo perfetto modulo di contatto e voglio inserirlo all’interno di più pagine del tuo sito web. Niente di più semplice con Divi, infatti ti basta andare sulle impostazioni del modulo di contatto, cliccare sui tre punti e selezionare “Salva in libreria”.

salvare nella libreria modulo contatti divi

Una volta salvato il modulo quando creerai una nuova pagina potrai ripescarlo dalla libreria e inserirlo ovunque tu voglia.

Questa gestione degli elementi permette di risparmiare molto tempo e soprattutto di semplificare tutta una serie di attività che un tempo erano poco intuitive.

Per vedere un esempio all’opera puoi tranquillamente visitare le pagine principali del mio sito web, il modulo di contatto sostanzialmente è sempre lo stesso con qualche piccola modifica nelle impostazioni.

Conclusione

In questo articolo ti ho spiegato in modo semplificato come creare un modulo di contatto all’interno di un sito web di WordPress grazie al tema Divi di Elegant themes, se non hai ancora visitato il sito o stai ancora valutando quale scelta se migliore ti consiglio di leggere la mia Recensione completa su Divi.

All’interno della recensione ti spiego in dettaglio quali sono i moduli principali del tema e dunque come puoi utilizzarlo per creare un progetto in modo semplice e inserire qualsiasi elemento tu voglia nelle tue pagine.

E tu alla fine che cosa hai scelto?

Come hai inserito il tuo modulo di contatto?

Hai bisogno di qualche informazione in più sui form di contatto?

Scrivimi nei commenti, mi fa piacere darti un consiglio e leggere il tuo feedback in merito.

Un saluto,

Nadia

 

Nadia Kasa

Nadia Kasa

Blogger & SEO Specialist

Ciao! Ti do il benvenuto nel mio blog dove troverai tanti consigli su come creare un sito e soprattutto come farlo crescere grazie alla SEO, l’ottimizzazione per motori di ricerca.
Se hai bisogno di un alleato per posizionare il tuo sito dai un'occhiata al mio servizio di Consulenza SEO.

Vuoi Creare un Sito bello e funzionale?

Crealo in modo semplice con Divi

👉 Installa il Tema sul tuo sito con 2 clic

👉 Scegli la tua Grafica tra +100 Layout già pronti per tutti i settori

👉 Crea le pagine del sito web da zero in autonomia

Te lo consiglio se parti da zero, vuoi autonomia e semplicità.

P.S.: lo utilizzo per questo sito

Leggi anche questi articoli:

Hai qualche domanda? Lascia un commento.

Mi fa piacere rispondere alle tue domande e sapere cosa ne pensi dell’articolo, lascia un commento.

0 commenti

Invia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.