Contact Form 7 – La Guida Completa [VIDEO]

Cari amici, oggi vogliamo parlarvi di un ottimo e veramente comodo plugin per WordPress dedicato alla creazione e gestione di qualunque tipo di form di contatto.

contact form 7

contact form 7


 

Parliamo di Contact Form 7, famoso plugin utilizzato da più di 5 milioni di siti web, che propone una comoda interfaccia per creare, gestire e personalizzare qualunque form di contatto in tutta semplicità ( o quasi 🙂 ). Oggi lo facciamo sia attraverso questa recensione, sia tramite un video creato dal nostro Fabrizio Leo e che potete trovare sempre in questo articolo.

Bando alle ciance dunque ed andiamo subito ad analizzare il plugin partendo dalle specifiche tecniche.

 

CARATTERISTICHE TECNICHE CONTACT FORM 7

  • Versione: 4.9
  • Installazioni attive: Più di 5 milioni 
  • Richiede la versione di WordPress: 4.7
  • Testato fino alla versione di WordPress: 4.8.1

 

PERCHÉ CONTACT FORM 7

Alcune settimane fa abbiamo pubblicato una guida che mostrava come scegliere i plugin più affidabili da utilizzare nel nostro progetto. Stando a quanto pubblicato quindi, abbiamo voluto provare a cercare la chiave “contact form” nel repository di WordPress; a seguire vi proponiamo lo screen:

Ci sembra sia molto importante il dato delle installazioni attive di questo plugin che, come potete vedere, risulta primo come scelta: è un plugin costantemente aggiornato, compatibile e testato anche con l’ultima release di WordPress, la 4.8.1.

 

INSTALLAZIONE

Come da prassi, installare questo o qualunque altro plugin per WordPress è davvero molto facile. Vi basterà cliccare su “aggiungi nuovo” direttamente dal backend della vostra installazione per trovarvi davanti il repository ufficiale del CMS dove potete cercare direttamente il plugin in questione ed installarlo in due click.

Se invece la vostra installazione, per dei limiti bloccanti, non consente di farlo da qui, dovrete scaricare il plugin Contact Form 7 direttamente dal repository di WordPress e inserirlo, via FTP, nella directory wp-content/plugins/ del vostro spazio web.

 

CONFIGURAZIONE E CREAZIONE DEL PRIMO FORM DI CONTATTO

Dopo aver installato Contact Form 7, nel menù del backend di WordPress ci troveremo la nuova voce “Contatti”:

Basterà cliccarci sopra per vedere subito la lista dei form che il plugin ci propone:

Come si evince dall’immagine, siamo davanti così ad una semplice lista di contatti e, come WordPress ci ha abituati, possiamo crearne di nuovi o metter mano a quello che il plugin ha già creato di default.

Vediamo ora come creare un nuovo form di contatto cliccando in alto a sinistra sull’apposito pulsante “Aggiungi nuovo”; successivamente ci troveremo davanti a questa interfaccia:

Oltre al titolo che possiamo dare al nostro form appena creato, la prima scheda “Modulo” mostra il modulo contatti già pronto dove, volendo, possiamo inserire alcuni elementi di testo o numero semplicemente cliccando sui vari pulsanti in alto. Cliccando ad esempio sul pulsante “Pulsanti di opzione”, otterremo questa piccola finestra:


Il campo “nome” è il nome del campo che poi ritroveremo nella stringa che la finestra inserirà in automatico nel form. Il campo “opzioni” è dedicato alle possibilità che daremo all’utente mentre l’attributo id e classe sono relative ai CSS. Il resto sono soltanto delle altre configurazioni, una con etichetta e una casella di controllo, l’ultima che accorpa ogni elemento con un’etichetta.

Tutti gli altri pulsanti hanno impostazioni simili, quindi vi invitiamo a provare le varie possibilità che questa sezione del plugin Contact Form 7 propone. Per i più “smanettoni” invece è possibile inserire codice HTML direttamente nel riquadro di testo dove sono presenti i vari elementi con i tag HTML.

La scheda “Mail” consente invece di decidere a chi inviare la comunicazione con il contenuto del messaggio che un potenziale utente o cliente ha scritto direttamente nel nostro form di contatto. I dati, come potete vedere, sono uguali a quella di una qualunque e-email e, anche qui, possiamo utilizzare tranquillamente codice HTML.

I messaggi che il form può restituire in caso di errore o di mancata compilazione possono essere personalizzati nella scheda omonima con le traduzioni che sono già in italiano ma, volendo, si possono modificare a proprio piacimento. È bene sempre dedicare cinque minuti per migliorare al massimo questi feedback e personalizzarli in base al nostro progetto, così facendo si creeranno dei messaggi più diretti allo scopo del form che, ricordiamo, può anche essere una richiesta di preventivo o qualunque altro tipo di comunicazione tra il potenziale cliente e noi.

 

UTILIZZO DELL’EMAIL SECONDARIA

Una caratteristica molto importante e di cui quasi nessuno parla, è la possibilità di far inviare direttamente dal nostro form di contatto, due mail diverse a seconda dello scopo del form. A seguire vi mostriamo come attivare questa funzione:

