fb-pixel
Logo Supporthost
Log in

Contact Form 7: la guida completa

Dicembre 16, 2020 / Pubblicato in:  da Ivan Messina
6 Commenti

In questa guida vedremo come usare Contact Form 7 dalle funzioni base alle più avanzate. Stiamo parlando di uno dei 5 plugin WordPress più usati.

Andremo a vedere come creare un form di contatto per permettere ai tuoi utenti di scriverti tramite email senza la necessità d'indicare il tuo indirizzo email e limitare quindi lo spam. Potrai inserire il form in modo semplice nella pagina contatti WordPress.

Cos'è Contact Form 7

Contact Form 7 è un plugin WordPress gratuito che ti permette di creare dei form invio email da inserire sul tuo sito web.

Un form di contatto altro non è che un modulo che un utente può compilare per contattarti, Il form di contatto sul nostro sito è stato creato con Contact Form 7.

Contact Form 7 Sul Nostro Sito Nella Pagina Contatti

Si tratta di un plugin molto flessibile che ti permette di creare form per WordPress di qualsiasi tipo, e inserirli in qualsiasi pagina tramite uno shortcode, un semplice codice per inserire il form all'interno di un post o di una pagina, come vedremo in questa guida.

Si tratta di uno tra i plugin più usati per WordPress con più di 5 milioni di installazioni attive.

Contact Form 7 Oltre 5 Milioni Di Installazioni

Oltre a questo, è possibile aggiungere delle funzionalità a Contact Form 7, tramite altri plugin, come vedremo più avanti in questa guida.

Pro e contro di un modulo di contatto

Avere un form di contatto nel tuo sito ha dei vantaggi e degli svantaggi. La domanda che devi farti è: voglio essere contattato oppure non lo voglio?

Se ad esempio gestisci un blog personale dove racconti le tue avventure e lo tieni per la tua famiglia potresti non volere che uno sconosciuto ti scriva. Se invece vendi un prodotto o servizio tramite il tuo blog allora la situazione cambia.

Vantaggi dei moduli di contatto

  • Dai la possibilità agli utenti di scriverti. Questo come dicevo è utile se vendi un servizio e un potenziale cliente vuole entrare in contatto con te prima di acquistare per chiederti delucidazioni.
  • Vedere un form di contatto dà fiducia ai tuoi utenti, che magari comprano prima di contattarti, ma sanno che se hanno un problema posso usare quel form.

Svantaggi dei moduli di contatto

  • Potresti iniziare a ricevere spam. Anzi, quasi sicuramente riceverai spam se non proteggi il tuo form come indico in questa guida.
  • Potresti ricevere molte richieste, anche non a tema, e a quel punto dovresti gestirle in qualche modo.

Consigli per un form di contatto migliore

Se inserisci un form di contatto sul tuo sito, vuoi che i tuoi utenti lo compilino ed entrino in contatto con te. Se il tuo form non rispetta certe regole ridurrai il numero di persone che compila il tuo form.

  • Usa il numero minore di campi possibile. Più campi chiedi di compilare nel tuo modulo e meno saranno le persone che lo compilano. L'essere umano è pigro, cerca di rendere la vita facile ai tuoi utenti.
  • Non chiedere il numero di telefono, o almeno non renderlo obbligatorio. Molti sono restii a lasciare il numero di telefono, che è un dato molto personale.
  • Personalizza il testo del bottone invia. Prova a testare diverse versioni del testo del tuo bottone in base a quello che offri col tuo form.

Installare Contact Form 7

Installare Contact Form 7 è facilissimo. Accedi alla dashboard di WordPress e nella sidebar a sinistra clicca su Plugin -> Aggiungi nuovo (o Add New).

Puoi cercare il plugin usando il box di ricerca a destra, oppure cliccare in alto per vedere i plugin più popolari. Come vedi Contact Form 7 è il primo plugin della lista.

Installazione Contact Form 7

Clicca sul bottone installa adesso per installare il plugin. Una volta terminata l'installazione il bottone cambierà il testo, diventando "Attiva".

Attiva Contact Form 7

Clicca su attiva per attivare il plugin e abbiamo fatto. Facile no?

Adesso inizia la parte più divertente, creare il form e aggiungerlo alla nostra pagina di contatto.

Crea un form di contatto base

Adesso che il plugin è installato, nella sidebar vediamo una nuova voce:

Contact Form 7 Menu

Cliccando su contatto vediamo i vari form creati, dal momento che abbiamo appena installato il plugin non abbiamo alcun form, ma vediamo il form di esempio che Contact Form 7 crea durante l'installazione.

Moduli Di Contatto

Questo modulo è già buono per essere usato così com'è. Ma lo andremo a modificare per capire meglio come funziona il plugin e per personalizzare il modulo in base alle nostre esigenze.

Clicchiamo sul nome del modulo per modificarlo.

Contact Form 7 Tabs E Shortcode

Sotto al titolo, che possiamo modificare a nostro piacimento, vediamo lo shortcode per aggiungere il modulo nella nostra pagina dei contatti, all'interno di un box azzurro.

Sotto vediamo 4 tab, tramite i quali possiamo personalizzare il nostro modulo di contatto.

Il tab Modulo: modifichiamo il form

Partiamo dal tab Modulo, che ci permette di modificare il codice HTML del form. Da qui possiamo aggiungere o modificare i campi del form e modificarne il testo.

Contact Form 7 Tab Modulo

Come vedi questo è il codice del form, un misto di HTML e shortcodes.

Col form di default di Contact Form 7 chiedi ai tuoi utenti il nome, l'email, l'oggetto ed il testo del messaggio. Poi vedono un bottone per inviare il messaggio. In questo campo puoi aggiungere HTML e JavaScript.

