Creare un form di contatto in WordPress: Contact Form 7

Creare un form di contatto in WordPress è davvero importante per 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 grandissimo plugin Contact Form 7, scaricato quasi 9 milioni di volte, a mio parere, il miglior plugin per creare form in WordPress! Supporta Ajax, Akismet ed ha il CAPTCHA e controllo matematico integrato.

1. 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 CF7 > Aggiungi nuovo >.

Ti troverai di fronte a questa schermata dove potrai personalizzare il tuo nuovo form.

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

Di default nella zona sotto (2) sono già impostati i seguenti campi:

• nome*
• email*
• oggetto
• textarea
• pulsante

L’asterisco indica che il campo è obbligatorio.

Se il form ti va già bene così, salvalo e vai alla sezione successiva: 2. Mostrare il form.

1.1 Aggiungere dei campi al form

Se vuoi aggiungere altri campi al form, basta che clicchi su Genera tag (3) e selezioni il tag che vuoi inserire. Puoi scegliere tra:

• Campo di testo: per inserire del testo breve su una sola riga, ad esempio Nome e Cognome
• Campo email: per inserire… indovina? L’email 🙂
• Area testo: per inserire molto testo, su più righe, come il messaggio di una email
• Menù a cascata: per mostrare un menù a tendina
• Caselle di verifica: 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
• Radio button: l’utente ha a disposizione più opzioni, ma può fare solamente una scelta. Es. Maschio o Femmina: opzione 1, opzione 2
• Consenso: casella che deve essere selezionata per poter inviare il messaggio. Es. 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 dovrai ricopiare in un apposito campo. Odioso
• Upload 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, inserirò il campo dove chiederò all’utente il budget disponibile (come obbligatorio) e con valore di default impostato a 100 (€).

Seleziono il Campo di testo in quanto il testo da inserire è breve.  Imposto che il campo sia obbligatorio (1), inserisco un nome identificativo del campo (non verrà mostrato nel sito), ad esempio budget, imposto il valore predefinito pari a 100.

Verrà generato in automatico il codice (2) da inserire all’interno del Modulo (4). Basta semplicemente copiare il codice ed incollarlo nella parte sinistra della schermata, il Modulo per l’appunto. Poi puoi aggiungerci prima del testo informativo, dove dici all’utente cosa deve fare. In questo caso, gli ho detto semplicemente di inserire il budget.

Il simbolo <p> è codice HTML, serve per creare un nuovo paragrafo (praticamente lascia uno spazio dal successivo) e va chiuso con </p> dopo aver inserito il campo desiderato.

Il simbolo <br /> è sempre codice HTML e serve per andare a capo. Quindi se vuoi mostrare i campi inseriti a fianco del testo e non sotto (come in questo caso), devi togliere il codice <br />.

Infine copia il codice che ti viene fornito al punto 3 ed incollalo appena sotto, dove c’è il contenuto della mail che ti arriverà quando l’utente utilizzerà il form appena creato.

Questa parte è molto intuitiva, devi solo impostare correttamente la mail a cui vuoi che vengano inviati i messaggi creati tramite il form in questione. 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!

Terminate la creazione e l’inserimento di nuovi campi e le personalizzazioni del contenuto della mail, salva! Ti verrà fornito il codice che devi utilizzare per mostrare il form, copialo.

2. Mostrare il form

Se non hai ancora il codice per mostrare il form, vai su CF7 > e vedrai immediatamente il codice Shortcodes associato al form, copialo.

Una volta che hai copiato il codice, 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). Poi salva/aggiorna.

Ad esempio io solitamente creo una pagina Contatti da Pagine > Aggiungi nuova >, e poi incollo il codice e la pubblico/aggiorno.

Troppo semplice, non trovi? Ecco il risultato:

Cambia l’aspetto grafico del form

Non è molto bello da vedere, vero? Per modificare la grafica le cose si complicano, dovrai modificare il codice CSS. Ti mostrerò il codice proposto in questo articolo per modificare l’aspetto del form e renderlo più professionale.

Prima di tutto devi modificare il contenuto del Modulo del form, sostituisci il vecchio codice con questo nuovo e poi salva:

