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.

13 pensieri riguardo “Realizzare un form per contatti in WordPress con Contact Form 7

  • 7 novembre 2014 in 11:57
    Permalink

    Ciao, complimenti per l’articolo! Vorrei chiedervi due informazioni:
    1) è possibile trasformare in un post il form appena compilato? Vorrei utilizzare questo metodo per creare la compilazione guidata di una pagina privata per i miei utenti.. Posso usare Contact Form 7?
    2) è possibile integrare la registrazione al blog mediante Contact Form 7? Sapreste indicarci in grandi linee come si fa?
    Grazie tante. Saluti.

  • 12 novembre 2014 in 22:54
    Permalink

    Inanzitutto complimenti per la qualità delò’articolo
    Vorrei chiedeti quando averrà l’articolo con il miglioramento della grafica del forum?

  • 11 giugno 2015 in 16:34
    Permalink

    Ciao,
    ottima guida.
    Avrei però una domanda.
    Quando imposto un campo come obbligatorio, poi in frontend mi compare la scritta “richiesto”.
    Come faccio a cambiare quella scritta ? Magari a metterla in inglese ?

    • 11 giugno 2015 in 18:56
      Permalink

      Ciao,
      sul nostro sito è così:

  • 11 settembre 2015 in 19:59
    Permalink

    Ciao bellissimo articolo, uno dei migiori…Ma avrei un problema! Ho messo due opzioni (radio buttons): ma quando poi mi arriva la mail di un utente non vedo quale opzione delle due ha selezionato…e quindi perdono d’utilità!!! mi sai dire dove sbaglio? Grazie!

  • 26 ottobre 2015 in 12:32
    Permalink

    ciao, è veramente un articolo chiaro e ben dettagliato. ma avrei una domanda. ho notato che si può inviare una mail inesistente con il codice:
    La tua email (richiesto)
    [email* your-email 75/] .
    Si può ovviare a questo problema obbligando l’utente ad inviare una mail esistente?
    Grazie

    • 26 ottobre 2015 in 14:30
      Permalink

      Dovrebbe essere una domanda da rivolgere agli sviluppatori 🙂
      Non credo sia una cosa facile, un conto fare uno script che confermi la correttezza della email xxxx@nomedomainio.xx digitata e altro discorso e verificare che questa email sia attiva e non fasulla.

  • 2 febbraio 2016 in 13:56
    Permalink

    Ciao innanzitutto ti faccio i miei complimenti per l’ottima guida.
    Come passo successivo volevo chiederti come è possibile creare un form contatti da inserire in un sito di b&b
    i campi che mi interessano sono 3, ovvero date ( con la data di arrivo), poi un altro date ( con la data di partenza ) e il pulsante di invio.
    tutti e tre devono stare sulla stessa linea e non uno sotto l’altro.
    ho fatto diversi tentativi ma non riesco proprio a capire come devo fare.
    mi potresti aiutare tu??? grazie mille in anticipo

Lascia un commento