Da questa schermata possiamo aggiungere i vari campi di cui abbiamo bisogno. Sarà necessario posizionale il cursore del mouse dove vogliamo inserire il nuovo campo, quindi cliccare su uno dei bottoni in alto.

I campi che possiamo inserire sono:

  • Testo: Aggiunge un campo di testo di una riga per richiedere un dato come nome e cognome.
  • Email: Aggiunge un campo di una riga per una email (controlla che l'email sia valida).
  • Url: Aggiunge un campo di una riga per richiedere un url e controlla che sia un url valido.
  • Telefono: Aggiunge un campo per il numero di telefono.
  • Numero: Aggiunge un campo per un numero, controlla che sia un numero e non ci siano altri caratteri.
  • Data: Aggiunge un campo per selezionare una data da un calendario.
  • Area di testo: Aggiunge un'area di testo di più righe, questo è il campo usato comunemente per il corpo del messaggio.
  • Menu a discesa: Aggiunge un campo select con opzioni predefinite.
  • Caselle di controllo: Aggiunge delle caselle da spuntare, per una selezione si/no.
  • Pulsanti di opzione: Aggiunge dei bottoni HTML radio, l'utente può selezionare un'opzione.
  • Accettazione: Aggiunge una casella per l'accettazione.
  • Quiz: Aggiunge delle domande con delle risposte predefinite da noi.
  • File: Aggiunge una sezione per caricare un file.
  • Invia: Aggiunge un pulsante per compilare e inviare il modulo.

Vediamoli uno a uno.

Campo di testo

Facendo click su testo comparirà una finestra in cui potremo personalizzare questa sezione del modulo. Se vogliamo creare ad esempio il campo di inserimento del "nome" possiamo usare le impostazioni mostrate qui sotto.

Contact Form Testo

Con le impostazioni che abbiamo scelto avremo questo shortcode:

[text* text-169 id:nome class:nome placeholder "Il tuo nome"]

Email

Il campo email ci permette di impostare una casella in cui gli utenti andranno ad inserire il loro indirizzo di posta. Rispetto al classico campo di testo, questo servirà a verificare che l'email sia scritta nel formato corretto.

Contact Form Email

Ecco lo shortcode ottenuto con le nostre impostazioni:

[email* email-475 id:email class:email placeholder "La tua email"]

Url

Anche in questo caso rispetto al campo di testo, l'utilizzo del campo url farà sì che avvenga un controllo per verificare che il formato dell'indirizzo inserito sia quello corretto.

Contact Form Url

In questo caso non c'è bisogno di impostare il campo come obbligatorio. Ecco lo shortcode che otteniamo:

[url url-527 id:sito class:sito placeholder "Il tuo sito web"]

Telefono

Così come nei campi precedenti, anche in questo caso è meglio utilizzare il campo specifico per numeri di telefono anziché semplicemente quello di testo.

Contact Form Tel

Come ti dicevo prima, è meglio non rendere obbligatorio questo campo, perché non tutti saranno disposti a inserire il proprio numero.

Il nostro shortcode con le impostazioni che vedi nella schermata qui sopra: è questo:

[tel tel-423 id:telefono class:telefono placeholder "Il tuo numero di telefono"]

Numero

Con questo campo puoi assicurarti che il carattere inserito sia un numero e non vengano, quindi, inseriti caratteri differenti.

Contact Form Numero

Puoi anche scegliere se impostare un intervallo all'interno del quale deve essere compreso il numero. Ad esempio nel nostro caso abbiamo usato l'intervallo 1-100. Ecco lo shortcode:

[number number-767 min:1 max:100 placeholder "Inserisci un numero"]

Data

Questo campo può essere utile nel caso in cui si voglia dare all'utente la possibilità di fissare un appuntamento o una data in cui essere ricontattato. In questo caso possiamo impostare anche un intervallo di date, come vedi qui sotto:

Contact Form Data

Ecco lo shortcode che otteniamo:

[date date-453 min:2020-12-07 max:2020-12-12 id:data class:data "Fissa un appuntamento"]

Se vogliamo aggiungere del testo che faccia capire all'utente cosa deve fare possiamo aggiungere un'etichetta (label). In questo caso nel modulo ci basterà aggiungere <label> Fissa un appuntamento </label> per ottenere questo risultato:

Data Con Etichetta Contact Form 7

Come vedi in questo caso il mese e l'anno sono già fissati perché abbiamo scelto un intervallo di date ristretto, ma naturalmente puoi scegliere l'intervallo che decidi tu.

Area di testo

Attraverso il campo di testo i tuoi utenti potranno inserire una sola riga di testo. Se hai bisogno di più righe, ad esempio per far aggiungere un messaggio o una richiesta il campo che devi usare è proprio l'area di testo.

Contact Form Area Di Testo

Il nostro shortcode:

[textarea textarea-283 id:messaggio class:messaggio "Il tuo messaggio"]

Menu a discesa

Tra i campi potresti anche scegliere di inserire un menu a discesa con delle opzioni predefinite. In questo caso abbiamo creato un menu a discesa in modo da mostrare tre opzioni. Il numero puoi sceglierlo tu, dipende dal numero di righe che scrivi: ogni riga corrisponde ad un'opzione del menu.

Contact Form Menu A Discesa

Lo shortcode che otteniamo con l'esempio qui sopra è questo:

[select menu-405 id:menu class:menu multiple "Opzione 1" "Opzione 2" "Opzione 3"]

Caselle di controllo

Un'alternativa alle opzioni del menu a discesa può essere utilizzare le caselle di controllo. Ad esempio potresti inserire nel tuo form delle caselle 'Si' e 'No'.

In questo caso, oltre a inserire le opzioni (che possono essere anche più di due) puoi scegliere se Rendere esclusive le caselle di controllo. Come abbiamo fatto noi in questo esempio:

Contact Form Caselle Di Controllo

Ecco il nostro shortcode:

[checkbox checkbox-805 id:casella class:casella use_label_element exclusive "Si " "No"]

Pulsanti di opzione

Rispetto ai menu a discesa ed alle caselle di controllo che abbiamo appena visto, se usi i Pulsanti di opzione, l'utente potrà scegliere solo una delle opzioni disponibili.

Contact Form Pulsanti Opzione

In questo caso abbiamo inserito quattro diverse scelte, come vedi anche nel nostro shortcode:

[radio radio-38 id:opzioni class:opzioni use_label_element default:1 "Scelta 1" "Scelta 2" "Scelta 3" "Scelta 4"]

Accettazione

Questo campo ti permette di inserire una casella da spuntare, ad esempio per accettare i termini sulla privacy, come ti spiegherò più avanti in questa guida nel capitolo su come adeguare Contact Form 7 al GDPR.

Contact Form Accettazione

Puoi scegliere se rendere la casella facoltativa, nel caso che vedi in esempio sarà necessario spuntare la casella perché è stata impostata come obbligatoria. Ecco, infatti, lo shortcode che otteniamo:

[acceptance acceptance-299 id:termini class:termini] Accetta termini e condizioni [/acceptance]

Quiz

Nel tuo modulo puoi anche creare un piccolo quiz, ti basta specificare domanda e risposta, ecco un esempio:

Contact Form Quiz

Come vedi devi separare in questo modo domanda e risposta: Domanda | Risposta. Puoi anche inserire più di una domanda (nel nostro caso è solo una) ed ecco lo shortcode che otteniamo:

[quiz quiz-309 id:quiz class:quiz "Sai con quale plugin è stato creato questo form? | Contact form 7"]

File

Nel tuo form di contatto potresti voler aggiungere la possibilità di allegare un file, come ad esempio un pdf, oppure un'immagine, ma anche file audio e video.

In questo caso possiamo scegliere se impostare un limite massimo per le immagini, che di default è impostato a 1 MB. E poi anche la tipologia di file che è possibile caricare.

Puoi anche decidere di non impostare limitazioni e consentire tutti i file accettati di default, ovvero: jpg, jpeg, png, gif, pdf, doc, docx, ppt, pptx, odt, avi, ogg, m4a, mov, mp3, mp4, mpg, wav e wmv.

Nel nostro caso abbiamo lasciato il limite di default e scelto di consentire solo i file in jpg, png e pdf. Ciò significa che quando l'utente caricherà il file potrà farlo solo se è in uno di questi tre formati.

Contact Form File Allegati

Ecco il nostro shortcode:

[file file-570 filetypes:jpg|png|pdf id:file class:file]

Invia

Ti consente semplicemente di impostare il tasto di invio del form con il testo che vuoi. Ti basta inserirlo nel campo Etichetta, come vedi in questa schermata:

Contact Form Invia

Ecco lo shortcode corrispondente alle impostazioni che vedi nella schermata:

[submit id:invio class:invio "Invia i miei dati"]

Usare i placeholder e le etichette

Come avrai notato nei paragrafi precedenti, in alcuni campi puoi inserire dei placeholder. Questi non sono altro che dei segnaposto con del testo che compariranno nel campo prima che venga riempito con i dati richiesti.

Ecco come apparirà un modulo di contatto di esempio:

Form Di Contatto Con Contact Form 7

Puoi vedere come nei diversi campi in cui abbiamo utilizzato i placeholder compare il testo che ti indica quali dati inserire. Ad esempio "Il tuo nome", "La tua email" e così via. Il testo inserito dall'utente quando andrà a riempire i diversi campi, andrà a sostituire il testo usato come segnaposto.

Se, invece, vuoi aggiungere del testo che preceda il campo e fornisca delle indicazioni all'utente, dovrai aggiungere un'etichetta.

Per farlo ti basterà scrivere nel modulo

<label> Testo [shortcode] </label>

Ecco un esempio:

Placeholder E Etichetta
1: Etichetta 2: Placeholder

In questo caso abbiamo usato un'etichetta con scritto 'Nome' prima del campo di testo corrispondente, così:

<label> Nome [text* text-645 id:nome class:nome placeholder "Il tuo nome"] </label>

In alternativa, se vuoi inserire una semplice riga di testo che preceda il campo da compilare, ti basta scriverla direttamente nel modulo. Ricorda che puoi usare anche la formattazione HTML per il grassetto, e così via.

Ecco il risultato che ottieni ad esempio inserendo una riga di testo in grassetto:

Riga Testo Formattato Html

Il tab Mail: personalizziamo la mail inviata

Adesso clicchiamo sul secondo tab, il tab Mail.

In questa sezione possiamo impostare il testo e i dettagli della mail che viene inviata dopo che viene compilato il form creato con Contact Form 7.

Contact Form 7 Tab Mail

La sezione include vari campi, che puoi lasciare in questo modo oppure modificarli a piacimento. Vediamoli uno per uno.

Campo "A"

Nel campo "A" puoi inserire un tuo indirizzo personale, se lasci il valore di default la mail viene inviata all'indirizzo che hai usato per installare WordPress. Assicurati, quindi, che l'indirizzo di posta che hai usato sia valido.

Campo "Da"

Nel campo "Da" consigliamo di usare una email di default. Nello screenshot sopra vedi un indirizzo cf7.local perché ho usato local per installare WordPress in locale. Se usi SMTP per inviare le email di WordPress, cosa di cui parlerò in seguito in questo articolo, puoi usare un altro indirizzo.

Nelle FAQ di Contact Form 7 leggiamo:

Per esempio, se una mail avesse "[email protected]" nel campo Da, ma fosse stata effettivamente inviata dal vostro server web (non è yahoo.com), sarebbe altamente possibile che i server di posta elettronica la considerino come un indirizzo falsificato. Se si utilizza un indirizzo e-mail nello stesso dominio del sito, si può ridurre il rischio di essere trattati in questo modo.

Ovviamente se la mail viene inviata da un tuo indirizzo, quando dal client di posta clicchi su rispondi risponderesti a te stesso. Per questo motivo devi assicurarti di non cancellare questo testo dal campo Intestazioni aggiuntive:

Reply-To: [your-email]

Campo "Oggetto"

Questo sarà l'oggetto che verrà impostato nelle mal che riceverai. Di default l'oggetto include il nome del sito e poi preleva le informazioni inserite nel modulo, dal tag your-subject.

Se però, modifichi il modulo e non vuoi inserire un campo in cui gli utenti inseriscano l'oggetto, puoi cambiare questa impostazione.

Ad esempio potresti fare in modo di visualizzare nell'oggetto il nome di chi ha compilato il form, in questo modo: [_site_title] "[tuo-nome]".

Ricordati che tra le virgolette deve essere presente il nome del tag (in questo caso tuo-nome) che hai utilizzato nel modulo. In questo nostro esempio, quindi, nel modulo dovremo avere un campo che corrisponda, come questo:

[text* tuo-nome id:nome class:nome placeholder "Il tuo nome"]

Campo "Corpo del messaggio"

Il corpo del messaggio è quello che riceverai nel testo della mail quando uno dei tuoi utenti compila e invia il form.

Anche in questo caso devi fare riferimento ai tag che hai utilizzato nel modulo. Se hai cambiato i tag rispetto a quelli predefiniti, infatti, dovrai cambiarli in modo che corrispondano.

Con le nostre impostazioni avremo ad esempio questo:

Da: [text-169] <[email-475]>
Corpo del messaggio:
[textarea-283]
--
Questa e-mail è stata inviata da un modulo di contatto su [_site_title]([_site_url])

Naturalmente puoi prelevare anche gli altri campi in base a quelli che richiedi nel form.

Contact Form 7 Tab Mail

Se controlli in alto i vari shortcode (i codici tra le parentesi quadre) sono in grigio, ma [checkbox-541] è in nero. Questo sta a indicare che non stai usando questo codice in nessun campo. Se vuoi puoi aggiungerlo con un copia-incolla al testo della tua email, per avere conferma che questa casella di controllo sia stata spuntata dall'utente durante la compilazione.

Campo "File allegati"

Se hai inserito nel tuo form anche un'opzione per allegare dei file dovrai inserire in questo campo il tag che hai utilizzato.

Nel nostro caso era file-570 e dovrai, quindi inserirlo in questo modo:

File Allegati

Così facendo potrai ricevere per email gli allegati caricati dagli utenti durante la fase di compilazione del modulo.

Opzione Mail (2)

Scorrendo in basso vedi l'opzione Mail (2).

Contact Form 7 Mail Autoresponder

Se selezioni questa opzione puoi impostare Contact Form 7 per inviare una email di conferma al tuo utente, per dargli la sicurezza che il form è stato compilato correttamente.

Il tab Messaggi

In questa sezione puoi configurare Contact Form 7 impostando i messaggi che vede il cliente quando compila il form. Se stai creando un form di contatto non hai bisogno di modificarli dal momento che sono piuttosto accurati, ma se stai usando il form con altri scopi potresti voler rivedere le parole in modo che abbiamo più senso.

Ad esempio potresti voler usare il form per un quiz, durante il quale chiedi al tuo utente anche dei dati personali. In questo caso invece di mostrare un messaggio di successo che recita:

Grazie per il tuo messaggio. È stato inviato.

Potresti voler cambiare il messaggio con qualcosa che faccia riferimento al quiz che ha appena terminato di completare.

Il tab Impostazioni aggiuntive

Questo tab è quello più avanzato e quello che più raramente andrai a utilizzare, ma non per questo meno importante.

In questo tab hai un'area di testo dove puoi inserire alcune opzioni. vediamo quali sono le opzioni disponibili. Per una descrizione più dettagliata controlla qui (in inglese).

Le impostazioni disponibili sono le seguenti:

subscribers_only: true

Se usi questa opzione soltanto gli utenti loggati potranno inviare il form. Gli utenti che non hanno fatto il login riceveranno un messaggio di errore che gli indica che devono effettuare il login. se usi questa opzione nel form non sarà usato alcun antispam, dal momento che si suppone che tutti gli utenti iscritti possono usare il form senza restrizioni.

demo_mode: on

Se usi questa opzione nessuna email sarà inviata, e se usi un plugin aggiuntivo come Flamingo, i dati inviati non saranno salvati. L'utente vedrà il messaggio di conferma normalmente. Può essere utile per eseguire dei test.

skip_mail: on

Usando questa opzione Contact Form 7 non invierà alcuna email ma eseguirà tutte le altre azioni correttamente (ad esempio se usi Flamingo salverà i dati del form). Noi abbiamo questa opzione attiva nel form dal momento che, come vedremo tra poco, inviamo il risultato del form tramite API al nostro software per la gestione dei ticket.

do_not_store: true

Se usi Flamingo puoi usare questa opzione per indicare a Flamingo di non salvare i dati per questo form.

on_sent_ok: "alert('sent ok');"
on_submit: "alert('submit');"

Se necessario puoi inserire un codice JavaScript. Il codice JavaScript deve essere di una sola linea, e viene chiamato nel caso in cui il form sia inviato correttamente o quando si preme il bottone per inviare il form.

Aggiungi il form nella pagina dei contatti

Adesso che abbiamo il form pronto e, si spera, funzionante possiamo aggiungerlo alla nostra pagina dei contatti.

Questa parte è facilissima. Come dicevo, nella pagina della modifica del form di Contact Form 7, nella sezione azzurra vediamo un codice racchiuso tra due parentesi quadre. Questo tipo di codice si chiama shortcode in WordPress.

Copiamo questo codice, incluse le parentesi quadre, e lo incolliamo all'interno della nostra pagina dei contatti, nel punto dove vogliamo mostrare il codice del form. Salviamo la pagina.

Adesso possiamo visitare la pagina per vedere come si vede. Se non ci piace possiamo modificare il codice HTML del form oppure modificare il codice CSS, entrambi argomenti estesi che non è possibile trattare in questa guida.

Adesso abbiamo un form funzionante nella nostra pagina contatti. Chiunque potrebbe però compilarlo e inviarlo e riempirci di spam. Vediamo quindi come fare per proteggere il nostro form.

Proteggere Contact Form 7 dallo spam

Questo è un problema comune, dal quale bisogna proteggersi se non vogliamo essere sommersi da migliaia di email inutili.

Usando Contact Form7 è facile proteggersi. Nel menu laterale andiamo su Contatto -> Integrazione ed impostiamo l'integrazione con reCAPTCHA di Google (un codice CAPTCHA tra i più diffusi).

Contact Form 7 Integrazione

Creare una chiave API reCAPTCHA

Dobbiamo visitare google recaptcha e compilare i campi richiesti.

Contact Form 7 Google Recaptcha

Nell'etichetta inseriamo il dominio del nostro sito, scegliamo la versione di reCAPTCHA da usare, la v3 è meno fastidiosa e quella che ti consiglio di usare. Aggiungiamo il nome del nostro dominio o dei nostri domini e accettiamo termini.

Scorriamo verso il basso e premiamo invio. Nella prossima schermata vediamo le chiavi API.

Contact Form 7 Recaptcha Chiavi

A questo punto copiamo le chiavi e le inseriamo nella pagina integrazione di Contact Form 7 e salviamo.

Se visiti adesso la tua pagina contenente il form in basso a destra vedi il logo della protezione v3 di Google reCAPTCHA.

Google Recaptcha V3

Il problema è che lo vediamo su tutte le pagine. Questo è un problema comune che impatta anche sulle prestazioni, vediamo come risolvere.

Contact Form 7 e prestazioni

In un mio articolo parlo di come velocizzare WordPress e spiego che uno dei problemi di Contact Form 7 è quello che carica un file CSS e d un file js in tutte le pagine.

È vero che si tratta di soli due files, per giunta di piccole dimensioni, ma resta il fatto che se non servono a niente possiamo evitare di caricarli e migliorare le prestazioni del nostro sito.

In quell'articolo spiego come evitare questo, disabilitando il caricamento di quei files con un plugin chiamato WP Asset Cleanup. Fai riferimento a quell'articolo per le istruzioni dettagliate su come fare.

Evitando il caricamento del file JavaScript di Contact Form 7 elimini automaticamente su tutte le pagine dove non serve Google reCAPTCHA V3, eliminando così quell'icona in basso a destra in tutte le pagine, tranne ovviamente la pagina di contatto.

Esiste un altro sistema, più manuale, per rimuovere tali files. Puoi inserire nel file functions.php del tuo sito WordPress questo codice:

add_action( 'wp_print_scripts', 'deregister_cf7_javascript', 100 );
function deregister_cf7_javascript() {
  if ( !is_page(array(8,10)) ) {
    wp_deregister_script( 'contact-form-7' );
  }
}
add_action( 'wp_print_styles', 'deregister_cf7_styles', 100 );
function deregister_cf7_styles() {
  if ( !is_page(array(8,10)) ) {
    wp_deregister_style( 'contact-form-7' );
  }
}

Dovrai soltanto modificare la parte dove dice array(8,10) inserendo gli id delle pagine che contengono il form al posto di 8,10.

Inviare le email tramite SMTP

In alcuni casi può aver senso inviare le email tramite un server SMTP esterno.

In questo ci aiuta un altro plugin, che ho usato in altri progetti personalizzati dove avevo la necessità d'inviare grandi volumi di email senza rischiare di far cadere l'IP del server in blacklist.

Il plugin si chiama Post SMTP e puoi installarlo allo stesso modo di come abbiamo installato Contact Form 7 all'inizio di questa guida.

Questa operazione potrebbe non aver senso se credi di ricevere poche email tramite il tuo form, ma se ti aspetti grandi volumi di contatti allora è consigliabile usarlo, magari insieme a un servizio professionale come amazon SES.

Contact Form 7 Post Smtp

Configurarlo è semplicissimo, ti basta impostare i pochi dati richiesti del tuo server SMTP e sei pronto a partire. Inoltre ti permette di inviare una email di test per controllare che tutto funzioni correttamente.

Tra i tanti plugin simili disponibili questo è quello che più mi piace perché ha anche un'altra funzione. Quale?

Registra le email inviate sul database, questo può aiutarti a risolvere i problemi.

Contact Form 7 non invia mail

Pare che questo sia un problema comune, a volte Contact Form 7 non invia mail. Come possiamo risolvere?

Le cause di questo problema possono essere molteplici cercherò di fare chiarezza.

Vedi il messaggio di conferma sotto al form ma non ricevi la mail

La prima cosa da controllare in questo caso è il tab "Impostazioni aggiuntive" del form che stai usando. Potrebbe essere che ti sei scordato una opzione che blocca l'invio della mail.

Se questo non è il tuo caso installa il plugin Post SMTP di cui parlo sopra. Dopo averlo installato e attivato (non importa che configuri SMTP ancora) compila e invia il form di contatto. Poi dalla dashboard di WordPress, nella sidebar clicca su Post SMTP -> Email Log per controllare le ultime email inviate.

Tra quelle trovi la mail inviata dal form durante il tuo test?

Se si, il problema è col tuo provider, è possibile che l'IP del server sia in una blacklist, la mail viene chiaramente inviata ma non ricevuta, probabilmente finisce in spam. Contatta il tuo provider hosting, oppure puoi semplicemente cambiare hosting. Manteniamo la reputazione dei nostri IP sempre pulita, e in quei rari casi in cui un IP finisce in blacklist impostiamo un relay, per inviare da un altro IP fino a quando l'IP del server non viene eliminato dalla blacklist. Che tu scelga un hosting WordPress o un piano più economico come l'hosting condiviso con noi non avrai mai questo problema.

In alternativa puoi configurare le impostazioni di Post SMTP in modo da non inviare le tue email con l'indirizzo del tuo server ma usando un altro servizio tra quelli disponibili. In questo caso risolvi il problema.

Se invece la mail non è nel log puoi cercare la soluzione altrove. È praticamente impossibile che Contact Form 7 ti dia un messaggio di conferma e non invii la mail.

Contact form 7 non riesce ad inviare la mail

Se non ricevi un errore ti consiglio di seguire questi passi.

  • Ricarica la pagina che contiene il form.
  • Apri la console JavaScript e controlla se ci sono degli errori (se ce ne sono, che siano relativi a Contact Form 7 o meno trova il modo per risolverli).
  • Invia un messaggio usando il form di contatto e controlla se ci sono errori nella console JavaScript.

Mi è successo svariate volte di vedere che Contact Form 7 non inviasse le email, ed il problema era dovuto al fatto che erano state bloccate le API, di cui Contact Form 7 ha bisogno per inviare la mail.

In questo caso vediamo l'icona che continua a girare:

Icona Che Gira Contact Form 7

E un errore nella console JavaScript:

Errore Javascript Contact Form 7

Che riporto qui sotto per renderlo più leggibile:

Failed to load resource: the server responded with a status of 401 (Unauthorized)

/wp-json/contact-form-7/v1/contact-forms/5/feedback

Se questo è il tuo caso cerca chi sta bloccando le API di WordPress in modo da risolvere.

Salvare i dati dei form con Flamingo

Ho menzionato più volte Flamingo, in effetti non si può parlare di Contact Form 7 e non parlare di Flamingo. I due vanno a braccetto.

Flamingo fa una cosa sola, e la fa bene. Memorizza i dati che vengono inviati tramite i form (a meno che tu non imposti il form per non memorizzarli) e li rende disponibili nella dashboard di WordPress.

Questo plugin ti potrebbe salvare in quei casi in cui un problema con le email ti fa perdere una comunicazione importante. Con questo plugin le avrai tutte salvate sul database e sempre disponibili.

Installare Flamingo

Come hai visto installare un plugin in WordPress è semplicissimo. Andiamo su Plugin -> Aggiungi nuovo e nel box di ricerca scriviamo Flamingo.

Installare Flamingo

Adesso clicchiamo sul bottone installa adesso e poi su attiva, e abbiamo fatto. Installare i plugin con WordPress è facilissimo. Per questo si finisce per abusarne, al punto che ho dovuto scrivere un articolo sui plugin che rallentano WordPress.

Vedere i form salvati

Una volta installato Flamingo (non c'è niente da configurare) tutte le volte che un form di Contact Form 7 viene compilato viene salvato un record sul database.

Puoi trovare Flamingo nella sidebar dell'area amministratore di WordPress.

Flamingo Sidebar

Cliccando su Messaggi in arrivo vedi tutti quei messaggi che sono stati inviati tramite Contact Form 7 dal tuo sito.

Flamingo Storico Messaggi

Mentre cliccando su Rubrica vediamo tutte le interazioni per utente, non solo i messaggi inviati tramite Contact Form 7 ma anche i commenti e il ruolo che ha in WordPress.

Flamingo Rubrica

Opzioni avanzate per personalizzare Contact Form 7

Finora abbiamo visto le funzioni basilari di Contact Form 7, ma le versatilità di questo plugin non ha eguali. Alcune di queste operazioni possono essere eseguite senza plugin aggiuntivi, per altre abbiamo bisogno di un plugin aggiuntivo in modo da aggiungere una funzione.

Vediamo quali sono le più comuni.

Inviare email a destinatari diversi

In alcuni casi puoi voler dare ai tuoi utenti la scelta di chi contattare. Ad esempio puoi voler usare un menù a discesa (un campo select) tramite il quale possono scegliere chi contattare o quale dipartimento della tua azienda contattare.

In questo modo a seconda della richiesta la mail di contatto sarà inviata al dipartimento vendite o al dipartimento supporto. Questo è facilissimo da fare con Contact Form 7 e non hai bisogno di nessun plugin aggiuntivo.

Modifica il modulo e nel tab Modulo aggiungi un campo menu a discesa.

Imposta il campo come obbligatorio e seleziona l'opzione per inserire un elemento vuoto come prima opzione.

Nel campo opzioni inserisci le opzione come vedi nell'immagine qui sotto, quindi clicca su Inserisci tag.

Contact Form Campo Select

Il form è pronto, anche se probabilmente dovremo inserire un testo che funga da etichetta per quella scelta.

Adesso nel tab Mail dobbiamo impostare correttamente.

Se controlli l'immagine qui sopra, nel campo nome vedi menu-141 (avresti potuto cambiarlo con uno di tua scelta ma non è necessario).

Nel tab dobbiamo inserire nel campo A questo shortcode:

[menu-141]

In questo modo:

Contact Form 7 Campo A Dinamico

In questo modo l'utente può decidere a chi inviare l'indirizzo email.

Ottieni l'IP del visitatore

Se per qualche motivo hai bisogno di registrare l'indirizzo IP di chi sta compilando il form puoi usare lo shortcode:

[_remote_ip]

Puoi inserirlo nel testo della mail che Contact Form 7 invia.

Ottieni data e ora di invio

Allo stesso modo puoi segnare nel testo della mail che ricevi la data e l'ora di invio usando questi due shortcode:

[_date]
[_time]

Ottieni l'indirizzo della pagina in cui è stato compilato il form

In alcuni casi puoi avere incluso lo stesso form in più di una pagina e può servirti sapere da quale pagina è stato compilato.

Contact Form 7 ti mette a disposizione due diversi shortcode per ottenere questo dato:

[_url]
[_post_url]

Reindirizza l'utente su un'altra pagina dopo aver inviato il form

In alcuni casi potresti voler reindirizzare l'utente su una pagina diversa dopo che il form è stato compilato con successo e l'email è stata inviata.

Per fare questo puoi usare un evento DOM che Contact Form 7 ci mette a disposizione: wpcf7mailsent

Nel tab Modulo, in basso dopo il codice HTML del bottone per inviare il form puoi incollare questo codice JavaScript:

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
location = 'https://example.com/';
}, false );
</script>