[php]
<ul id="contact">
<li><span class="text">Your Name</span><span class="required">(*)</span> [text* your-name]</li>

<li><span class="text">Your Email</span><span class="required">(*)</span>[email* your-email] </li>

<li><span class="text">Inseirsci il tuo budget</span>[text* budget "100"]€ </li>

<li><span class="text">Subject</span>[text your-subject] </li>

<li id="message"><span class="text">Your Message</span>[textarea your-message] </li>

<li id="submit">[submit "Send"]</li>
</ul>
[/php]

Ora vai su Aspetto > Editor > style.css ed incolla nell’ultima riga il seguente codice:

[css]
#contact{
list-style:none;
margin:0;
}
#contact li{
float: left;
height: 60px;
margin:0 0 20px;
position: relative;
width: 540px;
}
#contact li .text{
background: #F0EFEF;
padding:15px 10px 10px 0;
position:absolute;
z-index:100;
min-width:85px;
border-bottom-right-radius: 5px;
-moz-border-radius-bottomright:5px;
-webkit-border-bottom-right-radius:5px;
border-top-left-radius: 5px;
-moz-border-radius-topleft:5px;
-webkit-border-top-left-radius:5px;
text-indent: 5px;
}
#contact li .required{
position:absolute;
right:10px;
top:10px;
z-index:100;
}
#contact li .wpcf7-form-control-wrap{
position: absolute;
}
#contact li .wpcf7-form-control-wrap input, #contact li .wpcf7-form-control-wrap textarea{
background:#fff;
border:solid 5px #F0EFEF;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
padding:15px 10px 25px;
width: 509px;
text-indent:95px;
z-index:100;
margin:0;
}
#contact li .wpcf7-form-control-wrap input:focus, #contact li .wpcf7-form-control-wrap textarea:focus{
background:#F0EFEF
}
#contact li .wpcf7-form-control-wrap textarea{
line-height: 28px;
padding: 10px;
height:200px;
}
#contact li#message{
min-height:220px;
}
#contact li#submit input{
color:#fff;
text-decoration:none;
margin:10px 30px 0 0;
background:#09b2f3;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#69d2f9′, endColorstr=’#09b2f3′);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#69d2f9), to(#09b2f3));
background: -moz-linear-gradient(top, #69d2f9, #09b2f3);
border:none;
-moz-border-radius:3px;
-webkit-border-radius:3px;
-0-border-radius:3px;
border-radius:3px;
display:block;
padding:10px 25px;
text-align:center;
text-shadow:0 1px 0 #09b2f3;
text-transform:uppercase;
}
#contact li#submit input:hover{
background:#69d2f9;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#09b2f3′, endColorstr=’#69d2f9′);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#09b2f3), to(#69d2f9));
background: -moz-linear-gradient(top, #09b2f3, #69d2f9);
-moz-box-shadow:0 1px 2px rgba(0,0,0,.5) inset;
-webkit-box-shadow:0 1px 2px rgba(0,0,0,.5) inset;
-o-box-shadow:0 1px 2px rgba(0,0,0,.5) inset;
box-shadow:0 1px 2px rgba(0,0,0,.5) inset;
color:#06506c;
text-shadow:0 1px 0 rgba(255,255,255,.25);
text-transform:uppercase;
cursor:pointer;
}
div.wpcf7-validation-errors {
clear: left;
}
[/css]

L’effetto finale è molto più professionale, cosa dici?

Bonus

Lo spam è sempre in agguato in questi casi, quindi se non vuoi riceverne, installa i migliori plugin atispam.

In particolare ti consiglio di installare Hiddy, un plugin che inserisce un campo di testo non visibile all’occhio umano, ma visibile agli spambot (programmini che inviano in automatico messaggi spam). Grazie alla loro natura, gli spambot cercheranno di compilare questo campo. Il plugin controllerà il contenuto del campo nascosto e, se troverà del testo, il messaggio verrà scartato perchè si è certi che sia inviato da uno spambot. Geniale! Complimenti a Merlinox e a k76 per il plugin.