Introduzione a Contact Form 7

Sicuramente uno dei plugin più popolari di sempre fra gli utenti di WordPress, Contact Form 7 permette, come suggerisce chiaramente il nome, di creare moduli (form) di contatto semplici o complessi grazie a una serie di strumenti intuitivi e flessibili che possono soddisfare tanto gli utenti alle prime armi che vogliono semplicemente dotare il loro sito o blog di un form minimale per i contatti, quanto quelli più esperti ed esigenti che desiderano introdurre nel form anche campi e opzioni di tipo più complesso.

 

CLICCA E NAVIGA:

> Installazione e attivazione
> Il modulo predefinito
> Modifica del modulo predefinito
> Sinstassi di Contact Form 7
> Campo Modulo e campo Mail
> Altri elementi del modulo predefinito

Installazione e attivazione

Una volta installato e attivato, Contact Form 7 crea la nuova voce CF7 all’interno della barra dei menu di amministrazione di WordPress, subito prima del menu Aspetto, al cui interno troviamo due sole opzioni: Moduli di contatto e Aggiungi nuovo.

Cliccando sulla prima opzione sarà visualizzata la schermata che elenca i moduli disponibili, e ci accorgeremo subito che è già presente un modulo di contatto, che andremo a esaminare fra poco. Nella parte alta della schermata viene inizialmente visualizzato un pannello contenente, a sinistra, un invito a donare una piccola somma all’autore di Contact Form 7 per sostenere lo sviluppo del plugin, e a destra una serie di link a pagine Web con guide all’utilizzo delle funzioni di base e di quelle più evolute (in inglese, ma approfondiremo molti di questi aspetti in questa guida). Possiamo disattivare questo pannello cliccando sul comando Dismiss in alto a destra, se lo desideriamo, e usare i quattro link visualizzati sotto il pulsante di Impostazioni schermata per accedere alla documentazione, alla pagina di donazione e altre risorse.

Il modulo predefinito di Contact Form 7