Ovviamente dovrai sostituire https://example.com/ con l'indirizzo della pagina verso la quale vuoi rimandare l'utente.

Tracciare l'invio del form con Google Analytics

Se usi Google Analytics sul tuo sito, potrebbe essere utile tracciare tutte le volte che un form di Contact Form 7 viene inviato per impostarlo come obiettivo o anche solo a scopo statistico.

Come abbiamo fatto prima, possiamo inserire un codice JavaScript sotto il codice HTML del form per tracciare il suo invio. Il codice da inserire è questo:

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
  ga('send', 'event', 'Contact Form', 'submit');
}, false );
</script>

Puoi modificare 'Contact Form' e 'submit' a tuo piacimento per dare un nome diverso al completamento del form.

Inviare il risultato del form tramite API

Per questa funzione è necessario un plugin aggiuntivo. Si tratta di un plugin che non è molto usato e viene aggiornato di rado, noi lo stiamo usando senza problemi.

Infatti se compili il form dal nostro sito e lo invii non viene inviata nessuna email, ma viene aperto un ticket tramite API su nostro sistema di ticket. Questo ci permette una maggiore affidabilità rispetto alle email e una maggiore velocità nell'apertura del ticket.

Il plugin da installare si chiama Contact form 7 TO API + Basic Auth e si trova nella repository di WordPress. Dopo averlo installato e attivato, quando modifichi il form di contatto, vedrai un nuovo tab chiamato API integration.

