Creare moduli di contatto con Contact Form 7

Per creare moduli di contatto, il plugin Contact Form 7 è il plugin di WordPress più diffuso e a mio giudizio anche il migliore.

In un sito che utilizza Contact Form 7 per la gestione dei form di contatto, nel menu della bacheca di WordPress sarà presente la voce Contatto, posizionandovi sopra il cursore si aprirà un sottomenu con alcune voci: tra queste, Moduli di contatto è il comando per visualizzare i moduli di contatto già esistenti, Aggiungi nuovo è quello per creare un nuovo form.

Passo 1: Creare il nuovo modulo di contatto

Con il comando Aggiungi nuovo, viene creato automaticamente un nuovo modulo di contatto predefinito e si apre una finestra del back-end di WordPress per la creazione del form con l’area principale suddivida in quattro schede: Modulo, Mail, Messaggi, Impostazioni aggiuntive.

La scheda per creare moduli di contatto di Contact Form 7
Figura 1 – La scheda di creazione di un nuovo modulo di Contact Form 7

Per prima cosa occorre assegnare un titolo al modulo, inserendolo nel campo di testo sotto alla scritta Aggiungi nuovo modulo di contatto.

Il modulo preimpostato è composto da quattro campi per l’inserimento dei dati, che hanno etichetta (label):

  • Il tuo nome
  • La tua email
  • Oggetto
  • Il tuo messaggio

e da un pulsante con etichetta

  • Invia

Se si desidera modificare le etichette (cioè il testo che verrà visualizzato sulla pagina che conterrà il form) è sufficiente sovrascrivere le scritte predefinite.

Si possono anche aggiungere altri campi al modulo oltre ai quelli di default, usando i pulsanti della scheda Modulo. Ad esempio, supponiamo di voler aggiungere il campo per il recapito telefonico sotto a quello dell’e-mail; dovremo posizionare il cursore dove vogliamo mettere il campo (sopra all’etichetta dell’oggetto) e poi fare clic sul pulsante tel.

Il generatore di form-tag per l'inserimento del campo Tel in un modulo di Contact Form 7
Figura 2 – La finestra del generatore di form-tag per l’inserimento del campo Tel in un modulo di Contact Form 7

Si apre automaticamente una finestra di configurazione del campo, dove le impostazioni essenziali che dobbiamo dare sono:

  • Tipo di campo (selezionare questa check box se si desidera che il campo sia obbligatorio)
  • Nome (modificare, se lo si desidera, il nome del campo, p.e. mettendo your-tel)

Completate le impostazioni occorre fare clic sul pulsante Inserisci tag. Il campo (nell’esempio in figura [tel tel-304]) verrà aggiunto al modulo, però senza etichetta, questa va scritta a mano inserendo <label> e il testo che si desidera prima del tag e </label> dopo (p.e. <label> Il tuo telefono [tel tel-304]  </label>).

IMPORTANTE: Un campo obbligatorio viene contrassegnato con un asterisco (vedi i campi text ed email di figura 1). È buona norma segnalare all’utente questa informazione nell’etichetta.

Passo 2: Impostare la mail di notifica del modulo di contatto

Una volta creato il modulo occorre indicare a quale indirizzo e-mail vanno inviati i dati che raccoglie e dare una forma al messaggio che li comunica. Per fare ciò occorre aprire la scheda Mail (facendo clic sulla sua etichetta).

La scheda Mail di configurazione di un modulo di contatto di Contact Form 7
Figura 3 – La scheda Mail di configurazione di un modulo di contatto di Contact Form 7

Nel campo chiamato A va inserito l’indirizzo e-mail di chi deve ricevere i dati inviati dal modulo.

Nel campo Da va impostato l’indirizzo email con cui il sito Web invia la mail creata con i dati del form: Questo valore di campo deve essere un indirizzo di posta elettronica appartenente allo stesso dominio del sito altrimenti Contact Form 7 segnalerà un errore di configurazione (che però non impedisce il funzionamento del modulo).

Il campo Oggetto è normalmente impostato con il mail-tag [your-subject] cioè l’oggetto inserito dall’utente nel relativo campo del form e non è necessario cambiarlo.

La sezione Intestazioni aggiuntive permette di inserire i campi Cc, Bcc o Reply-To all’email che il form invierà al destinatario dei dati che raccoglie. Vanno scritti uno per riga, cioè:

Cc: info@sviluppositiweb.net
Reply-To: [your-email]

Il campo Corpo del messaggio racchiude il testo dell’email e normalmente riporta i mail-tag relativi ai campi del form e una scritta predefinita che avvisa che la mail è un messaggio inviato da un modulo di contatto. ([_site_title] e [_site_url] sono codici che nell’email visualizzeranno automaticamente il nome e l’URL del sito Web). È possibile personalizzare il corpo del messaggio a proprio piacimento.

NOTA: Contact Form 7 prevede anche un modello di mail aggiuntivo, Mail (2), spesso utilizzato come una risposta automatica, configurabile in modo del tutto analogo alla mail principale.

Passo 3: Impostare i messaggi di risposta

La scheda di Contact Form 7, chiamata Messaggi permette di inserire i messaggi automatici che verranno visualizzati al momento di invio del form. È costituita da una serie di campi con del testo predefinito che è possibile cancellare e riscrivere o modificare in modo molto semplice.

Terminate tutte le impostazioni del modulo di contatto fare clic sul pulsante Salva: il form verrà salvato e sarà pronto per essere inserito nel sito.

Passo 4: Aggiungere il modulo ad una pagina (o ad un articolo)

Per inserire un modulo di Contact Form 7 in una pagina (o in un articolo) occorre innanzitutto copiare lo shortcode che è mostrato sotto al titolo del modulo.

lo shortcode di un modulo di Contact Form 7
Figura 4 . lo shortcode di un modulo di Contact Form 7

Aprendo poi la pagina (l’articolo) in modifica, con l’editor a blocchi di WordPress occorre inserire un blocco apposito chiamato appunto Shorcode in cui scrivere, meglio ancora incollare, lo shortcode del modulo.Aggiornando la pagina (l’articolo), nel front-endil form sarà subito visibile.

NOTA: è possibile inserire un modulo di contatto anche in un widget di tipo Testo, semplicemente incollando lo shortcode nel suo campo relativo al testo e poi salvandolo.


Se l’articolo ti è stato utile puoi scaricarne la versione in PDF: Creare moduli di contatto con Contact Form 7

Potresti essere interessato anche all’articolo: Aggiungere l’accettazione della privacy ai moduli di contatto di CONTACT FORM 7