Realizzare un form per contatti in WordPress con Contact Form 7
Quando 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:
La schermata che si aprirà sarà come questa:
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:
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 />.
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.
Ciao, grazie per i complimenti 🙂
Cosa intendi per “creazione guidata…”, vorresti che un utente possa creare una pagina (tipo annuncio o scheda) con campi prestabiliti? in questo caso credo vi siano dei plugin appositi, per creare una pagina tipo annuncio (ma gestibile come si vuole) piuttosto che modificare o adattare contact Form 7.
Anche per la gestione della registrazione c’è un pluigin apposito, leggi: https://www.cyberspazio.eu/gestione-del-form-di-registrazione-utente-in-wordpress/
Inanzitutto complimenti per la qualità delò’articolo
Vorrei chiedeti quando averrà l’articolo con il miglioramento della grafica del forum?
Grazie per i complimenti, fanno sempre piacere 🙂
Riguardo il miglioramento della grafica, confesso che ce n’eravamo dimenticati! vedrò di far completare questo argomento il più presto.
Molto più semplicemente, si possono già trovare qui le indicazioni per migliorare la grafica del form:
http://www.ejhansel.com/style-the-contact-form-7-wordpress-plugin/
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 ?
Ciao,
sul nostro sito è così:
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!
Dovrei vedere il tuo codice…
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
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.
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
Penso che puoi trovare tutto nella guida: http://contactform7.com/docs/