Contact Form 7 To Api

Qui la situazione si complica. È impossibile dare delle linee guida su come usare questi campi dal momento che dipende dalle tue API. In ogni caso se stai usando le API sei sicuramente un utente avanzato e non avrai problemi a sistemare i vari campi in modo da far funzionare a dovere il form e l'invio al tuo software.

Molto utile la funzione debug log che ci fa vedere tutti i dati, inclusa la risposta API e ci aiuta a risolvere eventuali problemi durante l'impostazione dei parametri richiesti da Contact form 7 TO API.

Impostare dei campi condizionali

In alcuni casi, in base alla richiesta che ricevi potresti voler mostrare dei campi diversi in base a quello che il tuo utente seleziona. Per fare questo possiamo usare il plugin Contact Form 7 – Conditional Fields.

Contact Form 7 Conditional Fields

Anche questo plugin è disponibile nella repository di WordPress e possiamo installarlo in pochi click direttamente dall'area admin.

Una volta installato avremo una nuova voce nella sidebar che ci permette di modificare le impostazioni.

Impostazioni Conditional Fields

Cliccando sul link possiamo modificare le impostazioni generali del plugin.

Quando andiamo a modificare il form vediamo un nuovo tab chiamato Conditional fields.

Tab Conditional Fields

Da lì possiamo impostare una serie di condizioni che regolano quali campi mostrare e in quale situazione. Ad esempio se qualcuno seleziona il dipartimento supporto potresti voler chiedere il numero d'ordine, mentre non devi chiederlo a chi vuole contattare il dipartimento vendite.

