Guide

Creare 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

Contact Form 7 è il plugin ideale per creare 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.

Hai ancora qualche dubbio? Ti piacerebbe ricevere un supporto professionale?
La nostra Assistenza WordPress Prioritaria è quello che fa al caso tuo: è rapida, gratuita, e inclusiva di oltre 50 video per imparare ad usare WordPress se acquisti uno spazio hosting su SiteGround tramite il nostro link.

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.

Assistenza WordPress rapida e veloce con SOS WP

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 aggiornata il

Acquistare un dominio e un hosting WordPress con SiteGround

Altre guide della stessa
categoria

302 COMMENTI
Commenta
      • Lucio

        Per 5 anni contact form 7 ha lavorato egregiamente, ma dopo l’ultimo aggiornamento la posta non arriva più e trovo segnalato il seguente errore:
        La casella Subject viene cerchiata in rosso con la scritta “Configuration Error” seguita da un link ad un’altra pagina dove spiegano che scrivere Subject [Your-subject] non è più corretto, ma si deve scrivere qualche cosa prima di [Your Subject] per eliminare spazi vuoti o in alternativa aggiungere due righe di codice.
        Non ci ho capito un gran che, ma l’ho fatto ed effettivamente la segnalazione è sparita.
        Purtroppo però la posta non arriva lo stesso, ma questo potrebbe anche essere legato alla configurazione dei record SPF e DMARC che ho fatto per proteggermi da spoofing e spam.
        Probabilmente siamo in condizioni di equilibrio incerto: si tappa un buco e si apre una falla. Mah !
        Provate anche voi e casomai fatemi sapere.
        Cordiali saluti
        Lucio

        Rispondi
  1. Elena

    Ciao Andrea,
    sto utilizzando il contact form 7 su un sito e avrei la necessità di inserire due radio button uno per dare i consenso alla privacy e l’altro per negarla. L’ho fatto, però avrei la necessità quando l’utente clicca sul radio button “nega il consenso” di disabilitare il tasto invia. E’ possibile?

    Praticamente se l’utente non accetta la privacy la mail non può essere inviata.

    Grazie in anticipo

    Rispondi
    • Team

      Ciao Elena, in realtà il pulsante non dovrebbe funzionare di default se non è selezionato il consenso preventivamente da parte dell’utente. Hai già fatto qualche prova?

      Rispondi
      • Elena

        Ciao,
        si ho fatto delle prove sia con il pulsante di accettazione che con i radio button ed entrambi non soddisfano la mia esigenza.
        Mi spiego meglio, ho un text area con all’interno l’informativa della privacy e sotto due opzioni “do il consenso” e “nego il consenso”. Se l’utente clicca su do il consenso la mail deve partire se clicca su “nego il consenso” il tasto invia non deve essere cliccabile.

        Prova con radio button
        [radio radio-343 “ESPRIMO IL CONSENSO” “NON ESPRIMO IL CONSENSO”]
        anche se non esprimo consenso la mail parte

        Prova con pulsante accettazione
        [acceptance acceptance-187] acconsento [/acceptance]
        [acceptance acceptance-187 invert] non acconsento [/acceptance]

        Se clicco su “non acconsento” la mail non parte, ma il problema in questo caso è che posso flaggarli tutti e due, invece sarebbe più corretto che se seleziono uno in automatico si disattiva l’altro.

        Spero di essermi spiegata.
        Grazie

        Rispondi
        • Team

          Se li selezioni entrambi, il messaggio non dovrebbe partire. Per disattivare il bottone in automatico, quando una opzione è selezionata, si dovrebbe intervenire via codice.

          Rispondi
  2. Anna

    Ciao Andrea,
    ho un problema. Dopo aver creato il modulo di contatto ho fatto delle prove di invio ma mi esce la scritta “Si è verificato un errore durante l’invio del tuo messaggio. Per favore prova di nuovo”.
    Ho seguito passo passo le modifiche da fare ma non invia nulla. Dove ho sbagliato?

    Rispondi
  3. beatrice

    Ciao,
    ho creato un form con contact form 7 che genera una risposta automatica (utilizzando Mail2 nel riquadro mail).
    La risposta automatica funziona ma arriva troppe ore dopo la compilazione del form. Ho bisogno invece che generi una risposta automatica ed immediata.
    Avete qualche consiglio?

    Rispondi
  4. 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
  5. 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
  6. 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