Guide

Crea form e moduli di contatto con il plugin Contact Form 7

Una guida completa su Contact Form 7, il miglior plugin per WordPress per creare form di contatto. Continua a leggere per scoprirne tutte le caratteristiche e funzionalità.

Vuoi iniziare ad usare Contact Form 7 per creare form e moduli di contatto? Sei nel posto giusto: qui troverai tutte le istruzioni per creare e personalizzare moduli di contatto belli e funzionali.

Plugin Contact Form 7

Contact Form 7 è in assoluto il plugin più popolare (e secondo me anche il migliore) per creare form di contatto.

Per installarlo, accedi alla tua Bacheca WordPress, quindi naviga in Plugin > Aggiungi nuovo e nel campo di ricerca digita il nome del plugin.

Seleziona quello che ha come autore Takayuki Miyoshi, installalo ed attivalo. Fatto questo, apparirà alla sinistra della tua bacheca la voce Contact.

Creare il tuo modulo di contatto con Contact Form 7

Webipedia corso sui moduli di contatto

Prima di proseguire, ti consiglio di dare un’occhiata al Video Corso per creare un form di contatto che abbiamo realizzato. Potrai approfondire tutti gli aspetti della creazione di un modulo di contatto semplice, intuitivo ed efficace, per rispondere ad ogni tua esigenza, con lezioni che potrai anche scaricare su ogni dispositivo.

Per iniziare ad usare Contact Form 7 e creare il tuo primo modulo di contatto, muovi il cursore sopra la voce Contact e seleziona Add New; quindi, scegli la lingua che vuoi utilizzare (se usi WordPress in italiano, questa sarà automaticamente la lingua di default) e prosegui alla schermata successiva. Qui, potrai iniziare a configurare il modulo di contatto vero e proprio.

Per prima cosa, assegna un titolo al form sostituendo la voce Senza titolo. Quindi, inizia a lavorare sui campi del modulo.

L’impostazione di default prevede 4 campi ed un pulsante, che nella maggior parte dei casi saranno sufficienti per un semplice form di contatto; questi sono: Nome, Email, Oggetto, Messaggio, e il pulsante Invia. Se desideri modificare il testo visualizzato sulla pagina, puoi semplicemente sostituire la scritta che trovi all’interno dei tag <p> e <br />.

Se i campi default di Contact Form 7 non sono sufficienti, potrai crearne altri personalizzati attraverso i pulsanti posizionati sopra il form. Alcuni di essi sono:

  • Text, nel quale l’utente potrà digitare informazioni sotto forma di testo semplice;
  • Email, per inserire un indirizzo email;
  • URL, per gli indirizzi web;
  • Tel, in cui inserire solo valori numerici;
  • Drop-down menu, ossia il menu a tendina con voci selezionabili;
  • CAPTCHA, per inserire un CAPTCHA che l’utente dovrà risolvere prima di inviare il form;
  • Submit button, cioè il pulsante per l’invio del modulo.

Ciascuno di questi campi ha delle proprietà specifiche che puoi configurare.

Per aggiungere un nuovo campo, seleziona una voce dalla lista che trovi sopra il form e posizionala dove preferisci rispetto alle voci già presenti. Vedrai un codice simile ad uno shortcode che puoi personalizzare. Dovrai inserire <p> prima del tag e </p> dopo.

Se vuoi inserire un titolo per il campo, scrivilo immediatamente dopo <p>. Per inserire un ritorno a capo dopo il titolo, scrivi <br />.

Configurare le opzioni di notifica di Contact Form 7

Quando hai finito di configurare il modulo di contatto, dovrai indicare l’indirizzo email al quale desideri ricevere i messaggi.

Vai sulla seconda tab Mail; qui, nel campo intitolato To inserisci il tuo indirizzo di posta elettronica.

Nel campo From, sarà inserito automaticamente il tag [your-name] <[your-email]>, che indica l’indirizzo email inserito dall’utente; in quello “Subject” invece [your-subject], cioè, l’oggetto del messaggio.

Puoi personalizzare il corpo del messaggio lavorando sul box Message Body, inserendo tutti i tag che ti servono di quelli utilizzati nel tuo modulo di contatto, in modo da ricevere notifiche che contengono tutte le informazioni di cui hai bisogno.

Tab di configurazione mail Contact form 7

Se trovi difficoltà nella configurazione del tuo messaggio, attiva l’Assistenza prioritaria e ti chiariremo ogni dubbio.

(Nota: se desideri personalizzare il messaggio di notifica aggiungendo tag personalizzati, assicurati di includere tra le parentesi quadre solo le 2 parole separate dal trattino; escludendo, quindi, la prima voce di sinistra – come text, email, textarea che è invece inclusa nei tag utilizzati per configurare il form vero e proprio)

Puoi anche aggiungere un secondo indirizzo email al quale ricevere le notifiche di contatto, compilando il campo Mail (2) nello stesso modo di quello precedente. Questo campo è utilizzato in genere come risponditore automatico, ma puoi usarlo come vuoi. Mail (2) viene inviata solo se Mail è stata inviata correttamente.

La sezione Additional headers ti permette, invece, di inserire i campi Cc, Bcc o Reply-To. Puoi usare un tuo indirizzo oppure un tag del form. Scrivine uno per riga in questo modo:

Cc: mia@email.it
Reply-To: [your-email]

Inserire i messaggi di risposta

La successiva tab della configurazione del modulo Contact Form 7, chiamata Messages, ti permette di inserire i messaggi automatici che appariranno al momento di invio del form.

Qui ci sono molti campi, personalizzabili per ogni eventualità. Per esempio, se un form contiene un errore non potrà essere inviato ma apparirà il messaggio che hai inserito.

Tab di modifica messaggi Contact form 7