Come prima cosa dobbiamo creare un nuovo gruppo condizionale dal tab Modulo cliccando sul bottone Conditional Fields Group.

Crea Gruppo Condizionale

Diamo un nome al gruppo e lo aggiungiamo. Al suo interno aggiungiamo un campo di testo che chiameremo numero d'ordine e salviamo.

Clicchiamo quindi sul tab per aggiungere una condizione e sul bottone verde per creare una nuova condizione.

Aggiungi Nuova Condizione

Impostiamo quindi una regola per mostrare il gruppo, che selezioniamo da una tendina, se il dipartimento scelto è Supporto. Nota che le condizione è case sensitive, vale a dire che vede come differenti le lettere maiuscole dalle lettere minuscole.

Regola Condizionale Contact Form 7

Adeguare Contact Form 7 al GDPR

Con l'entrata in vigore del GDPR, ovvero la normativa europea in materia di protezione, bisogna adeguare anche il proprio sito web.

Vediamo cosa bisogna fare per quanto riguarda la raccolta dei dati personali degli utenti tramite i moduli di contatto.

Contact Form 7 ti permette di utilizzare il campo "Accettazione" per creare delle caselle di controllo. Per il consenso informato ricordati che devi anche inserire il link all'informativa sulla privacy, che deve essere presente sul tuo sito.