Il modulo predefinito di Contact Form 7 è identificato dal nome Modulo di contatto 1, e dallo shortcode

    Il tuo nome (richiesto)

    La tua email (richiesto)

    Oggetto

    Il tuo messaggio

    che riporta appunto tale nome al suo interno: possiamo utilizzare questo codice così com’è, inserendolo in una pagina del sito, per visualizzare il semplice modulo contatti associato, che sarà comunque aggiornato qualora intervenissimo con le modifiche alle sue impostazioni.

    Ma prima chiariamo l’utilizzo dello shortcode appena visto: questa serie di comandi, come dicevamo, va incollata (parentesi quadre comprese) all’interno della pagina in cui vogliamo sia visualizzato il modulo, e funziona anche se la inseriamo mentre siamo in modalità Visuale.  Visualizzando la pagina vedremo che lo shortcode crea automaticamente il modulo predefinito, già tradotto in italiano.

    (N.B. Utilizzare le frecce di scorrimento per visualizzare le due schermate di esempio)

    Modificare il modulo predefinito

    Possiamo cominciare a esercitarci e capire come funziona Contact Form 7 proprio modificando il modulo predefinito, oppure (se nel frattempo vogliamo utilizzarlo nella nostra pagina ‘contatti’) possiamo crearne un duplicato utilizzando il comando Copia che compare quando ci posizioniamo col puntatore del mouse sotto il nome del modulo predefinito. Qualunque sia la modalità scelta, ci ritroveremo nella schermata di modifica del modulo scelto, dove potremo prima di tutto personalizzare il nome del form visualizzato in alto cliccandovi sopra, e in questo caso il nome sarà immediatamente aggiornato all’interno dello shortcode, visualizzato immediatamente dopo nel riquadro in alto.

    Immediatamente sotto il riquadro in cui è visualizzato il nome e lo shortcode del form, troviamo il riquadro Modulo, che contiene tutti i ‘tag’, ovvero i ‘marcatori’ utilizzati da Contact Form 7 per ‘costruire’ il modulo che sarà poi visualizzato: questi marcatori vengono selezionati dal menu visualizzato alla destra del riquadro, e andremo ad approfondirli singolarmente man mano che procediamo con la trattazione di questo plugin.

     

    Osservando il codice utilizzato per la costruzione del modulo predefinito possiamo già farci un’idea dei marcatori di Contact Form 7, della loro funzione e di come vengono accompagnati dai marcatori del linguaggio HTML per visualizzare la struttura del modulo. Se osserviamo, infatti, la prima riga di codice del modulo predefinito, vedremo che è formata dalla seguente sintassi: <p>Il tuo nome (richiesto)<br />. Chi ha una certa dimestichezza con l’HTML avrà subito riconosciuto il tag <p> che ‘apre’ un paragrafo e il tag <br /> che provoca una interruzione di riga, portando a capo il resto del paragrafo. Per chi non avesse questa familiarità coi marcatori HTML, è una buona occasione per apprendere quelli che appunto possono tornare utili nella creazione e modifica dei moduli di Contact Form 7 ma anche in altre occasioni.
    Nella seconda riga troviamo invece i marcatori di Contact Form 7 seguiti dal marcatore di chiusura paragrafo dell’HTML, ovvero [text* your-name] </p>. In questo caso il marcatore text indica un campo di testo e l’asterisco che lo segue immediatamente dopo segnala che si tratta di un campo obbligatorio per l’utente. Con your-name viene indicata la variabile, ovvero il ‘contenitore’, in cui sarà memorizzato il valore rappresentato da ciò che l’utente digiterà all’interno del campo di testo, valore che sarà poi ‘passato’ al messaggio che noi riceveremo quando il modulo viene trasmesso. Ma vediamo più da vicino come funziona questo meccanismo.

    Campo Modulo e campo Mail

    Al di sotto del riquadro (o ‘campo’) Modulo troviamo il riquadro Mail, che si compone di due aree differenti: quella a sinistra contiene l’indirizzo cui saranno recapitati i dati del modulo trasmesso e le intestazioni del messaggio, mentre quella a destra contiene le informazioni che saranno estratte dal modulo utilizzando i marcatori indicati e accompagnando questi ultimi da etichette identificative per maggiore chiarezza.

    Tornando appunto all’esempio del campo relativo al nome, descritto in precedenza, noteremo che il marcatore your-name è infatti il primo che segue il testo Da: e di conseguenza il messaggio che riceveremo conterrà, nella parte iniziale, Da: testo-del-campo-nome. Lo stesso discorso vale per il campo di testo dell’oggetto ([text your-subject]) che come possiamo vedere è composto allo stesso modo del campo relativo al nome.

    Il marcatore per il campo dell’indirizzo email è invece diverso, infatti non è creato con un marcatore text quanto con il marcatore email, ed è anch’esso obbligatorio vista la presenza dell’asterisco. Più avanti vedremo come sono creati e configurati questi diversi marcatori per inserirli nell’area Modulo e nell’area Email, ma per il momento può essere utile imparare a riconoscerli e individuarli in entrambe le aree.

    I tre marcatori presenti nel modulo predefinito sono email*, textarea e submit: il primo è ovviamente un campo per l’inserimento di un indirizzo email (che deve appunto avere caratteristiche ben più precise del generico ‘testo’), il secondo è un campo di testo semplice ma con più righe (quindi adatto ai messaggi) e il terzo e ultimo è ovviamente quello che visualizza il pulsante per l’invio del modulo, che infatti è seguito dal valore “invia”, appunto il testo visualizzato sul pulsante. Vedremo più avanti nel dettaglio come funziona ognuno di questi marcatori e quali variazioni possiamo applicare alla loro configurazione.
    Per il momento, un intervento che possiamo sicuramente fare sul codice del modulo predefinito è la traduzione di quegli elementi che risultano ancora in inglese, per esempio la frase finale del messaggio This e-mail was sent from a contact form on (seguita dal nome del sito e dall’URL) con Questo messaggio è stato inviato dal modulo contatti di. Nella parte bassa della schermata troviamo, inoltre, tutti gli altri messaggi già tradotti, ma possiamo anche personalizzarli ulteriormente se lo desideriamo.