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

Impara ad usare il 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

Ricordati che abbiamo appositamente realizzato un Video Corso scontato per creare form di contatto, facile, intuitivo e molto efficace.

Potrai approfondire tutti gli aspetti della creazione di un modulo di contatto, 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, seleziona 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” presente di default. Quindi, inizia a lavorare sui campi del modulo.

Sono automaticamente presenti 4 campi ed un bottone, che nella maggior parte dei casi saranno sufficienti per un semplice form di contatto; questi sono: Nome, Email, Oggetto, Messaggio, ed il bottone “Invia”. Se desideri modificare il testo visibile sulla pagina, puoi semplicemente sostituire le voci che vedi all’interno dei tag <p> e <br />.

Se i campi default di Contact Form 7 non sono sufficienti, potrai crearne altri personalizzati aprendo il menu a tendina “Generate Tag” sulla destra della schermata; come vedi, ci sono molte opzioni:

Text field: per inserire un campo di testo semplice che l’utente potrà usare per digitare informazioni

Email: campo preimpostato per indirizzi email

URL: campo preimpostato per indirizzi web

Telephone number: per inserire un campo che riconosce solo valori numerici

Drop-down menu: menu a tendina con voci selezionabili

CAPTCHA: per inserire un CAPTCHA che l’utente dovrà risolvere prima di inviare il form

Submit button: bottone per l’invio del modulo

… e altri ancora.

Ogni tipologia di tag ha diverse opzioni di configurazione; quando hai finito di lavorare sulle impostazioni per il tag, cerca il campo con dicitura “Copy this code and paste it into the form left.” Qui, vedrai un codice similare ad uno shortcode: copialo ed incollalo nel campo di sinistra, posizionandolo dove vuoi che appaia rispetto alle voci già presenti. Ricorda di aggiungere <p> prima del tag e </p> dopo.

Se vuoi che il nuovo campo che hai creato abbia anche un titolo, dopo <p> digita il testo che hai inserito e fallo seguire da <br />; quindi, vai a capo.

Clicca play sul video qui sotto per vedere la demo della creazione di un nuovo campo su Contact Form 7.

Configurare le opzioni di notifica del form

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

Scorri verso il basso fino a raggiungere il box “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” che vedi sulla destra) inserendo qualunque dei tag che hai utilizzato nel tuo modulo di contatto, in modo da ricevere notifiche che contengono tutte le informazioni di cui hai bisogno.

(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)

Se desideri, puoi aggiungere un secondo indirizzo email al quale ricevere le notifiche di contatto, spuntando la voce “Mail (2)” e configurando il box nello stesso modo di quello precedente.

Nota: vedrai che nella sezione “Mail (2)” nel campo “To” è inserito automaticamente il tag [your-email]. Infatti, puoi usare il secondo campo Mail per inviare all’utente una copia del messaggio.

Inserire i messaggi di risposta

Infine, nell’ultima sezione della pagina di creazione del modulo Contact Form 7 (chiamata “Messages“) puoi 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.

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

Quando hai finito di lavorare su tutti i campi, scorri verso l’alto e 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.

Altre guide della stessa
categoria

272 COMMENTI
Commenta
  1. 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
  2. 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
  3. 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
  4. 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
  5. 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
  6. 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 *