Il plugin “Contact Form 7” è un must have di ogni installazione wordpress e permette di essere contattati da un utente che naviga nel vostro sito.

E’ spartano ma fa il suo lavoro come si deve, l’unica pecca è l’impossibilità di operare graficamente tramite un comodo pannello magari inserito nel plugin stesso…. l’unica via è: html+css. Già si deve masticare un pò di codice, ma veramente poco, tralaltro esistono alcuni plugin che aiutano in questo senso (personalmente li ho trovati tutti piuttosto limitati).

Fortunatamente il plugin supporta i fogli di style (CSS) che possono essere inseriti all’inizio della pagina di formattazione del modulo inserendo il  tag <style> ….. </style>

Eccovi quindi una breve guida per rendere accettabile ed in linea con la grafica del vostro sito il form. Supponiamo di avere quindi un semplice form realizzato in questo modo (che è piu o meno quello predefinito del plugin dopo l’installazione):

<label> [text* your-name placeholder "Il tuo nome"] </label>
<label> [email* your-email placeholder "La tua e-mail"] </label>
<label> [textarea your-message placeholder "Il tuo messaggio"] </label>
[submit "Invia"]

La voce “placeholder” che vedete nel mio esempio, inserirà ciò che segue tra le virgolette all’interno dei campi del form, se non vi interessano potete eliminare tranquillamente la voce.

Ora realizziamo il codice CSS per rendere graficamente piacevole il nostro form, in questo caso farò in modo che il modulo abbia uno sfondo grigio chiaro (background), una ombreggiatura esterna (box-shadow) e un pò di spaziatura (padding) interna per dare respiro al modulo stesso:

<style>
.ombreggiato {
-webkit-box-shadow: 0px 0px 13px -4px rgba(92,92,92,0.72);
-moz-box-shadow: 0px 0px 13px -4px rgba(92,92,92,0.72);
box-shadow: 0px 0px 13px -4px rgba(92,92,92,0.72);
padding:8px;
background:#F10EC;
}
</style>

Ecco il form completo, per richiamare lo style appena realizzato con i CSS, ho inserito un contenitore (div) all’inizio del form nel quale ho inserito la classe “ombreggiato”:

<style> 
.ombreggiato { 
-webkit-box-shadow: 0px 0px 13px -4px rgba(92,92,92,0.72); 
-moz-box-shadow: 0px 0px 13px -4px rgba(92,92,92,0.72); 
box-shadow: 0px 0px 13px -4px rgba(92,92,92,0.72); 
padding:8px; background:#F10EC;
}
</style>
<div class="ombreggiato">
<span style="font-weight:bold;font-size:22px;">Contattami:</span>
<label> [text* your-name placeholder "Il tuo nome"] </label>
<label> [email* your-email placeholder "La tua e-mail"] </label>
<label> [textarea your-message placeholder "Il tuo messaggio"] </label>
[submit "Invia"]
</div>

In questo modo si possono aggiungere con molta facilità ulteriori modifiche ai form, come il colore di sfondo dei campi di testo e area del messaggio, i bordi degli stessi e gli arrotondamenti negli angoli.. le classi sulle quali agire sono:

.wpcf7-text > campi di testo
.wpcf7-textarea > area di testo
.wpcf7-submit > bottone invio richiesta

potremmo cosi ottenere un input con lo sfondo leggermente piu scuro del resto del form in modo da renderlo meno standard nonche un coloratissimo tasto per l’invio.

Risultato finale:

Aggiornamento: Se vuoi personalizzare ancor di piu il tuo form, magari prevedento campi affiancati l’uno all’altro anzichè in colonna.. puoi dare un’occhiata a questo articolo.

Nota: puoi usare questa tecnica anche per le mail che vengono ricevute nella propria casella di posta, realizzando lo style allo stesso modo cui è stato realizzato il form appena spiegato, ma dovrai lavorare nella tab “mail” del plugin, in questo modo riceverai delle mail leggibili