Vi basterà cliccare su “Usa Mail (2)” per utilizzare la seconda mail che il form potrà così inviare automaticamente una volta che lo stesso form di contatto sarà compilato da parte dell’utente.

Questa possibilità risulta molto comoda se, per esempio, vogliamo inviare un promemoria all’utente dove gli andiamo a riepilogare tutto il messaggio che ha scritto direttamente nel nostro form di contatto creato con Contact Form 7. La Mail principale invece conterrà il messaggio che l’utente ha scritto e lo recapiterà direttamente all’amministratore del sito web.

Un altro utilizzo di questa funzione potrebbe essere quella di inviare una mail diversa a seconda della scelta dell’utente di contattare un reparto piuttosto di un altro: pensate ad esempio ad una richiesta di preventivo o alla semplice richiesta di informazioni. La richiesta di preventivo può arrivare direttamente ad una mail dedicata a questo scopo e quindi al reparto competente, mentre la richiesta di informazioni generica può arrivare direttamente all’amministratore del sito web.

 

INSERIMENTO DEL FORM NEL NOSTRO SITO

Una volta che abbiamo creato, configurato e personalizzato il form di contatto con Contact Form 7, non ci rimane che andarlo ad inserire nel nostro sito. Come facciamo?

Quando cliccate su “moduli di contatto” o semplicemente dal menù “Contatti”, il plugin vi mostra la lista dei form contatti con il relativo shortcode, come abbiamo già visto sopra e che vi riproponiamo qui sotto evidenziando il codice:

Lo stesso shortcode lo potete trovare direttamente dentro al form contatti, come mostrato di seguito:

Vi basterà prendere questo shortcode ed inserirlo nel vostro sito in pagine, articoli oppure in un widget. Semplice vero? A seguire vi mostriamo un esempio:

 

INTEGRARE reCAPTCHA PER PROTEGGERSI DALLO SPAM

Come ultima risorsa, ma non per importanza, il plugin Contact Form 7 propone un reparto integrazioni. A seguire la schermata dedicata:

In questo menù troverete la possibilità di impostare il reCAPTCHA tramite delle chiavi. Il reCAPTCHA è uno strumento che obbliga l’utente a fare un’attività (di solito un click del mouse) prima di inviare il messaggio del form compilato. In questo modo si evita che alcuni spambot automatici possano inviare messaggi di spam. Grazie quindi al reCAPTCHA, andremo ad inserire nel form un segno di spunta che gli utenti dovranno necessariamente cliccare per “dimostrare di essere umani”.


Per far ciò dobbiamo fare un passo indietro e andare a configurare le chiavi per il reCAPTCHA cliccando su “configura le chiavi”. Arriverete così alla seguente schermata:

Ora dobbiamo però andarci a creare le chiavi cliccando in alto a destra il link che ci porterà al servizio di Google reCAPTCHA.

Qui dobbiamo impostare il tipo di reCAPTCHA che vogliamo inserire nel nostro form contatti. Il primo è il famoso pulsante di spunta (che abbiamo visto poco fa), il secondo è quello invisibile mentre il terzo è quello dedicato soltanto all’ambito mobile su sistema operativo Android.

Una volta che abbiamo impostato il dominio nella sezione apposita e scelto il tipo di reCAPTCHA, ci ritroveremo in questa schermata:

Abbiamo ovviamente oscurato le chiavi che il sito ci ha fornito per questa prova ma voi dovrete inserirle e darle in “pasto” al Contact Form 7 che provvederà così ad attivare il servizio.
Fatto questo, dovrete inserire lo script dentro il tag head del vostro sito, più specificamente nel file header.php della vostra installazione di WordPress, dopodichè inserire lo snippet direttamente nel form che avete appena creato in Contact Form 7.

La sezione del “passaggio 2” di cui sopra è dedicata all’integrazione lato server del reCAPTCHA. Nella maggior parte dei casi questa sezione non serve e per chi volesse approfondire, rimandiamo alla documentazione ufficiale.

 

ALCUNI ESEMPI DI FORM CONTATTO

Ora vediamo alcuni esempi di form di contatto che possiamo creare con il plugin Contact Form 7, per dare uno spunto a chi magari non ha molta dimestichezza con questo strumento.

<p>Il tuo nome (richiesto)<br />
[text* your-name] </p>

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

<p>Oggetto<br />
[text your-subject] </p>

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

Questo è un form di contatto standard che di solito viene proposto, seppur in modo diverso, direttamente dal plugin quando andiamo a creare un form moduli di contatto. Da qui possiamo direttamente modificarlo a nostro piacimento, andando ad inserire nuovi elementi in base alle nostre esigenze.

Se invece, nel vostro form contatti, volete inserire direttamente una spunta per la privacy policy del vostro sito, vi basterà utilizzare questa stringa:

Confermo di accettare la <a href=”http://www.dominio.xxx/privacy-policy”>[checkbox* checkbox-268 “Privacy Policy”]</a> di <a href=”http://www.dominio.xxx/privacy-policy”>nome azienda</a>.