Lavorare su questa sezione è molto facile: semplicemente, modifica il testo a tuo piacimento.

Impostazioni aggiuntive

L’ultima tab Additional settings permette di aggiungere dei codici per ottenere delle funzioni particolari, come permettere solo agli utenti loggati di poter inviare dei messaggi.

Quando hai finito di lavorare su tutti i campi, clicca Save; il tuo contact form sarà salvato e potrai inserirlo sulle tue pagine.

Aggiungere moduli di contatto nelle pagine e articoli

Salvato il form, sarà generato uno shortcode che potrai incollare su qualunque pagina o articolo tu voglia far apparire il modulo di contatto.

Semplicemente, inserisci lo shortcode e aggiorna la pagina; il contact form sarà subito visibile.

Inserire un modulo di contatto sulla sidebar

Sempre utilizzando lo stesso shortcode, potrai inserire il modulo di contatto che hai creato anche nella sidebar. Semplicemente, inserisci un widget di testo semplice ed incolla in esso lo shortcode.

Gestire i moduli di contatto salvati

In qualunque momento, puoi visualizzare e modificare tutti i moduli di contatto andando su Contact > Contact Forms.

Conclusione

In questa guida su Contact Form 7 hai imparato come creare un form di contatto, personalizzarne i campi ed inserirlo sia su post e pagina, che sulla sidebar.

Ti trovi bene con Contact Form 7?

Quale altro plugin di creazione di form di contatto vorresti suggerire?

Faccelo sapere nei commenti.

Altre guide della stessa
categoria

275 COMMENTI
Commenta
  1. Annalisa

    Salve, sto riscontrando un problema con la casella di spunta per la privacy sia per il modulo contatti (contact form 7) sia con la newsletter (mailpoet). Appare un rettangolo vuoto in entrambi i casi, ho pure disattivato i plugin per capire se potesse essere li il problema ma niente.
    Quale può essere il problema?

    Rispondi
  2. Chiara

    Ciao,
    mi è capitato che alcuni utenti compilassero il form sul mio sito, ma non è partita la mail atutomatica con i dati del form. Nel database i dati sono rimasti ma, me ne sono accorta molti giorni dopo… non c’è un modo per avere una notifica su wordpress ogni volta che qualcuno compila un form?

    Rispondi
  3. Vittoria

    Ciao Andrea,
    ho acquistato il dominio su siteground e sviluppato il sito in wordpress grazie alla vostra guida.
    Il mio problema è il seguente: ho creato una pagina sul sito nella quale i clienti possano inviare la loro richiesta (si tratta di un sito di un’agenzia immobiliare) attraverso contact form. Sulla mail mi arriva il loro messaggio ma come posso rispondere?? Non vedo indirizzi email, mi arriva esclusivamente il testo. Ecco come:

    “Da: [your-name]
    Oggetto: [your-subject]

    Corpo del messaggio:
    Buongiorno siamo due adulti e due bambini…..”

    Come si risponde? O è una funzione che non esiste ed è quindi errato il mio utilizzo del plug in contact form?

    Grazie mille!

    Rispondi
  4. Francesco

    BUONASERA ANDREA E GRAZIE PER LO SPLENDIDO E UTILISSIMO LAVORO. HO UN “PROBLEMA” CON I MENU’ A DISCESA: SE INSERISCO MOLTE OPZIONI IL CAMPO DAL FORM SPARISCE. MI SPIEGO, USO QUESTO MODULO PER INVIARE INFORMAZIONI CHE IMPLICANO UN MENU’ DI SCELTA MOLTO FORNITO, MA PURTROPPO, COME DETTO PRIMA, OLTRE UN CERTO NUMERO DI OPZIONI (17), IL CAMPO SUL FORM NON SI VEDE PIU’. E’ POSSIBILE AGGIRARE QUESTO LIMITE? GRAZIE ANCORA

    Rispondi
  5. Emilia

    Ciao Andrea. Intanto grazie per la guida, utilissima!
    Soltanto una cosa non mi è chiara. Come faccio a impostare una mail di risposta automatica a chi si iscrive? Ti spiego, sto utilizzando Contact Form 7, MailChimp e Popups per creare una campagna di coupon, e vorrei che ci fosse una risposta automatica al cui interno ci sia l’immagine del coupon sconto. Grazie in anticipo

    Rispondi
  6. Laura

    Ciao Andrea complimenti per l articolo.
    Vorrei chiederti come faccio a creare un form che, una volta compilato dall’ utente, gli consenta di scaricare in automatico un file mp3 o ricevere risposta automatica con l allegato comunque di circa 7 mega

    Rispondi
  7. Cristina

    Ciao, vi volevo chiedere come si può impostare l’oggetto del messaggio in contact form 7 in modo che non sia modificabile ma sempre lo stesso.
    Grazie :-)

    Rispondi
  8. Giorgio

    Ciao! Ho scaricato questo plug-in da qualche giorno, ho impostato tutto correttamente ma quando dalla form faccio invio nonostate mi venga detto che il messaggio sia stato inviato correttamente non arriva nessuna email sulla casella di posta impostata. La cosa mi succede su tutti i due i siti con cui sto lavorando.
    grazie anticipatamente.

    Rispondi
  9. FEDERICO DI IORIO

    Ciao Andrea ! Complimenti per tutti i tuoi post, mi hai salvato moltissime volte.

    Ho una domanda un po’ particolare.
    Devo realizzare in una sidebar un modulo con cf strutturato così :
    nella prima schermata una call to action che inviti l’utente a cliccare, una volta cliccata si attiva una seconda schermata dove invece della cta ci sono i due campi per fare la richiesta.

    Spero di essermi spiegato bene.
    Siete davvero forti ;)

    Rispondi
Mostra più commenti

Lascia qui il tuo commento

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