Crea moduli di contatto con Contact Form 7 – Videoguida

Pubblicato 24 Aprile 2017 · Aggiornato 5 Giugno 2022

Ciao, benvenuto su Go WordPress. In questa guida ti illustrerò i vari passaggi per creare in pochi minuti un modulo di contatto per il tuo sito/blog tramite il plugin Contact Form 7.

È considerato da molti webmaster un must-have, per la sua versatilità nel creare campi personalizzati, ognuno secondo le proprie esigenze.

Offre infatti parecchie opzioni implementabili, tecnicamente dette form, tramite cui “interrogare” gli utenti circa le informazioni che ci interessano (o che ci servono).

Esempio pratico

Se ad esempio gestisco il sito web di un meccanico il quale desidera chiedere ai suoi clienti varie informazioni sulla loro autovettura, come modello, anno di immatricolazione, tipo di carburante etc, con Contact Form 7 potrò creare tutti quei campi specifici che i clienti dovranno compilare prima di contattare il meccanico, facendo risparmiare a quest’ultimo un sacco di tempo in domande sul veicolo.

Potrei fare mille esempi ma credo che il concetto sia chiaro.

Prima parte

Ho suddiviso la guida in due parti, procediamo con i primi 3 step:

Installa il plugin
Aggiungi un nuovo modulo di contatto
Personalizza i campi

1. Installa il plugin

Per prima cosa andiamo sul menù Plugin ► Aggiungi Nuovo, digitiamo nella barra di ricerca “Contact Form 7” e clicchiamo su installa:

Installa Contact Form 7

Sul menù a sinistra ti apparirà la nuova voce “Contatti”. Cliccaci.

2. Aggiungi un nuovo modulo di contatto

Troverai in basso un modulo preesistente “Senza titolo”; passa il mouse e clicca in basso su “Modifica”. In alternativa puoi cliccare su “Aggiungi nuovo”.

Ora scegliamo il nome del nostro modulo. Il nome associato non sarà visibile al pubblico ma solo a noi quindi sceglieremo un nomignolo che ci aiuti a ricordare la funzione principale di quello specifico modulo.

3. Personalizza i campi

Ecco la schermata che ti appare al primo accesso:

I bottoni posti in alto ti consentono di aggiungere le seguenti funzioni:

Testo: una semplice riga di testo, che utilizzerai per chiedere singole informazioni. Tornando all’esempio del meccanico, potresti usare questo campo per chiedere le info specifiche sul mezzo (modello, carburante etc).
Email: campo specifico per l’indirizzo email. Grazie ai cookie l’utente inserirà il suo indirizzo email più rapidamente.
Url: campo utilizzato per chiedere all’utente l’indirizzo del suo sito web o blog;
Tel: campo destinato ai numeri di telefono.
Numero: campo numerico, di ordine ascendente e/o discendente. Il nostro meccanico potrebbe usarlo per chiedere l’anno di immatricolazione; l’utente selezionerà l’anno tramite “freccine” per aumentare e diminuire il numero.
Data: campo data. L’unico suo “difetto” è che supporta solo il formato aaaa-mm-gg, quindi bisognerebbe avvertire l’utente di questo “vincolo”.
Area di testo: destinata esclusivamente al messaggio che scriverà l’utente.
Menù a discesa: detto anche “menù a tendina”, da cui l’utente sceglierà una singola voce.
Caselle di controllo: l’utente potrà mettere la spunta su una o più caselle quadrettate.
Pulsanti di opzione: l’utente potrà selezionare solo un pulsante a “cerchietto”, che escluderà le altri opzioni.
Accettazione: si invita l’utente ad accettare un determinato contenuto per poter procedere. Ad esempio il trattamento dei dati, termini e condizioni etc.
Quiz: un semplice quiz cui l’utente dovrà rispondere per proseguire. Può essere di tipo matematico o di cultura generale.
reCAPTCHA: strumento di verifica by Google. Solitamente chiede di mettere la spunta su “Non sono un robot”.
File: campo utilissimo! Si può dare la possibilita agli utenti di allegare un file (documento, foto etc).
Invia: il pulsante finale per l’invio del modulo. Il sistema avvierà un controllo su tutti i campi: se tutti i contenuti sono inseriti correttamente, ti invierà le informazioni in email, altrimenti avvertirà l’utente di correggere l’errore.

Osserva bene la foto precedente. Sono presenti 4 tipi di campi:

text* = testo
emai*
textarea = area di testo
submit = tasto “invia”

racchiusi tra un comando di apertura, <label>, e un comando di chiusura, </label>. Questa regola va rispettata per ogni campo (ad eccezzione del tasto “invia”), per far sì che il modulo di contatto abbia un aspetto “pulito”, ben ordinato.

L’asterisco * rende il campo richiesto (obbligatorio) in fase di compilazione da parte dell’utente.

N.B. Alcuni temi non supportano il comando <label> e se utilizzato l’effetto grafico sarà orripilante. Per ovviare a questo inghippo, è sufficiente sostituire <label> con <p> per l’apertura e </p> per la chiusura.