Oppure un’altra versione con:

<input type=”checkbox” name=”acceptance-670″ value=”0″ class=”wpcf7-form-control wpcf7-acceptance” aria-invalid=”false”> Ho letto e accetto la <a href=”https://www.dominio.xxx/privacy-policy/” target=”_blank”>Privacy</a> di nome azienda.

Tutti i form di contatto creati con Contact Form 7 sono, di default, su un’unica colonna.
In questo articolo, vogliamo fornirvi un esempio pratico con il codice esatto per creare un form di contatto personalizzato su due colonne.

Ovviamente se utilizziamo già un tema responsive professionale, nel nostro caso BeTheme, potrebbe anche non servire inserire le righe qui sotto nel codice del contact form, ma magari abbiamo bisogno di creare comunque un form su due colonne, abbinato a qualche elemento del tema che abbiamo già.

 

ESEMPIO FORM DI CONTATTO SU DUE COLONNE

<div id=”colonne”>
<div id=”colonna1″>
<p>Nome
[text* first-name] </p>
<p>Cognome
[text* last-name] </p>
<p>Email
[email* email-474]
</p>
</div>
</div>
<div id=”colonne”>
<div id=”colonna2″>
<p>Oggetto
[text* object]
</p>
<p>Scrivi qui…
[text* text-891]
</p>
<p>
[submit “Invia”]
</p>
</div>
</div>
<style>
#colonne{
width: 100%;
}
#colonne #colonna1{
width: 75%;
float: center;
}
#colonne #colonna2 {
width: 75%;
float: center;
}
#colonne p {
margin-bottom: 12px;
}
#colonne {
border: none;
font-size :14px;
width: 50%;
}
#colonne #colonna2, #colonne #colonna1 {
width:240px;
}
#colonne {
position: relative;
border: none;
width: 250px;
}
#colonne {
padding: 1% 1% 1% 1%;
background:#222;
color:#fff;
border: none;
float:left;
font-size: 14px;
}
#colonne {
background: #eee;
}
#colonne {
background:#fff;
color:#222;
border: none;
}
{
</style>

Per chi è più curioso e vuole infine metter mano al pulsante “Invia”, visto che nel nostro caso non è completamente allineato, basterà modificare il tema “child”, andando a cambiare il “margin-top” della classe “input[type=”submit”]”, per fare in modo che venga allineato al resto del form contatto. Di solito queste impostazioni sono relative ai file CSS, quindi si dovrà modificare il file style.css oppure il file base.css nel caso del tema BeTheme.

 

Nota importante per i temi:

queste personalizzazioni che riguardano il file header.php del vostro tema, è bene che vengano applicate all’interno del tema child onde evitare che gli aggiornamenti del tema sovrascrivano queste modifiche.

 

CONCLUSIONE

Contact Form 7 è un plugin che a noi piace molto: semplice, intuitivo e molto versatile. Consente infatti di creare qualunque form contatto con invio file, selezione di più elementi tramite menù a tendina o “pallini”, dalle richieste di informazioni generiche a quelle più dedicate e personalizzate e molto altro ancora.

Il plugin Contact Form 7 è ideale per chi necessita di avere nel proprio sito web un sistema che gestisca più form contatto per diverse tipologie di informazioni: preventivi, richieste di aiuto, semplici informazioni, invio di file da analizzare, sondaggi e molto altro.

Il plugin per WordPress Contact Form 7 lo potete trovare direttamente nel repository ufficiale di WordPress.org a questo indirizzo. Per chi invece volesse leggersi la documentazione, la può trovare a questo link.

A seguire vi lasciamo con il video di Fabrizio Leo, che ci spiega come installare, configurare e creare un form di contatto personalizzato con Contact Form 7.
Subito sotto al video invece vi proponiamo i codici che Fabrizio ha utilizzato per i moduli di contatto.

Codici del form utilizzati nel video:

<label> Il tuo nome (richiesto)
[text* your-name] </label>

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

<label> Numero di telefono (richiesto)
[tel* tel-49] </label>

<label> Come mi hai conosciuto? (richiesto)
[select* menu-927 “Evento/Fiera” “Meetup” “Pubblicità su Facebook” “Pubblicità su Google” “Passaparola”] </label>

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

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

[recaptcha]

[submit “Invia”]

Non dimenticate il campo [your-email] che dovrete utilizzare nella mail secondaria per permettere all’utente di ricevere una mail automatica di cortesia.

Non resta che darvi appuntamento al prossimo articolo, dove vi mostreremo come, grazie ad un’estensione di Contact Form 7, è possibile utilizzare i vostri form di contatto per la creazione di un database contatti a supporto delle vostre campagne di lead generation.

6 Commenti

  1. Danilo Pontone 18/09/2017
    • Michele Bruno 18/09/2017
  2. Fabrizio 13/10/2017
    • Michele Bruno 13/10/2017
  3. Fabrizio 13/10/2017
    • Michele Bruno 13/10/2017

Rispondi all'articolo

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

Time limit is exhausted. Please reload the CAPTCHA.