Nel 2024, rimanere in contatto con il pubblico è fondamentale. Creare una lista di email con un servizio come MailChimp vi aiuta a inviare contenuti direttamente ai vostri abbonati.
Le liste di email sono ottime, ma cosa succede se un lettore o un potenziale cliente vuole mettersi direttamente in contatto con voi? È qui che entrano in gioco i moduli di contatto! In questo articolo parleremo di come configurare il popolare plugin Contact Form 7 per il vostro sito WordPress.
Come Installare Contact Form 7
Contact Form 7 è in circolazione dal 2009 e negli ultimi dieci anni ha collezionato oltre 5 milioni di download. Contact Form 7 può essere installato direttamente dal repository dei plugin di WordPress. Se cercate “contact form 7”, trovate subito il plugin insieme a una serie di componenti aggiuntivi.
Dopo l’installazione del plugin, nella barra laterale della vostra bacheca WordPress vedrete una voce di menu chiamata “Contact”. Da qui potete configurare tutte le impostazioni di Contact Form 7.
I Pro e i Contro di un Modulo di Contatto
Prima di immergerci in come configurare Contact Form 7 per il vostro sito WordPress, esaminiamo rapidamente alcuni dei pro e dei contro dell’aggiunta di un modulo di contatto al vostro sito.
Vantaggi dei Moduli di Contatto
- Un modulo di contatto permette a lettori, a clienti e a follower di contattarvi direttamente. A seconda dello scopo del vostro sito WordPress, permettere a chi visita il vostro sito di comunicare con voi è molto importante. Ad esempio, non aggiungere un modulo di contatto su un sito di ecommerce può essere finanziariamente dannoso per la vostra attività, perché le persone interessate non potranno contattarvi in caso di domande sul vostro prodotto.
- Un modulo di contatto aggiunge legittimità al vostro sito WordPress o al vostro business. Molte persone vedono la presenza di un modulo di contatto come una sorta di fattore di fiducia. L’idea di potersi rivolgere a voi, proprietari del sito, rende i vostri contenuti più affidabili.
Svantaggi dei Moduli di Contatto
- Lo spam può essere un problema per i moduli pubblici come le aree per i commenti e i moduli di contatto. Fortunatamente con Contact Form 7 potete filtrare lo spam con reCAPTCHA. Potete anche configurare una regola di pagina Cloudflare per proteggervi ulteriormente. Più avanti nell’articolo parleremo di come impostare la protezione anti-spam in Contact Form 7.
- Dopo aver aggiunto un modulo di contatto al vostro sito, dovrete probabilmente dedicare del tempo a rispondere ai messaggi. Non è necessariamente una cosa negativa, a seconda di come la si guarda. Alcuni temono il processo di risposta alle email, mentre altri lo amano. Per la nostra esperienza, il valore delle relazioni che si sviluppano grazie ai moduli di contatto sul vostro sito in genere superano il costo della moderazione, quindi vi consigliamo di approfittarne!
Panoramica delle Impostazioni di Contact Form 7
Creare un modulo di contatto con il plugin Contact Form 7 è semplicissimo. Per iniziare, fate clic su Contact > Contact Forms nella barra laterale di WordPress. In questa pagina potete visualizzare tutti i moduli di contatto con i relativi metadati associati.
Quando installate Contact Form 7 per la prima volta, viene creato automaticamente anche un modulo di esempio. Prima di entrare nel merito di come creare un modulo di contatto personalizzato, diamo prima un’occhiata al modulo di esempio per avere un’idea più chiara di come funziona Contact Form 7. Fate clic su Contact Form 1 per visualizzare le impostazioni del modulo.
La pagina “Edit contact form” è suddivisa in quattro sezioni.
- Form – Per personalizzare il vostro modello di modulo di contatto HTML avete a disposizioni diverse opzioni per il campo come “testo”, “email”, “checkbox”, ecc. Potete anche scrivere HTML personalizzato nella casella di personalizzazione del modulo.
- Mail – Personalizzate il template delle email e le impostazioni usate per le email di notifica.
- Messages – Personalizzate i messaggi che vengono visualizzati dopo azioni specifiche. Ad esempio, potete impostare un messaggio univoco da visualizzare dopo che qualcuno ha inviato un modulo di contatto.
- Additional Settings – Specificate gli snippet per abilitare funzioni aggiuntive come la modalità solo per gli abbonati, la modalità demo e quella per ignorare le email
Ora diamo un’occhiata più da vicino a ogni sezione e creiamo un modulo di contatto personalizzato!
Come Creare un Modulo di Contatto in WordPress
Per creare un nuovo modulo di contatto, fate clic su Add New accanto a “Contact Forms”.
Date un nome al nuovo modulo di contatto e fate clic su “Save”.
Nella sezione “Form”, aggiungete l’HTML necessario per il vostro modulo di contatto. Potete usare i vari pulsanti preimpostati per generare degli shortcode per i tag dei moduli più diffusi. Per facilitarvi le cose, date un’occhiata alle descrizioni qui sotto per i tag preimpostati di Contact Form 7.
- Text – Crea un tag di modulo per una singola riga di testo. I campi di testo sono utili per nomi, cognomi e altri snippet di testo che non richiedono linee multiple.
- Email – Crea un tag di modulo per un indirizzo email.
- URL – Crea un tag di modulo per un URL.
- Tel – Crea un tag per un numero di telefono.
- Number – Crea un tag di modulo per un numero. A differenza dei campi di immissione “text” o “text area”, i campi “number” ammettono solo cifre numeriche.
- Date – Crea un tag di modulo per una data.
- Text Area – Crea un tag di modulo per un’area di testo. A differenza del normale campo di immissione “text”, un campo “text area” consente di inserire più linee di testo. Sono ideali per inserire il corpo del messaggio.
- Drop-down Menu – Crea un tag di modulo per un menu a tendina.
- Checkboxes – Crea un tag di modulo per le caselle di spunta.
- Radio Buttons – Crea un tag di modulo per i pulsanti radio.
- Acceptance – Crea un tag di modulo per una casella di accettazione.
- Quiz – Crea un tag del modulo per una coppia domanda-risposta.
- File – Crea un tag di modulo per un campo di caricamento file.
- Submit – Crea un tag di modulo per un pulsante di invio.
Ora procediamo a personalizzare un modulo di contatto. Per completezza, creeremo un modulo di contatto che usa tutti i tag preimpostati di Contact Form 7.
Il Tag “Text”
Quando fate clic su un tag preimpostato di Contact Form 7, vedrete un menu a comparsa come quello sottostante. In questo menu potete configurare le impostazioni del tag del modulo. In basso, vedrete uno shortcode che può essere incorporato nel vostro template di modulo di contatto.
Per il tag “text”, stiamo usando impostazioni qui sotto per creare un campo di input per un nome.
- Field Type- Campo obbligatorio
- Name – text-711 (auto-generato)
- Default Value Your Name (usato come testo segnaposto predefinito)
- Akismet – Deselezionato
- ID Attribute (CSS) – cf7-your-name
- Class Attribute (CSS) – cf7-your-name
Queste impostazioni generano il seguente shortcode.
[text* text-711 id:cf7-your-name class:cf7-your-name placeholder "Your Name"]Per ora, basta fare clic sul pulsante Insert tag per aggiungere il tag al template del modulo di contatto. Più avanti aggiungeremo altri tag HTML per strutturare il modulo.
Il Tag “Email”
Successivamente, creeremo un tag per il modulo email così potremo raccogliere gli indirizzi email tramite il nostro modulo di contatto.
Per il tag del modulo “email”, abbiamo configurato le seguenti impostazioni.
- Field Type – Campo obbligatorio
- Name – email-632 (auto-generato)
- Default Value – Your Email
- Akismet – Deselezionato.
- ID Attribute (CSS) – your-email
- Class Attribute (CSS) – your-email
Queste impostazioni generano il seguente shortcode.
[email* email-632 id:email class:email placeholder "Your Email"]Il Tag “URL”
In alcuni casi, potreste volere un campo del vostro modulo di contatto dedicato alla raccolta di URL dei siti web. Anche se tecnicamente Contact Form 7 vi permette di usare un normale tag di modulo “text” per questo, vi consigliamo di scegliere invece il tag “URL”. Il tag del modulo “URL” genererà un campo di input che convalida gli URL per garantire che siano formattati correttamente.
Per il tag del modulo “URL” abbiamo configurato le seguenti impostazioni.
- Name – url-601 (auto-generato)
- Default Value – Your Website
- Akismet – Deselezionato.
- ID Attribute (CSS) – cf7-your-website
- Class Attribute (CSS) – cf7-your-website
Queste impostazioni generano lo shortcode riportato qui di seguito.
[url url-601 id:cf7-your-website class:cf7-your-website "Your Website"]Il Tag “Tel”
Analogamente agli URL, potete usare un tag standard “text” anche per raccogliere i numeri di telefono. Tuttavia, è meglio usare il tag del modulo “tel” che vi aiuta ad assicurare che il numero di telefono sia valido.
Per il tag del modulo “tel” abbiamo configurato le seguenti impostazioni.
- Name – tel-842 (auto-generato)
- Default Value – Your Phone Number
- ID Attribute (CSS) – cf7-your-phone-number
- Class Attribute (CSS) – cf7-your-phone-number
Queste impostazioni generano lo shortcode riportato di seguito.
[url url-601 id:cf7-your-website class:cf7-your-website "Your Website"]Il Tag “Data”
Il tag “data” di Contact Form 7 vi consente di generare un selezionatore di date in stile calendario. Questo campo di inserimento “data” è utile per specificare le date degli appuntamenti in un modulo di contatto.
Per il tag “data” abbiamo configurato le seguenti impostazioni.
- Name – date-389 (auto-generato)
- Default Value – Your Appointment Date
- Range – Il nostro intervallo di date personalizzate.
- ID Attribute (CSS) – cf7-appointment-date
- Class Attribute (CSS) – cf7-appointment-date
Queste impostazioni generano il seguente shortcode:
[date* date-389 min:2020-09-15 max:2020-10-24 id:cf7-appointment-date class:cf7-appointment-date placeholder "Your Appointment Date"]Il Tag “Textarea”
Il tag “textarea” consente di creare un’area di testo a più righe in modo che i visitatori possano inviare messaggi più lunghi. Queste aree di testo sono molto utili per racchiudere il corpo di un messaggio.
Per il tag “textarea” abbiamo configurato le seguenti impostazioni.
- Name – textarea-795 (auto-generato)
- Default Value – Il tuo messaggio
- ID Attribute (CSS) – cf7-your-message
- Class Attribute (CSS) – cf7-your-message
Queste impostazioni generano il seguente shortcode.
[textarea* textarea-795 id:cf7-your-message class:cf7-your-message placeholder "Your Message"]Il Tag “Drop-Down Menu”
Il tag di Contact Form 7 “drop-down menu” consente di creare un menu a tendina con diverse opzioni. I menu a tendina sono utili per le situazioni in cui desiderate che un visitatore selezioni una specifica opzione al momento di inviare il modulo. Ad esempio, se gestite un’azienda di manutenzione WordPress, potete configurare un menu a tendina che permette al visitatore di scegliere tra i servizi offerti.
Per il tag “drop-down menu” abbiamo configurato le seguenti impostazioni.
- Name – menu-24 (auto-generato)
- Options – Opzione 1, Opzione 2, Opzione 3, Opzione 4
- Allow Multiple Selections – Selezionato
- Insert a Blank Item as the First Option – Selezionato
- ID Attribute – cf7-drop-down-menu
- Class Attribute – cf7-drop-down-menu
Queste impostazioni generano il seguente shortcode:
[checkbox* checkbox-948 id:cf7-checkbox class:cf7-checkbox use_label_element "Option 1" "Option 2" "Option 3"]Il Tag “Checkbox”
Il tag “checkbox” consente di creare caselle di spunta in HTML. Simile ai menu a tendina, le caselle di spunta possono essere usate anche per selezionare opzioni predefinite. A seconda della natura del modulo di contatto, le caselle di spunta possono funzionare meglio dei menu a tendina. Ad esempio, se avete di un numero ridotto di opzioni tra cui scegliere, una casella di spunta riduce il numero di clic necessari per fare una selezione. D’altra parte, se il vostro modulo di contatto ha molte opzioni, un menu a tendina può funzionare meglio perché occupa meno spazio verticale.
Per il tag “checkbox” abbiamo configurato le seguenti impostazioni.
- Name – checkbox-948 (auto-generato)
- Options – Opzione 1, Opzione 2, Opzione 3
- Wrap Each Item with Label Element – Selezionato
- ID Attribute – cf7-checkbox
- Class Attribute – cf7-checkbox
Queste impostazioni generano il seguente shortcode:
[checkbox* checkbox-948 id:cf7-checkbox class:cf7-checkbox use_label_element "Option 1" "Option 2" "Option 3"]Il Tag “Radio Buttons”
Il tag “radio buttons” permette di creare radio button con più opzioni. A differenza delle caselle di spunta e dei menu a tendina, con i radio button si può selezionare una sola opzione.
Per il tag “radio button” abbiamo configurato le impostazioni qui sotto:
- Name – radio-708 (auto-generato)
- Options – Opzione 1, Opzione 2, Opzione 3
- Wrap Each Item with Label Element – a controllo
- ID Attribute – cf7-radio
- Class Attribute – cf7-radio
Queste impostazioni generano il seguente shortcode:
[radio radio-708 id:cf7-radio class:cf7-radio use_label_element default:1 "Option 1" "Option 2" "Option 3"]Il Tag “Acceptance”
Potete usare il tag “acceptance” di Contact Form 7 per generare un’unica casella di spunta per l’accettazione dei termini e delle condizioni. Il tag accettazione include delle opzioni per specificare il messaggio da visualizzare.
Per il tag “acceptance”, abbiamo configurato le seguenti impostazioni.
- Name – acceptance-545 (auto-generato)
- Condition – Selezionare questa casella per accettare i termini.
- ID Attribute – cf7-acceptance
- Class Attribute – cf7-acceptance
Queste impostazioni generano il seguente shortcode:
[acceptance acceptance-545 id:cf7-acceptance class:cf7-acceptance] Check this box to accept the terms. [/acceptance]Il Tag “Quiz”
Il tag “quiz” può essere usato per creare domande semplici e rispondere ai quiz dai modulo di contatto. Per creare un quiz, usate questo formato per separare la domanda e la risposta: Domanda|Risposta. Nella schermata qui sotto, la nostra domanda è “In che anno è stato pubblicato WordPress?“, e la risposta (separata da un carattere “|”) è 2003.
Per il tag “quiz” abbiamo configurato le seguenti impostazioni.
- Name – quiz-461 (auto-generato)
- Condition – Selezionare questa casella per accettare i termini.
- ID Attribute – cf7-quiz
- Class Attribute – cf7-quiz
Queste impostazioni generano il seguente shortcode:
[quiz quiz-461 id:cf7-quiz class:cf7-quiz "What year was WordPress released?|2003"]Il Tag “File
Il tag “file” di Contact Form 7 vi permette di aggiungere la funzionalità di caricamento dei file a un modulo di contatto. Questo è utile per le situazioni in cui desiderate che un visitatore possa caricare un’immagine o un file PDF da inviare insieme al modulo. Ad esempio, se gestite un blog di fotografia che pubblica i contributi degli ospiti, potete aggiungere la funzionalità di caricamento dei file per consentire alle persone di caricare le immagini.
Nelle impostazioni dei tag del modulo, potete specificare una serie di impostazioni per proteggere il modulo. Vi consigliamo di impostare sempre un limite di dimensione dei file per evitare che utenti malintenzionati carichino file di grandi dimensioni. Allo stesso modo, specificate quali sono i tipi di file accettabili (opzione “acceptable file types”) per bloccare il modulo a seconda dei formati di file che desiderate ricevere . Rimanendo sull’esempio del blog fotografico, potreste voler limitare le dimensioni dei file a 1 MB (1024 KB) e i tipi di file accettabili solo ai formati immagine conosciuti come JPG e PNG.
Per il tag “file”, abbiamo configurato le seguenti impostazioni;
- Name – file-658 (auto-generato)
- File Size Limit – 1024kb
- Acceptable File Types – jpg|png|gif
- ID Attribute – cf7-file
- Class Attribute – cf7-file
Queste impostazioni generano il seguente shortcode:
[file file-658 limit:1024kb filetypes:jpg|png|gif id:cf7-file class:cf7-file]Il Tag “Submit”
Ultimo, ma non meno importante, è il tag “submit” di Contact Form 7. Come avrete intuito, questo tag consente di generare un pulsante di invio per un modulo di contatto.
Per il tag “submit” del modulo, abbiamo configurato le seguenti impostazioni:
- Label – Submit
- ID Attribute – cf7-submit
- Class Attribute – cf7-submit
Queste impostazioni generano il seguente shortcode:
[submit id:cf7-submit class:cf7-submit "Submit"]Come Strutturare un Modulo di Contatto con i Tag del Modulo
Ora che abbiamo impostato tutti i nostri tag, è il momento di creare il modulo di contatto. A questo punto, le impostazioni del modulo di contatto dovrebbero assomigliare alla schermata sottostante. Prendete nota di tutti i tag del modulo che abbiamo creato sopra. Con questi tag potete usare lo shortcode [contact-form-7] per incorporare il modulo in un post o in una pagina di WordPress.
Nell’editor di WordPress, incollate lo shortcode in un blocco vuoto:
Se usate il Classic Editor di WordPress, potete incollare lo shortcode in qualsiasi punto dell’editor di contenuti.
Ora dovreste poter vedere il modulo di contatto nella pagina in cui avete aggiunto lo shortcode di Contact Form 7. Ecco come si presenta il nostro modulo di contatto con le impostazioni viste sopra. Come potete vedere, Contact Form 7 converte automaticamente i tag del modulo in HTML valido che si abbina così agli stili CSS predefiniti inclusi nel vostro tema WordPress.
Questo nostro modulo di contatto, nel suo stato attuale, è un buon punto di partenza, ma manca una caratteristica fondamentale. I tag del modulo come “text”, “email” e “URL” supportano i placeholder, ma altri elementi come “checkbox” e “radio buttons” no. Senza le etichette appropriate, la casella di spunta e i pulsanti radio non saranno molto utili per i visitatori perché non avranno alcun contesto. Per fortuna, aggiungere etichette in Contact Form 7 è molto facile!
Come Aggiungere le Etichette ai Tag del Modulo in Contact Form 7
Ci sono due modi per aggiungere etichette ai tag di Contact Form 7. Per i tag del modulo qui sotto, abbiamo avvolto il tag del modulo con un tag .
- Text
- Email a
- URL
- Tel
- Number
- Date
- Text Area
- Acceptance
- Quiz
- File
Date un’occhiata all’esempio di tag “text” qui sotto:
[text* text-711 id:cf7-your-name class:cf7-your-name placeholder "Your Name"]To add a label to this form tag, we can replace the form tag with the snippet below. Notice the additional instance of “Your Name” right after the opening <label> tag.
Per aggiungere un’etichetta a questo tag del modulo, possiamo sostituire il tag con lo snippet qui sotto. Notate l’istanza aggiuntiva di “Your Name” subito dopo l’apertura del tag <label>:
<label> Your Name
[text* text-711 id:cf7-your-name class:cf7-your-name placeholder "Your Name"]
</label>Ecco come appare questo cambiamento sul nostro modulo di contatto. In questo caso, l’etichetta appena creata serve allo stesso scopo del placeholder. Tuttavia, se non volessimo specificare un placeholder all’interno del tag del modulo, l’etichetta aiuterebbe a identificare lo scopo di una specifica casella di input.
Per i tag che riproducono più comandi dei moduli come checkbox, radio buttons e menu a tendina, avvolgere il tag del modulo all’interno di un tag </label> è un errore. Questo accade perché un tag <label> dovrebbe essere usato solo con un singolo comando del modulo. La natura delle caselle di spunta, dei pulsanti radio e delle opzioni del menu a tendina comporta comandi di modulo multipli, quindi sono incompatibili con la soluzione di etichettatura predefinita.
Per le caselle di spunta, i pulsanti radio e i menu a discesa, è stato necessario aggiungere un parametro use_label_element all’interno dello shortcode.
Date un’occhiata all’esempio di tag checkbox qui sotto, dove abbiamo evidenziato in grassetto use_label_element.
[checkbox* checkbox-948 id:cf7-checkbox class:cf7-checkbox use_label_element "Opzione 1" "Opzione 2" "Opzione 3"]Una volta aggiunto il parametro use_label_element, potete aggiungere un’etichetta direttamente sopra il tag del modulo nell’editor dei moduli di contatto:
Per completezza, abbiamo aggiunto delle etichette a tutti i tag nel nostro modulo di contatto. Probabilmente non sarebbe necessario farlo per un sito in produzione, perché alcuni tag del modulo includono già dei placeholders. Qui volevamo solo dimostrare come funzionano le etichette.
Ecco come si presenta il nostro modulo di contatto:
Configurare le Impostazioni Email in Contact Form 7
Ora che abbiamo configurato la struttura del nostro modulo di contatto, è il momento di dare un’occhiata alle impostazioni per l’invio delle email in Contact Form 7. Mentre le impostazioni predefinite per la consegna delle email dovrebbero funzionare bene per la maggior parte dei siti, è comunque importante capire le varie impostazioni nel caso in cui il vostro sito o le circostanze richiedano una configurazione speciale.
Per accedere alle impostazioni di invio delle email, andate nell’editor dei moduli di contatto e selezionate la scheda “Mail”.
Le impostazioni di recapito delle email in Contact Form 7 consentono di personalizzare i modelli e i parametri usati per generare e inviare una notifica dopo l’invio di un modulo. Se usate le impostazioni errate, è possibile che non riceviate una notifica di invio del modulo. Pertanto, è importante testare l’invio del modulo dopo aver creato un modulo di contatto e averne modificato le impostazioni.
Contact Form 7 consente di configurare le seguenti impostazioni di invio delle email:
- To – l’indirizzo email a cui inviare una notifica.
- From – L’indirizzo email da cui inviare una notifica.
- Subject – L’oggetto dell’email di notifica.
- Additional Headers – Specifica gli header aggiuntivi dell’email aggiuntive come “reply-to”.
- Message Body – Il testo dell’email di notifica.
- File Attachments – Specifica gli eventuali allegati da includere nell’email di notifica.
Ora vediamo ogni impostazione per capire meglio come può influire sull’invio delle email in Contact Form 7.
Il Campo “To”
Assicuratevi di specificare un indirizzo email reale per il campo “To”. Per impostazione predefinita, Contact Form 7 assegna al campo “To” l’indirizzo email associato al vostro account utente WordPress. Se il vostro indirizzo email WordPress non è valido, aggiornatelo nelle impostazioni del vostro profilo e modificate anche l’indirizzo email in Contact Form 7.
Il campo “From”
L’impostazione “From” dovrebbe usare il seguente formato – Il vostro nome. Per le impostazioni di posta elettronica del nostro modulo di contatto, stiamo usando kinstalife <[email protected]>.
Per impostazione predefinita, Contact Form 7 compilerà questo campo con [email protected]. Assicuratevi che questo indirizzo email sia valido perché alcuni host WordPress bloccano le email in uscita verso indirizzi non validi. Ci sono diversi modi per rendere valido questo indirizzo email. Potete impostare un account di posta elettronica dedicato per [email protected] oppure potete abilitare la funzionalità catch-all presso il vostro provider di servizi di posta. Se non riuscite a impostare questo indirizzo email, vi consigliamo di cambiarlo con un indirizzo email valido per evitare problemi di deliverability.
Il Campo “Subject”
L’impostazione “Subject” può essere usata per specificare un oggetto per le email di notifica. Per impostazione predefinita, Contact Form 7 imposta l’oggetto come Nome del sito "[your-subject]" – il nome dell’oggetto nel template predefinito dei moduli in Contact Form 7.
Se il vostro modulo non contiene un tag del modulo chiamato “[your-subject]”, assicuratevi di cambiarlo in qualcos’altro. Per esempio, se avete solo un tag del modulo per raccogliere il nome di un visitatore (ad esempio [your-name]), potreste cambiare la riga dell’oggetto in Hai ricevuto un’email da [your-name].
Il Campo “Additional Headers”
Sotto “Additional Headers”, è possibile specificare le intestazioni delle email come reply-to, CC e BCC. Per impostazione predefinita, Contact Form 7 aggiunge la seguente intestazione – Reply-To: [your-email]. Questa intestazione consente di rispondere all’indirizzo email specificato in un modulo di contatto inviato.
L’header predefinito reply-to va bene se state usando il tag predefinito di Contact Form 7. Se non lo fate, assicuratevi di cambiarlo in modo che corrisponda al nome del vostro tag del modulo di posta elettronica. Per il nostro modulo di contatto, il nome del tag del modulo email è “email-632”, quindi il tag reply-to dovrebbe essere cambiato in Reply-To: [email-632].
Il “Message Body”
Il prossimo campo è il “Message Body”, che determina il contenuto del corpo dell’email di notifica. Il template predefinito di Contact Form 7 usa i tag del modulo [your-name], [your-email], [your-subject] e [your-message] e assomiglia a questo:
From: [your-name]
Subject: [your-subject]
Message Body:
[your-message]
--
Questa email è stata inviata da un moduli di contatto in kinstalife (http://kinstalife.com)Assicuratevi di cambiare questi tag del modulo se non li usate nel vostro template di modulo di contatto. Poiché il modulo di contatto che abbiamo creato raccoglie molte informazioni, possiamo aggiungere al corpo del messaggio altri tag come nell’esempio qui sotto:
Ciao Brian, hai ricevuto un messaggio da [text-711] ([email-632]).
Website: [url-601]
Phone Number: Tel-842
Appointment Date: date-389
Message: textarea-795
Impostazioni Email di Contact Form 7 – Allegati ai File
Se il modulo di contatto prevede il caricamento di un file, potete includere il file con l’email di notifica. Nel nostro modulo di contatto, abbiamo un tag per il caricamento del file chiamato “[file-658]”. Pertanto, possiamo aggiungere questo tag del modulo sotto “File Attachments” per garantire che il file venga incluso nella notifica via email.
Problemi di Recapito delle Email in Contact Form 7
Se notate che Contact Form 7 non invia email ci sono alcune cose che potete controllare prima di contattare uno sviluppatore WordPress che vi offra assistenza.
- Verificate se il vostro server sta inviando altri tipi di email. Per verificarlo, potete attivare un’altra azione di invio di email scrivendo un commento di prova su un post del blog o inviando una richiesta di reimpostazione della password sulla vostra pagina di login di WordPress. Se ricevete un’email dopo aver eseguito una di queste azioni, è probabile che il problema sia legato alla configurazione di Contact Form 7. Se non ricevete email, contattate il team di supporto del vostro host e fategli sapere che avete un problema con l’invio delle email.
- Assicuratevi che i campi “To” e “From” nelle impostazioni di consegna delle email del vostro modulo di contatto siano configurati correttamente. Affinché Contact Form 7 funzioni correttamente, entrambi i campi devono essere compilati con indirizzi email reali.
Messaggi di Invio in Contact Form 7
Contact Form 7 consente di personalizzare una serie di messaggi di invio del modulo. Questi messaggi vengono visualizzati quando una determinata condizione viene soddisfatta. Ad esempio, se un visitatore dimentica di compilare un campo obbligatorio, Contact Form 7 visualizza un messaggio “Il campo è obbligatorio”. Per la maggior parte dei casi d’uso, i messaggi predefiniti dovrebbero funzionare bene. Tuttavia, se volete personalizzare i messaggi, potete fare clic sulla scheda “Messages” nell’editor del modulo di contatto.
Come Rendere Sicuro il Vostro Modulo di Contatto
Poiché i bot automatizzati sono diventati più intelligenti e pervasivi nel corso degli anni, lo spam è diventato un problema importante per i moduli di contatto. I moduli di contatto sono generalmente aperti al pubblico su Internet, quindi è abbastanza facile per i web scrapers individuarli e inviare messaggi di spam alla vostra casella di posta elettronica. Fortunatamente, ci sono vari modi per allontanare gli spammer e proteggere il vostro modulo di contatto.
Proteggere Contact Form 7 con reCAPTCHA
Se avete mai inviato un modulo su Internet, probabilmente conoscete già reCAPTCHA, una tecnologia sviluppata da Google per identificare i comportamenti automatizzati dei bot. Le versioni precedenti di reCAPTCHA (V2) richiedevano agli utenti di superare un quiz o una sfida.
L’ultima versione di reCAPTCHA (V3) non richiede alcuna interazione da parte degli utenti. Al contrario, monitora in modo trasparente l’attività degli utenti in background per distinguere tra visitatori umani e visitatori bot. Poiché Contact Form 7 supporta reCAPTCHA V3, vi consigliamo di usare quest’ultima versione perché fornisce una migliore esperienza utente per i visitatori.
Per impostare reCAPTCHA, dovete prima di tutto generare una chiave API. Per farlo, accedete al vostro account Google e andate alla pagina di configurazione di reCAPTCHA.
Compilate il modulo di registrazione per creare il vostro reCAPTCHA.
- Label – Specificare un’etichetta a vostra scelta.
- reCAPTCHA Type – Contact Form 7 supporta reCAPTCHA v3, quindi selezionate quella versione.
- Domain – Se il vostro sito usa un dominio root, aggiungete la versione non-wwww e www del vostro dominio. Se il vostro sito usa un sottodominio, basta aggiungere il sottodominio.
- Owners – L’indirizzo email associato al vostro account Google verrà aggiunto come proprietario per impostazione predefinita. Sentitevi liberi di aggiungere altri indirizzi email se necessario.
Dopo aver compilato tutte le opzioni, fate clic su Submit. Vi saranno quindi presentate la vostra chiave del sito (site key) e la chiave segreta (secret key) specifiche per il sito. Assicuratevi di conservare queste chiavi in un luogo sicuro, perché dovrete aggiungerle a Contact Form 7.
Successivamente, fate clic su “Contact” nella barra laterale della bacheca WordPress e fate clic su Integration. Selezionate l’opzione reCAPTCHA, e incollate la chiave del sito e la chiave segreta nei rispettivi campi. Infine, fate clic su Save changes per finalizzare l’integrazione reCAPTCHA.
Configurare il reCAPTCHA in Contact Form 7.Dopo aver configurato il reCAPTCHA in Contact Form 7, vedrete un logo reCAPTCHA nell’angolo in basso a destra della pagina del modulo di contatto. Questo significa che reCAPTCHA è attivo e sta proteggendo il vostro modulo di contatto da invii di spam.
Proteggere il Modulo di Contatto con Cloudflare (Opzionale)
Se usate Cloudflare per proteggereil vostro sito, potete impostare una speciale regola di pagina per il vostro modulo di contatto e ridurre così l’invio di spam.
Per aggiungere una regola di pagina, fate clic sulla scheda “Page Rules” e usate le seguenti impostazioni per rendere sicura la pagina di contatto:
- If the URL Matches – *your-domain.com/your-contact-page/*
- Browser Integrity Check – On
- Security Level – High
La funzione “Browser Integrity Check” di Cloudflare analizza le intestazioni HTTP. Se rileva un header HTTP comunemente usato da bot e spammer automatici, nega la richiesta al vostro sito. Impostare il livello di sicurezza (“Security Level”) su high metterà alla prova tutti i visitatori che hanno avuto un comportamento dannoso nelle ultime due settimane.
Limitando queste impostazioni alla vostra pagina di contatto con la regola di corrispondenza dell’URL, le altre pagine del vostro sito non saranno interessate. Raccomandiamo questa configurazione perché le normali pagine di “sola lettura” del vostro sito non richiedono in genere un’impostazione di livello di sicurezza più elevato.
Riepilogo
Contact Form 7 è il plugin per i moduli di contatto più popolare e per una buona ragione! Potete usarlo per creare qualsiasi cosa, dai moduli di contatto più semplici, ai quiz di domande e risposte, ai moduli complessi che supportano gli allegati di file e i menu a tendina.
La cosa migliore è che include il supporto integrato reCAPTCHA per aiutare a proteggere il vostro modulo di contatto dagli spammer.
Usate Contact Form 7 sul vostro sito WordPress? Se no, qual è la vostra opzione preferita? Fatecelo sapere nella sezione commenti qui sotto!
Brian utilizza WordPress da oltre 10 anni e si diverte a condividere le sue conoscenze con la community. Nel tempo libero, Brian ama suonare il pianoforte ed esplorare Tokyo con la sua macchina fotografica. Potete mettervi in contatto con Brian sul suo sito web all'indirizzo brianli.com.
Lascia un commento