Configurare Contact Form 7 (#CF7) per WordPress

Utilizzare CF7 come modulo di contatto

Autore: Andrea Pacchiarotti
Ultimo aggiornamento: 21 Ottobre 2020
Categoria: Web Marketing CMS WordPress Contact Form 7

Configurare Contact Form 7 (#CF7) per WordPress
Configurare Contact Form 7 (#CF7) per WordPress

Contact Form 7, noto anche con l’abbreviazione CF7, è certamente uno dei plugin più usati su WordPress per introdurre un modulo di contatto nel proprio sito web, è infatti il form di default di molti temi Premium come ad esempio Avada. L’ecletticità, la facilità d’uso e le estensioni disponibili per ampliarne le funzionalità, lo caratterizzano come un tool potente e ottimo per svariati usi. Se non usi WordPress e vuoi costruire un form da zero, ti consiglio la lettura di PHP form e PHP form upload.

Sommario Configurare Contact Form 7 (#CF7) per WordPress


Plugin per Contact Form 7

A prescindere dalle svariate estensioni, vediamo come effettuare la configurazione di Contact Form 7, dato che a volte risulta ostica.

Creare un modulo con Contact Form 7

Installato il plugin CF7 su WordPress, nella barra laterale di sinistra compare la voce Contatto, cliccandoci sopra appare Aggiungi nuovo e cliccando tale voce ci troviamo di fronte il seguente pannello per la configurazione del form di contatto CF7:

Configurare Contact Form 7 (#CF7) per WordPress
Configurazione del form di contatto CF7

Nella parte superiore ci sono quattro schede, ovvero Modulo, Mail, Messaggi, Impostazioni Aggiuntive, mentre nell’area sottostante appare già compilato un form di default.
Inoltre sopra tale area ci sono dei pulsanti utili a inserire ulteriori elementi.
Per prima cosa bisogna dare un nome al form dalla casella di testo superiore intestata Aggiungi nuovo modulo di contatto, chiamiamolo ProvaForm.
Diamo ora uno sguardo ai dati precompilati del form:
<label> Il tuo nome (richiesto)
    [text* your-name] </label>

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

<label> Oggetto
[text your-subject] </label>

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

[submit "Invia"]

Il tag label indica l’etichetta da scrivere sul form, ad esempio nel caso
<label> Il tuo nome (richiesto)
[text* your-name] </label>
comparirà la frase “Il tuo nome” vicino al campo per l’inserimento del nome dell’utente che compila il form. L’asterisco indica che è un campo obbligatorio.
Idem per le altre voci.
Per integrare le voci di default con altri elementi, ad esempio il numero di cellulare, posizionare il cursore dove desideriamo il campo appaia e cliccare il pulsante, già pronto, tel.

Comparirà questa finestra:

Configurare Contact Form 7 (#CF7) per WordPress
Configurazione del form di contatto CF7

Spuntate la prima casella di controllo affinché il campo risulti obbligatorio e poi cliccate 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>, infatti vedrete solo il seguente codice:
[tel tel-331].
Con questo metodo potete inserire svariati campi, come ad esempio reCaptcha (che richiede però l’uso delle API di Google) o come alternativa al reCaptcha è possibile inserire il tag quiz che consente, in modo semplice, l’integrazione sul modulo di una domanda a cui rispondere correttamente per poter inviare l’email dal form.
Altro elemento obbligatorio è l’accettazione della privacy policy e dell’uso dei cookie del sito web; per impostarlo bisogna cliccare il pulsante accettazione.
I tag presenti sono integrabili con le estensioni accennate prima: basta installare quella voluta per far comparire il relativo pulsante.

Configurazione della Mail di Contact Form 7

Inseriti i tag desiderati passiamo alla configurazione di Contact Form 7 nella scheda Mail, dove troviamo i campi:

Per inserire la casella di controllo, da spuntare obbligatoriamente allo scopo di consentire il trattamento dei dati personali ai sensi del GDPR 2016/679, bisogna cliccare il tag Accettazione per aprire la finestra che consentirà la creazione della casella di controllo. Qui troverai:

Errori del plugin Contact Form 7

Contact Form 7 può segnalare degli errori nella configurazione del tab Mail ad esempio:

Per correggere gli errori possiamo farci aiutare da Contact Form stesso che a questo link ha pubblicato varie soluzioni relative all’Admin screen, ma se avete errori significa che non avete seguito bene i passaggi precedenti.

Ulteriori personalizzazioni Contact Form 7

La tab Messaggi permette di personalizzare i messaggi di sistema del plugin, ecco cosa si ha a disposizione (la seconda riga di ogni punto elenco è la frase che potete personalizzare):

Per ulteriori dettagli è possibile vedere Editing messages.

In Impostazioni Addizionali è possibile inserire degli shortcode che consentono di mettere il form in modalità demo per i test e altre funzioni, per ulteriori informazioni vedere Additional settings.

Reindirizzare alla Thank You Page

Per reindirizzare gli utenti alla pagina Grazie, anziché visualizzare un messaggio di ringraziamento sulla pagina stessa del form, potete utilizzare l’add-on Contact Form 7 Redirection.
Installato e attivato, il plugin aggiungerà la scheda Redirect Settings nelle impostazioni di Contact Form 7, dopo la tab Impostazioni aggiuntive. L’uso è di una semplicità disarmante: basterà infatti inserire la pagina di ringraziamento nel primo campo, denominato Select a page to redirect to on successful form submission, e il lavoro è terminato.
È anche possibile inserire degli script nella pagina di ringraziamento incollandoli nel campo di testo Here you can add scripts to run after form sent successfully. Ad esempio ci si potrebbe inserire lo script di Google Analytics, omettendo i tag di apertura e chiusura <script>, per tracciare le conversioni della pagina corrente.

Ti potrebbe interessare leggere alcuni articoli di Web Marketing



Per saperne di più sul Web Marketing potrebbero interessarti questi libri:

Se vuoi approfondire alcuni dei temi trattati, visita la pagina con le mie pubblicazioni cartacee e online.

Se l'articolo ti è piaciuto, condividilo!

Segui l'hashtag #AndreaPacchiarotti