Per creare la casella di controllo ti basta inserire alla voce Condizione la dicitura sul consenso informato, puoi inserire direttamente in link che rimanda all'informativa con la formattazione HTML.

In questo caso, come vedi nella schermata qui sotto, il checkbox non deve essere facoltativo, perché è sempre necessario avere il consenso per poter trattare i dati personali.

Gdpr Contact Form 7

Con le impostazioni che vedi sopra, abbiamo ottenuto questo shortcode:

[acceptance gdpr] Ho letto l'<a href="https://www.miosito.com/privacy-policy/" target="_blank" rel="nofollow noopener">informativa privacy</a> e acconsento alla memorizzazione dei miei dati nel vostro archivio secondo quanto stabilito dal regolamento europeo per la protezione dei dati personali n. 679/2016, GDPR. [/acceptance]

Puoi anche usarlo direttamente, ma ricordati di sostituire il link di esempio inserito tra virgolette "https://www.miosito.com/privacy-policy/" con l'indirizzo della pagina del tuo sito contenente l'informativa sulla privacy.

Ecco come appare il nostro modulo di contatto con la casella dell'informativa sulla privacy:

Informativa Privacy Contact Form

Questo per quanto riguarda il consenso informato sul trattamento dei dati personali. Se, invece, vuoi permettere agli utenti di iscriversi anche alla tua newsletter, o ricevere altri tipi di comunicazioni, dovrai inserire una nuova casella di accettazione.

