Contact Form 7 su WordPress

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”.

Plugin Contact Form 7

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).

Contact Form FTP

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”.

Attiva Contact Form

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.

Pagina creazione modulo Contact Form



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
  • Email
  • 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).

Titolo modulo Contact Form

Nome e Cognome

Campo nome Contact Form

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”.

Nome Contact Form

Ripetere la stessa procedura per creare il campo relativo al Cognome, inserendo cognome nel campo “Nome”.

Cognome Contact Form

Telefono

Campo Telefono Contact Form

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”.

Telefono Contact Form

Email

Campo Email Contact Form

 

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”.

Email Contact Form

Messaggio

Campo Messaggio Contact Form

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”.

Messaggio Contact Form

Condizione da accettare

Campo Accettazione Contact Form

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”.

Accettazione Contact Form

Tasto Invia

Bottone Invia Contact Form

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”.

Invia Contact Form

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:

Modulo Contact Form

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] <wordpress@gabrieledonatacci.it>;
  • 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.

Configurazione Mail Contact Form

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.

Shortcode Modulo contatto Contact Form

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.

Shortcode Contact Form

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.