Contact Form 7 è uno dei plugin più utilizzati su WordPress per implementare un form di contatto. La sua versatilità e le numerose estensioni esistenti per integrarlo con ulteriori funzionalità, ne fanno uno strumento potente ed adatto a molti tipi di utilizzo. Nella directory dei plugin di WordPress trovate estensioni per sistemi di booking, prenotazioni, mailchimp, paypal, per creare form multi step e tanto altro. Inoltre, moltissimi temi premium per WordPress lo utilizzano di default per i propri form di contatto.

Oggi ci occuperemo della sua configurazione di base di Contact Form 7, quella configurazione che a volte risulta ostica a causa di varie segnalazioni di errore sul pannello della creazione del form.

Configurazione Contact Form 7 (CF7)

Inizieremo la configurazione di Contact Form 7 su WordPress partendo dalla creazione del modulo di contatto in modo da poter capire tutti gli step da seguire per integrare il form sul sito web.

Come creare un modulo di contatto con Contact Form 7

Una volta installato il plugin CF7 su WordPress, nella barra dei menu laterale comparirà la voce “CONTATTI“, contrassegnato con l’icona di una busta da lettera. Clicchiamoci sopra e poi clicchiamo su “AGGIUNGI NUOVO“.

Dopo qualche istante ci comparirà il pannello per la creazione e la configurazione del form di contatto di CF7, come nell’immagine seguente.

Come noterete, avrete una serie di “TAB“:

• Modulo
• Mail
• Messaggi
• Impostazioni Aggiuntive

Inoltre l’area di testo destinata alla creazione della mailbox è già compilata con le impostazioni di default.

Proprio sopra l’area compilabile, vi sono dei pulsanti che servono ad inserire degli elementi sotto forma di shortcodes.

La prima cosa da fare è dare un nome al contact form. Per il nostro esempio lo chiameremo Form di Prova. Voi popolate il campo “Inserisci qui il titolo” con un nome a piacere.

Guardate i dati precompilati del form… sono scritti nella seguente forma

<label> Il tuo nome (richiesto)
</label>

<label> La tua email (richiesto)
[email* your-email] </label>

<label> Oggetto
</label>

<label> Il tuo messaggio
[textarea your-message] </label>

[submit “Invia”]

La parola label tra apici, indica l’etichetta da scrivere sul form. Nel caso de “Il tuo nome”, comparirà la frase “Il tuo nome” accanto al campo dove andrà inserito il nome della persona che compila il form. Il campo viene integrato sul form grazie allo shortcode . L’asterisco sta ad indicare che è un campo “obbligatorio”.

Stessa cosa per tutte le altre voci.

Potrebbe essere utile però integrare le voci di default con altri elementi, come ad esempio il numero di telefono. Per integrarlo basterà posizionare il cursore nella posizione in cui vogliamo che il campo appaia e cliccare sul pulsante “TEL“.

Se provate vedrete comparire questa maschera.

Flaggate la prima casella se desiderate che questo campo sia obbligatorio e poi cliccate sul pulsante “INSERISCI TAG“.

L’inserimento del tag, non creerà l’etichetta aggiuntiva che dovrete scrivere voi, inserendo la voce che identifica il campo tra i tag <label>. Guarda l’immagine che segue.

Grazie a questo metodo potete inserire vari campi, non in ultimo quello del reCaptcha (che richiede però l’utilizzo delle API di Google). Una valida alternativa al reCaptcha può essere l’inserimento del tag “QUIZ” che permette, in maniera molto semplice di integrare sul form una domanda a cui rispondere prima di poter inviare l’email dal form.

Altro elemento che non deve mancare è la casella da flaggare per l’accettazione della privacy policy e dell’utilizzo dei cookie del sito web. Lo potete fare cliccando sul pulsante “ACCETTAZIONE“.

I tag presenti possono essere integrati grazie alle estensioni di cui parlavamo prima. Basta installare l’estensione desiderata e vi comparirà il pulsante per la generazione dello shortcode, pronta per essere utilizzata.

Configurazione tab MAIL di Contact Form 7

Una volta inseriti i tag desiderati, si deve passare alla configurazione di Contact Form 7 nella tab “MAIL“.

Ecco come si presenta la TAB precompilata.

Se leggi sopra i campi da compilare, potrai notare che il plugin ti dice che in questo form puoi utilizzare determinati tag. Sono esattamente i tag che hai trovato e/o creato nella Tab “MODULO“.

Nel nostro form di esempio abbiamo aggiunto il campo “TELEFONO” e questo dovrà essere aggiunto in questa tab.

Nella tab “MAIL” dunque troviamo i campi:

• A – qui ci va l’indirizzo di destinazione dove verranno inviate le email provenienti dal form
• DA – qui invece ci va l’intestazione del mittente, di solito l’email di colui che ha compilato il form ed inviato l’email
• INTESTAZIONI ADDIZIONALI – qui si deve inserire lo shortcode della email del mittente in modo da attivare il reply-to in fase di risposta. E’ anche possibile inserirvi ulteriori email, da utilizzare nel caso ad esempio, si voglia ricevere su un’altra email la risposta inviata. per tenerne traccia. Le altre email vanno inserite una per riga.
• OGGETTO – qui ci va l’oggetto della email, quella che compare in anteprima nella posta in arrivo della vostra email.
• CORPO DEL MESSAGGIO – qui ci vanno le informazioni che l’utente ha inserito nei campi del form