È necessario, infatti, ottenere il consenso specifico per ogni diversa finalità. Ricordati, però, che l'iscrizione alla newsletter deve essere facoltativa.

In questo caso puoi creare una casella di accettazione come abbiamo fatto noi qui:

Accettazione Newsletter

E otterrai uno shortcode come questo:

[acceptance newsletter optional] Sì, voglio iscrivermi alla newsletter. (facoltativo) [/acceptance]

A questo punto, aggiungi una riga di testo nel modulo che preceda lo shortcode con l'accettazione e il risultato finale sarà come questo qui:

Consenso Specifico Gdpr Contact Form 7

Ricapitolando senza il consenso sulla privacy e il trattamento dei dati personali, chi cerca di contattarti non potrà inviare la richiesta.

La newsletter e altri consensi specifici, invece, devono essere liberi e mai obbligatori.

Conclusioni

In questa guida abbiamo visto come creare un modulo di contatto sul tuo sito WordPress utilizzando Contact Form 7. Con questo plugin semplice da usare è possibile creare dei form di contatto protetti da spam e conformi alla normativa sulla privacy (GDPR).

Siamo partiti dalla creazione di un form di contatto, per poi andare ad analizzare una ad una le impostazioni di questo plugin da quelle base alle avanzate. Abbiamo visto come impostarlo per proteggersi dallo spam, cosa fare nel caso in cui non vengano inviate le mail e come salvare le comunicazioni usando Flamingo.

