WordPress: come creare form di contatto

I form di contatto sono una componente essenziale quando si sviluppa un sito web. La loro utilità sta nel riuscire a creare una base di utenti fissi o nel dare modo di ricevere richieste dirette e molte altre opzioni. Per creare un form di contatto in modo semplice su un sito sviluppato con WordPress sono disponibili molti plugin, uno dei quali è Contact Form 7, del quale qualche tempo fa abbiamo parlato in riferimento di una vulnerabilità poi fixata (qui l’articolo).

Per installare Contact Form 7 effettuiamo l’accesso al backend e seguiamo il percorso Plugin -> Aggiungi nuovo. Nel campo di ricerca inseriamo Contact Form 7 e facciamo clic su Installa adesso.

Dopo l’installazione, facciamo clic su Attiva per poi iniziare ad impostare il plugin. Viene subito mostrato un modello preimpostato sul quale possiamo iniziare ad esercitarci per capire il funzionamento di Contact Form 7.

Come vediamo, con questo plugin è necessario lavorare sul codice, ma è tutto molto semplice. Per aggiungere campi al form basta fare clic su una delle informazioni da fare aggiungere e si aprirà un popup nel quale sarà possibile deciderne il contenuto e l’obbligatorietà. Per fare un esempio, aggiungiamo il campo tel, relativo al numero di telefono.

Spuntando la prima casella, il campo tel risulterà obbligatorio. Il nome del campo a livello di codice è opzionale, ma consigliamo di seguire sempre lo schema originale. Nel caso in esempio, lo chiameremo your-tel. Dopo aver fatto clic su Inserisci tag potremo tornare alla schermata precedente, dove il codice apparirà così:

N.B.: il plugin consente di creare tutto ciò che sta tra le parentesi quadre, tutte le altre parti del codice andranno scritte a mano, così come la posizione in cui verrà inserito il nuovo campo. Le parti in questione sono, per chiarezza, label ed l’intestazione (in questo caso, “il tuo numero di telefono”). Fatto questo possiamo finalmente salvare il template del form di contatto.

Nella scheda successiva imposteremo il template della mail inserendo la mail alla quale arriveranno i messaggi. Il campo successivo è quello della casella che invierà i messaggi pervenuti dal form, poi inseriremo i campi Oggetto, Intestazioni e, ovviamente, Testo.

Esiste poi la possibilità di aggiungere un campo per gli allegati ed un modello di risposta automatica. Una volta terminate le operazioni faremo clic su Salva e passeremo all’impostazione delle risposte.

La scheda Messaggi consente di personalizzare ogni singola risposta a coloro che vogliono inviare messaggi tramite il form. Si va dal testo che compare quando non viene riempito un campo obbligatorio (es. “campo richiesto”), errori di invio o di caricamento dei file o ancora i ringraziamenti per l’invio del messaggio.

L’ultima scheda, Impostazioni Aggiuntive, infine, permette di inserire snippet di codice personalizzato.

Mentre creiamo il nostro form di contatto vediamo in alto una striscia blu contenente uno shortcode, che dovremo copiare ed incollare nella pagina in cui vogliamo posizionarlo. Basterà aggiungere il blocco Shortcode ed inserire il codice creato. Il risultato di ciò che abbiamo fatto finora è come quello nell’immagine in basso.

Questo è solamente un esempio. WordPress mette a disposizione anche una serie di plugin che consentono di personalizzare in tutta semplicità i form creati con Contact Form 7.

Come aggiungere un reCAPTCHA v2

Il rischio di subire attacchi spam da parte di bot che sfruttano il nostro form di contatto è molto alto e per evitarlo è consigliabile aggiungere un reCAPTCHA. Il plugin che stiamo analizzando consente anche di effettuare questa operazione in modo semplice.

Una volta registrato il sito ed ottenuto il codice (a questo link), dovremo seguire il percorso Contatto -> Integrazione a partire dal menu di sinistra del backend WordPress. All’interno della pagina, selezioniamo Imposta integrazione all’interno del blocco reCAPTCHA. La pagina successiva mostrerà quanto segue:

Quando l’abilitazione sarà terminata, potremo aggiungere un box reCAPTCHA all’interno del form di contatto utilizzando uno dei tasti presenti sopra il campo di scrittura del codice.