Contact Form 7 su WordPress
Contact Form 7 è un plugin di WordPress che ti consente di inserire dei moduli di contatto all’interno delle pagine del tuo sito. Le caratteristiche principali del plugin sono:
- Possibilità di creare più di un modulo
- Invio delle informazioni tramite Ajax (quindi senza ricaricare la pagina)
- Compatibile con il CAPTCHA
- Filtraggio dello SPAM dal plugin Akismet
Prerequisito
- Aver configurato WordPress affinché utilizzi SMTP per l’invio dei messaggi. Se ancora non lo hai fatto segui questa guida.
Come installare Contact Form 7
Il plugin può essere installato tramite due metodi:
- tramite il pannello di WordPress
- tramite FTP
Installazione tamite il pannello di WordPress
Entra nel pannello di WordPress del tuo sito e nel menù a sinistra clicca su Plugin -> Aggiungi nuovo. Quindi cerca “Contact Form 7”. Il plugin da installare ha come autore Takayuki Miyoshi.
Clicca sul tasto “Installa ora” e poi su “Attiva”.
Installazione tramite FTP
Vai sul sito di WordPress e scarica il pacchetto zip relativo al plugin, scaricabile anche cliccando qui.
Una volta scaricato il pacchetto ed estratto il contenuto, accedi al tuo FTP e vai in wp-content/plugins. Qui incolla il contenuto del pacchetto zip relativo al plugin (ovvero la cartella contact-form-7).
Ora vai nel pannello di WordPress e nel menù a sinistra clicca su Plugin -> Plugin installati. Cerca il plugin Contact Form 7 e clicca su “Attiva”.
Come creare un modulo Contact Form 7
Una volta attivato il plugin, nel menù a sinistra del pannello di WordPress comparirà una nuova voce con il testo Contatto.
Per creare un modulo di contatto andare in Contatto -> Aggiungi nuovo.
Si aprirà la pagina in cui puoi creare il modulo.
Titolo del modulo
Nel campo “Inserisci qui il titolo” inserisci, appunto, un titolo al modulo, che servirà solo per identificare quello specifico modulo.
Campi del modulo
Nella sezione “Modulo” puoi creare il tuo modulo personalizzato scegliendo tra testo, email, URL, tel, numero e via dicendo.
Ad ogni campo inserito bisogna dare un nome specifico al fine poi di passare le corrette informazioni nella nostra email quando riceveremo le informazioni di un contatto. Per farla più semplice ora creo un modulo di contatto di esempio così riesci a capire meglio come funziona.
Facciamo l’esempio che io voglia creare un modulo di contatto che richieda all’utente:
- Nome
- Cognome
- Telefono
- Campo per inserire un messaggio
- Condizione da accettare affinché il messaggio possa essere inviato
- Tasto Invia
Per prima cosa inserisco il titolo al modulo di contatto (che sarà Modulo di esempio).
Nome e Cognome
Per inserire il campo relativo al Nome clicco su testo:
- voglio che il campo sia obbligatorio, quindi spunto la casella relativa a “Campo Richiesto”;
- nel campo “Nome” inserisco nome, perché appunto identifica il campo in cui l’utente inserirà il proprio nome;
- clicco su “Inserisci Tag”.
Ripetere la stessa procedura per creare il campo relativo al Cognome, inserendo cognome nel campo “Nome”.
Telefono
Per inserire il campo relativo al numero di telefono clicco su tel:
- non voglio che il campo si obbligatorio, quindi lascio non spuntata la casella relativa a “Campo Richiesto”;
- nel campo “Nome” inserisco telefono, perché appunto identifica il campo in cui l’utente inserirà il proprio numero di telefono;
- clicco su “Inserisci Tag”.
Per inserire il campo relativo all’email clicco su email:
- voglio che il campo sia obbligatorio, quindi spunto la casella relativa a “Campo Richiesto”;
- nel campo “Nome” inserisco email, perché appunto identifica il campo in cui l’utente inserirà la propria email;
- clicco su “Inserisci Tag”.
Messaggio
Per inserir il campo relativo al messaggio clicco su area di testo:
- voglio che il campo sia obbligatorio, quindi spunto la casella relativa a “Campo Richiesto”;
- nel campo “Nome” inserisco messaggio, perché appunto identifica il campo in cui l’utente inserirà il proprio messaggio;
- clicco su “Inserisci Tag”.
Condizione da accettare
Per inserire l’accettazione della condizione clicco su accettazione:
- nel campo “Nome” inserisco accettazione, perché appunto identifica il campo che l’utente dovrà contrassegnare per accettare la condizione;
- nel campo “Condizione” inserisco la condizione da accettare (“Dichiaro di essere maggiorenne bla bla bla…”);
- voglio che il campo sia obbligatorio, quindi rimuovo la spunta nella casella relativa a “Rendi questo checkbox facoltativo”;
- clicco su “Inserisci Tag”.
Tasto Invia
Per inserire il tasto per inviare le informazioni clicco su invia:
- Il campo “Etichetta” si riferisce al testo che comparirà sul bottone, quindi inserisco Invia
- clicco su “Inserisci Tag”.
Ottimo, il modulo di contatto è stato creato. Prima di ogni campo ho inserito un tag label che rappresenta il nome del campo. Questa è la versione finale:
Ora bisogna configurare la Mail affinché le informazioni inserite dall’utente siano passate correttamente alla nostra email.
Configurare la Mail
Vai nella scheda “Mail“:
- nel campo “A” inserisci la tua email, dove vuoi che arrivino le informazioni del modulo di contatto;
- nel campo “Da” inserisci tra parentesi quadre i nomi dei campi del modulo nome, cognome ed email così da capire da chi è arrivata l’email; quindi io inserisco [nome] [cognome] [email] <[email protected]>;
- nel campo “Oggetto” inserisci il nome dell’oggetto dell’email; io ad esempio inserisco un nome statico (Contatto ricevuto dal sito gabrieledonatacci.it);
- nel campo “Intestazioni addizionali” inserisci dopo “Reply-To:” tra parentesi quadre il nome del campo email del modulo, quindi io inserisco Reply-To: [email];
- nel campo “Corpo del messaggio” inserisci, sempre tra parentesi quadre, i nomi dei campi del modulo che vuoi che ti compaiano nella tua email; io inserisco i nomi dei campi nome, cognome, email, telefono e messaggio.
- Infine clicca sul tasto “Salva” per salvare il modulo di contatto.
Qui sotto puoi vedere l’esempio sopra descritto di come ho configurato la Mail, da cui puoi prendere spunto.
Una volta salvato il modulo di contatto, bisogna implementarlo in una pagina del tuo sito.
Implementare Modulo Contact Form 7 in una pagina di WordPress
Clicca nel menù a sinistra del pannello di WordPress su Contatto -> Moduli di contatto e qui copia lo Shortcode relativo al modulo di contatto appena creato.
Ora vai nella pagina in cui vuoi inserire il modulo e incolla lo Shortcode precedentemente copiato in un blocco di testo o in un blocco Html personalizzato.
Ottimo, il modulo di Contact Form 7 è stato correttamente configurato e implementato! Ora se hai già configurato WordPress per utilizzare SMTP per l’invio dei messaggi puoi fare dei test per controllare che il modulo funzioni! Altrimenti segui questa guida per configurare WordPress affinché utilizzi SMTP.
