Creare un form di contatto in WordPress permette ai tuoi utenti di contattarti in maniera rapida e senza uscire dal tuo sito.
Creare un form a mano può richiedere parecchio tempo, ma WordPress ci viene incontro e ci mette a disposizione il plugin Contact Form 7.
Supporta Ajax, Akismet ed ha il reCAPTCHA di Google.
Indice
Creare un form di contatto con Contact Form 7
Creare un form di contatto con Contact Form 7 (CF7) è davvero semplice e veloce.
Scarica ed installa il plugin da Plugin > Aggiungi nuovo > Contact Form 7.
Una volta installato il plugin, vai su Contatto > Moduli di contatto > Add contact form.
Ti troverai di fronte a questa schermata dove potrai personalizzare il tuo nuovo form.
Titolo: inserisci il titolo del form, ad esempio Modulo di contatto 1.
Il titolo non si vedrà nel frontend. Servirà a te per gestire i form e capire al volo quale stai andando ad utilizzare o modificare.
Di default nella zona sotto sono già impostati i seguenti campi:
- nome*
- email*
- oggetto
- textarea
- pulsante di invio
L’asterisco indica che il campo è obbligatorio.
Prima del pulsante di invio, aggiungi il campo acceptance che è diventato obbligatorio con il GDPR e serve per dichiarare di aver letto la privacy policy.
Quando ti sembra tutto ok, clicca sul pulsante Salva.
Aggiungere dei campi al form
Se vuoi aggiungere altri campi al form, basta che clicchi sui pulsanti relativi al campo che vuoi inserire.
Puoi scegliere tra:
- Testo: per inserire del testo breve su una sola riga, ad esempio Nome e Cognome
- Email: per inserire… indovina? L’email.
- Url: per inserire un campo url con i relativi controlli.
- Numero: per inserire un campo che può contenere solo numeri.
- Data: per inserire un campo data del calendario.
- Area di testo: per inserire molto testo, su più righe, come il messaggio di una email
- Menù a discesa: per mostrare un menù a tendina
- Caselle di controllo: sono le cosiddette check box. servono per poter selezionare più opzioni contemporaneamente.
Es. Quali sono le tue passioni: opzione 1, opzione 2, opzione3. L’utente potrà scegliere più di una opzione - Pulsanti di opzione: l’utente ha a disposizione più opzioni, ma può fare solamente una scelta.
Es. Maschio o Femmina: opzione 1, opzione 2 - Accettazione: casella che deve essere selezionata per poter inviare il messaggio.
Es. Accetto termini e condizioni d’uso - Quiz: serve per diminuire lo spam. Introduce un campo dove viene richiesto di fare un semplice calcolo matematico
- File: permette all’utente di caricare un file sul sito
- Pulsante di invio: per inviare i dati inseriti, ci deve sempre essere in un form
Ad esempio, se volessi chiedere all’utente il budget disponibile (come obbligatorio) e con valore di default impostato a 100 (€).
Seleziono il pulsante numero in quanto voglio avere un budget numerico.
Imposto che il campo sia necessario cliccando sulla relativa casella.
Inserisco un nome identificativo del campo (non verrà mostrato nel sito), ad esempio budget, imposto il valore predefinito pari a 100.
Ho aggiunto anche un valore di minimo e massimo che l’utente può inserire.
Cliccando sul pulsante Inserisci tag verrà inserito il tag con il mio campo all’interno del form.
Poi puoi aggiungerci prima del testo informativo, dove dici all’utente cosa deve fare.
Per farlo aggiungi del testo all’interno del normale codice html:
<p>testo che vuoi inserire</p>Il simbolo <p> è codice HTML, serve per creare un nuovo paragrafo e va chiuso con </p> dopo aver inserito il campo desiderato.
Il simbolo <br /> è sempre codice HTML e serve per andare a capo.
Tab Mail
Dopo aver impostato il modulo, nel tab Mail del modulo stesso devi aggiungere i campi che hai inserito per personalizzare la mail che ti viene inviata dall’utente.
Quello che un utente seleziona o scrive in un campo, verrà mostrato nella mail nei punti dove è presente il codice associato al campo stesso, che è quello tra parentesi quadre.
Quindi puoi personalizzarti la mail come meglio credi, davvero fantastico!
Ecco come impostare i campi della sezione Mail.
A: imposta la mail a cui vuoi che vengano inviati i messaggi creati tramite il form.
Da: email del mittente.
Oggetto: l’oggetto della mail.
Intestazioni aggiuntive: a quale email rispondere premendo il pulsante rispondi nel client di posta?
Corpo del messaggio: il contenuto della mail.
Qui dentro ci dovresti aggiungere i campi che l’utente compila.
Nel nostro esempio dovremo aggiungere il campo budget:
Corpo del messaggio:
[your-message]
budget: [budget]Terminate la creazione e l’inserimento di nuovi campi e le personalizzazioni del contenuto della mail, clicca sul pulsante Salva.
Ti verrà fornito il codice shortcode che devi utilizzare per mostrare il form, copialo.
Se usi un tema a blocchi, potrai inserire il form di contatto direttamente tramite un blocco.
Mostrare modulo di contatto di Contact Form 7
Con Editor a blocchi
Nell’editor a blocchi è disponibile un blocco di CF7 dove poter selezionare il modulo di contatto direttamente da lì:
Editor tradizionale
Una volta che hai copiato il codice shortcode, vai nella pagina, post o widget dove vuoi che venga mostrato il form di contatto ed incolla il codice così com’è nell’editor visuale (non HTML).
[contact-form-7 id="914d9291" title="Modulo di contatto 1"]Poi salva o aggiorna.
Ad esempio io solitamente creo una pagina Contatti da Pagine > Aggiungi nuova, e poi incollo il codice e la pubblico/aggiorno.
Antispam
Lo spam è sempre in agguato in questi casi, quindi se vuoi ridurne la quantità, potresti usare Akismet.
Per usarlo con CF7 dovrai attivare una chiave di licenza, che è gratuita per un uso personale.
Poi devi modificare i campi del form usando:
akismet:author per il nomer, es. [text* your-name akismet:author]
akismet:author_email per l’email, es. [email* your-email akismet:author_email]
akismet:author_url per l’url, es. [text your-url akismet:author_url]
I dati che l’utente invierà tramite il tuo modulo, verranno prima inviati ad Akismet, che analizzerà i dati per capire se è spam o meno.
Occhio alla privacy!