Hai avuto problemi? Ci sono parti non chiare? Fammelo sapere in un commento!

Potrebbe interessarti anche:

Installare Wordpress
Installare WordPress: la guida completa
WordPress è uno dei CMS (Content Management System) ovvero sistema di gestione dei contenuti più utilizzato. Ti basta pensare che […]
Installare Wordpress In Locale0dcon Local By Flywheel
Come installare WordPress in locale con Local by Flywheel
In questo articolo ti spiego cosa significa e perché è conveniente installare WordPress in locale. Inoltre vediamo come è possibile […]
Velocizzare Wordpress
Velocizzare WordPress: pagine in 1 secondo
In questo articolo andiamo a vedere come velocizzare WordPress in pochi semplici passi e ottimizzare il nostro sito web per […]
Plugin Che Rallentano Wordpress
Plugin che rallentano WordPress
In questo articolo andiamo a vedere quanto i plugin di WordPress influiscono sul tempo di caricamento del tuo sito web […]

6 comments on “Contact Form 7: la guida completa”

    1. Ciao liborio, devi controllare il CSS del suo sito. Su Chrome può cliccare col tasto destro per aprire il menu quindi cliccare su ispeziona, vedere il codice e capire cosa modificare. Se non riesce ci contatti e le passiamo un codice sconto per wp-ok riservato ai nostri clienti. Siamo partners di wp-ok da tempo e ti sapranno aiutare.

  1. Salve, sto realizzando un sito con elenco di aziende.
    Ogni azienda ha la propria scheda ed ogni scheda ha un modulo richiesta contatto (creato con Contact Form 7).
    Come faccio a far inviare l'email all'azienda dalla quale viene inviato il messaggio?
    Es.
    Scheda Azienda1 => invio messaggio all'email dell'Azienda1
    Scheda Azienda2 => invio messaggio all'email dell'Azienda2
    Scheda Azienda3 => invio messaggio all'email dell'Azienda3

    Grazie

    1. Così su due piedi vedo due opzioni. Creo un form per ogni azienda, oppure crei una funzione personalizzata che cambia l’indirizzo di invio. Non so se esiste un filtro per farlo e quindi che difficoltà potrebbe avere una simile operazione.

      Senza dubbio il primo sia ema è il più semplice.

  2. Ciao, vorrei creare un form di invio ad un evento con posti limitati. Mi piacerebbe che il form chiuda le iscrizioni al raggiungimento del numero stabilito. E' possibile? grazie Mille

    1. Ciao Marco, nel tuo caso più che cercare di usare contact form userei un plugin per le prenotazioni. ALtrimenti dovresti tramite codice contare le volte che viene compilato e superata una certa soglia mostrare un avviso, sicuramente più semplice con un plugin per le prenotazioni, specialmente se non sei un programmatore.

Lascia un commento

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

crossmenu