featured-image

Realizzare un form per contatti in WordPress con Contact Form 7

FormContattiQuando si crea un sito è opportuno dare la possibilità agli utenti di contattarvi in modo rapido e senza dover uscire dalle vostre pagine, quindi è di notevole importanza che un form di contatti sia sempre presente in ogni sito web. WordPress non contiene di default un sistema che possa gestire i contatti, ma come in altre occasioni si può ricorrere a plugin appositamente creati a tale scopo.

Uno tra i migliori plugin, semplici da usare e altamente personalizzabile è Contact Form 7 che supporta Ajax, Akismet, CAPTCHA e il controllo matematico integrato.

L’installazione di questo plugin avviene con la consueta procedura, semplice e veloce dalla sezione: PLUGIN -> Aggiungi Nuovo -> Contact Form 7

Quando il plugin è stato installato e attivato è necessario entrare in CF7 per creare un nuovo form cliccando su Aggiungi nuovo:

contact-form-7-a

 

La schermata che si aprirà sarà come questa:

contact-form-7-b

Alcuni campi sono già impostati di default, altri si possono inserire prestando attenzione alla sintassi:

1) Inserire il titolo del form, ad esempio Form Contatti.

2) Di default in questa  zona sono già impostati i seguenti campi:

nome*
email*
oggetto
textarea
pulsante

(Da notare l’asterisco che rende un campo obbligatorio)

3) Se vuoi aggiungere altri campi al form, è sufficiente cliccare su Genera tag e selezionare il tag che si desidera inserire.

La scelta è tra i seguenti tag:

  • Campo di testo: per inserire del testo breve su una sola riga, ad esempio Nome e Cognome
  • Campo email: per inserire l’email
  • Area testo: per inserire testo esteso, su più righe, come ad esempio il messaggio di una email
  • Menù a cascata: per mostrare un menù a tendina
  • Caselle di verifica: sono i check box che servono per poter selezionare più opzioni contemporaneamente.
  • Radio button: l’utente ha a disposizione più opzioni, ma può fare solamente una scelta.
  • Consenso: casella che deve essere selezionata per poter inviare il messaggio, come ad esempio “Accetto termini e condizioni d’uso”
  • Quesito: serve per diminuire lo spam. Introduce un campo dove viene richiesto di fare un semplice calcolo matematico
  • CAPTCHA: permette di limitare lo spam, aggiungendo un box di verifica contenente del testo che si dovrà ricopiare in un apposito campo.
  • Upload file: permette all’utente di caricare un file sul sito
  • Pulsante di invio: per inviare i dati inseriti, obbligatorio in qualsiasi form

Ad esempio, se si vuole aggiungere un campo TELEFONO si deve selezionare il TAG “Telephone number” e si aprirà la seguente maschera che dovremo compilare:

contact-form-7-c

 

1) Selezionare se rendere o no il campo obbligatorio

2) Nome del campo, si può lasciare quello che apparirà di default

3) id (facoltativo)

4) class (facoltativo)

5) Size (facoltativo), utile per indicare la lunghezza del campo in modo da avere tutti i campi di uguale larghezza

6) MaxLength (facoltativo), utile per limitare il numero dei caratteri che si possono digitare

7) Valore predefinito (facoltativo), per un eventuale valore predefinito.

8) Use this text as placeholder, (Usa questo testo come segnaposto): relativo al campo precedente, visualizza il testo all’interno del campo di input fino a quando si inizia a digitare nel campo, poi scompare.

9) Copia questo codice ed incollalo nel modulo a sinistra (come da descrizione)

10) Ed inserisci questo codice nei campi mail qui sotto (come da descrizione)

Il codice che sarà generato in automatico (punto 9) dovrà essere inserito all’interno del Modulo che si trova a sinistra (Si può anche aggiungere del testo descrittivo di spiegazione per l’utente in questo modulo). Ricordarsi di utilizzare i tag html  <p> per creare un nuovo paragrafo (<p> =  “a capo” con spazio dal successivo paragrafo) che poi va chiuso con </p> dopo aver inserito il nome del campo. Il simbolo <br /> serve sempre per andare a capo ma senza lo spazio tra i paragrafi. Se invece si vuole mostrare i campi inseriti a fianco del testo e non sotto non bisogna utilizzare il codice <br />.

L’ultima operazione da compiere, una volta salvato il modulo, è quella di copiare il codice che viene fornito al punto 10 ed incollalo nel campo “Corpo del Messaggio” del modulo MAIL che si trova sotto, campo che riporterà il contenuto della mail che sarà inviata quando l’utente utilizzerà il form appena creato (vedere immagine qui sotto).
contact-form-7-d
In questo modulo MAIL i campi da compilare sono alquanto intuitivi…
E’ possibile anche impostare l’invio del messaggio (la copia del messaggio) anche all’utente:
contact-form-7-e
e, se scelta questa opzione, si avrà la seguente maschera simile alla precedente:
contact-form-7-f
Volendo si possono personalizzare i Messaggi che appariranno dopo aver premuto INVIO:
contact-form-7-g
A questo punto, dopo aver salvato il nuovo modulo (a volte ci si dimentica di salvare…) è necessario riportare in una pagina di wordpress il codice (lo shortcode) che richiama il form, e per farlo bisogna copiare e incollare la stringa che troviamo accanto al nome del form che abbiamo creato:
contact-form-7-h
e il risultato sarà simile questo:
contact-form-7-i
In un prossimo articolo vedremo come personalizzare la grafica del form.
CYBERSPAZIO WEB HOSTING di Mattiuzzi Marco | Partita I.V.A. 02131900025 | C.F. MTTMRC55M30L750R | REA VC-181376 | PEC cyberspazio@pec-email.it