Innanzi tutto, dovremo inserire nel campo “CORPO DEL MESSAGGIO“, gli eventuali campi aggiunti al form di default. In questo esempio dovremo inserire i telefono. Basterà aggiungere, prima o dopo la voce Corpo del Messaggio, la voce che segue.

Telefono :
[tel-853] (il codice che il plugin ha generato quando lo ho aggiunto nel from di prova)

Ecco come sarà la nostra Tab “MAIL” dopo la configurazione.

Spesso il plugin ci segnala degli errori che ora andremo a vedere come risolvere.

Correggere gli errori del Plugin Contact Form 7

Contact Form 7 spesso ci segnala degli errori nella configurazione del tab email.

Nel nostro caso abbiamo i seguenti errori:

• Campo DA: Sender email address does not belong to the site domain
• Campo OGGETTO: There is a possible empty field

Ma è possibile anche avere anche altri errori come quello che può verificarsi nel campo “INTESTAZIONI ADDIZIONALI” che recita “Invalid mailbox syntax is used” o “There are invalid mail header fields“.

Come correggere questi errori? Una piccola mano ce la da Contact Form stesso a questo indirizzo. Ho trovato però queste informazioni di aiuto altamente incomplete, per cui mi sono ingegnato per vedere come risolvere i problemi da solo.

Ecco allora come configurare correttamente Contact Form 7

Nel campo A, inserite l’indirizzo email di destinazione del form.

Nel campo DA, inserite il tag relativo al campo NOME del form, seguito da una email che abbia come estensione il nome del dominio (esempio: info@nometuosito.xx). Se non l’avete, provvedete a crearla.

Se il tuo sito si chiamasse www.nomesito.com, ecco come dovrebbe essere popolato:

[your-name] <info@nomesito.com>

Per completezza, funziona anche con il valore di default wordpress@nomesito.com

Nel campo OGGETTO, onde evitare che se il mittente avesse omesso di compilare il campo oggetto (ipotesi verificabile se non fosse stato impostato come obbligatorio), è consigliabile metterne uno di default.

Per esempio potete scriverci: . Hai ricevuto una email dal tuo sito

Altro possibile scenario per il campo OGGETTO è che un errore si generi anche se il campo risulta essere obbligatorio. In questo caso utilizzate questa sintassi per eliminare l’errore:

Oggetto “[your-subject]”

Nel campo INTESTAZIONI ADDIZIONALI, dovete inserire lo shortcode generato dal campo email. Se mantenete lo shortcode di default non dovete cambiare nulla. Per essere validato il campo deve essere “obbligatorio”. Ecco la sintassi giusta:

Reply-To: [your-email]

oppure

Reply-To: [shortcode-generato]

Sia per l’errore “Invalid mailbox syntax is used“, sia per l’errore “There are invalid mail header fields“, fate attenzione ad impostare nella tab “Modulo”, l’indirizzo email come campo obbligatorio (*). In assenza di questo parametro uno dei due tipi di errore sarà visualizzato.

Infine, configurate il CORPO DEL MESSAGGIO così:

In questa maniera riceverete le email da form di contatto del sito sulla vostra casella di posta avendo:

• Nome Mittente
• Email Mittente
• Oggetto dell’email
• Messaggio scritto nel corpo
• Telefono del mittente

Ulteriori personalizzazioni Contact Form 7

Il plugin WordPress Contact Form 7 vi permette di configurare il form di contatti presente sul vostro sito in maniera professionale. Grazie agli strumenti nativi e alle numerose estensioni nate intorno a questo plugin, potrete utilizzarlo per ogni tipo di necessità.

La tab MESSAGGI del plugin, vi permette invece di personalizzare i messaggi di sistema del plugin, come ad esempio il messaggio da restituire a schermo in caso di successo nell’invio della email o quello per avvisare che non si sono compilati i campi obbligatori.

In IMPOSTAZIONI ADDIZIONALI invece vi è la possibilità di inserire degli shortcode che permettono di mettere il form in modalità demo per i test ed altre funzioni che trovate qui.

Necessario, se volete creare dei form personalizzati ed accattivanti graficamente, è avere una minima conoscenza dei CSS.

Reindirizzare alla “Thank-You Page” con CF7

Una delle maggiori difficoltà comunemente incontrate quando si utilizza Contact Form 7 è la mancanza di un sistema automatico per reindirizzare gli utenti alla pagina “grazie” quando si clicca sul pulsante invia. CF7 infatti si limita a visualizzare un messaggio di ringraziamento sulla pagina stessa del form.

Se avete bisogno di reindirizzare gli utenti alla pagina grazie potete utilizzare l’add-on “Contact Form 7 Redirection” il cui funzionamento troverete spiegato in questo mio articolo.

Contact Form per uso interno a scuole ed aziende

Volendo è anche possibile creare un form per inoltrare delle domande precompilate. Mi vengono in mente ad esempio gli istituti scolastici o quelle aziende che abbiano un sito con l’area riservata. In questo tipo di siti è possibile utilizzare contact form 7 per inoltrare in maniera rapida una richiesta di ferie o di permesso orario. Basterà predisporre i campi ed inserire gli shortcode nei punti necessari.

Ad esempio

Il sottoscritto [campo-nome], chiede al Signor Direttore, numero [campo-numero] ore di permesso, da effettuarsi il giorno [campo-data] per motivi [campo-motivi].

 

Per quel che concerne la configurazione di Contact Form 7, conosciuto anche con l’abbreviazione CF7, è tutto. Ora sta a voi divertirvi con le varie opzioni e le varie estensioni disponibili per creare un form adatto al vostro sito web.