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à.

Plugin Contact Form 7

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.

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.

Se dovessi avere domande o avere bisogno di un supporto professionale, puoi attivare oggi stesso la nostra Assistenza Prioritaria rapida e gratuita - inclusiva di 32 video del Corso WordPress - quando acquisti uno spazio hosting su SiteGround (o altri hosting) tramite il nostro link. Migliaia di persone si sono già affidate a noi e possiamo aiutare rapidamente anche te.

Qui tutte le testimonianze

Creare il tuo modulo di contatto con Contact Form 7

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 />.

Approfondisco il discorso sull’uso di questi tag, per suddividere paragrafi e inserire interruzioni di riga, nel video corso HTML di base. Ti consiglio di seguirlo per poter affrontare al meglio piccole modifiche su WordPress di questo tipo.

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.

NOTA: Questa guida è stata pubblicata originariamente nell’Aprile 2017 ed è stata completamente riscritta e aggiornata per accuratezza e comprensibilità.

Altre guide della stessa
categoria

290 COMMENTI
Commenta
  1. Fabio

    Ciao Andrea,
    seguo spesso i tuoi tutorial ed i tuoi consigli e per questo ti chiedo un piccolo aiuto su un contact form:
    Ho creato un contact forma abbastanza semplice che a dire la verità “funziona” ma ho un problema non indifferente: una volta compilato il tutto quando premo su invia all’apparenza non succede nulla e non si capisce se il messaggio è stato inviato o meno poichè non mi compare nessuna scritta del tipo ” Il tuo messaggio è andato a buon fine” oppure “messaggio correttamente inviato”.
    Un attento utente potrebbe vedere che i campi precedentemente compilati non ci sono più e quindi qualcosa è “cambiato” una volta premuto sul tasto invia ma comunque non va bene.
    Per concludere i campi nella sezione “Mail” dovrebbero essere corretti poichè la mail effettivamente mi arriva ed anche la scheda “Messaggi” pare essere corretta.
    Da cosa può dipendere?

    P.s. se provo ad utilizzare un contact form basico(quello di default per intenderci) al posto di quello da me creato sulla stessa pagina questo mi genera la risposta “Il messaggio è stato correttamente inviato”.

    Help help help ed ancora help.
    Grazie mille del supporto.

    Rispondi
          • Fabio

            Grazie per la celere risposta,
            purtroppo ho risolto a metà poichè adesso il messaggio appare dove non vorrei apparisse.
            Nello specifico se lo inserisco solamente nella parte in basso (dove vorrei che apparisse) subito dopo il tasto invia non mi visualizza nulla mentre se lo inserisco all’inizio ed alla fine mi compare solo all’inizio. Com’è possibile la cosa?

            Indico di seguito il mio modulo se qualcuno volesse provare il contact:

            [response]

            Seleziona il pacchetto scelto (*)
            [select* menu-63 “Pacchetto Basic” “Pacchetto Silver” “Pacchetto Gold”]

            Tipologia struttura (*)
            [select* menu-163 “Bed&Breakfast” “Casa Vacanze” “Affittacamere” “Locazione breve” “Altro(specificare nei commenti la tipologia)”]

            La struttura è in un condominio? (*)
            [radio radio-158 label_first default:1 “Si” “No”]

            L’abitazione è nel Comune (*)
            [text* text-486]

            Indirizzo completo [Via, n°, CAP, Città] (*)
            [text* text-486]

            Nome (*)
            [text* text-nome]

            Cognome
            [text text-cognome]

            E-mail (*)
            [email* email-25]

            Telefono (*)
            [tel* tel-559 “+39 “]

            Maggiori dettagli della tua richiesta
            [textarea textarea-340 placeholder]

            Carica foto 1
            [file file-foto1 limit:15mb filetypes:jpg|png|jpeg|pdf|gif|]

            Carica foto 2
            [file file-foto2 limit:15mb filetypes:jpg|gif|jpeg|png|pdf|]

            Carica foto 3
            [file file-foto3 limit:15mb filetypes:jpg|png|jpeg|pdf|gif|]

            [acceptance acceptance-913]* Ho letto e accettato l’Informativa Privacy e autorizzo il trattamento dei miei dati personali nei termini consentiti dal D.Lgs. 30.6.2003 n. 196 (“Codice Privacy”) e dall’art. 13 Regolamento UE n. 2016/679 (“GDPR”) [/acceptance]

            [submit “Invia richiesta”]

            [response]

            Rispondi
  2. Alessia

    Ciao Andrea,
    grazie per la guida! Ho utilizzato contact form 7 per creare diversi moduli tra cui uno molto semplice in cui inserire nome e email per iscriversi alla newsletter. Ho notato però facendo alcune prove che posso inserire la stessa mail senza che il sistema avverta mi avverta che la mail è già presente nella lista degli iscritti. C’è un modo per stabilire che ogni mail può essere inserita u a sola volta? Oppure ho sbagliato qualcosa nella configurazione? Grazie in anticipo dei tuoi suggerimenti!

    Rispondi
      • Alessia

        Ciao Andrea,
        in realtà non ho ancora impostato nessuno strumento per gestire le newsletter e credo sia proprio questo il problema :-P Ho solo impostato un modulo del contact form e pensavo fosse sufficiente a prendere nota delle nuove iscrizioni. Ho letto diverse cose su MailChimp e ti chiedo a questo punto se può essere gestito fuori da WordPress per non appesantire il sito. Se avete già una guida che posso seguire sarei felice di leggerla! Grazie mille

        Rispondi
  3. 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
  4. 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
  5. 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
  6. 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
  7. 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
  8. 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
  9. 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
Mostra più commenti

Lascia qui il tuo commento

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