Contact Form 7 è uno dei principali plugin per la creazione di form di contatto su siti realizzati con WordPress.

La sua semplice interfaccia e la sua grande versatilità sono i punti di forza di questo fantastico plugin, con Contact Form 7 puoi creare form di contatto in modo facile e veloce.

L’unica pecca, se così possiamo definirla, di Contact Form 7 è il design di default dei form generati: molto basico e, soprattutto, su una colonna, molto limitante in moltissimi contesti.

In questo articolo ti spiego la miglior configurazione base da utilizzare per Contact Form 7.

La configurazione base del modulo di Contact Form 7

Questa è la porzione di codice HTML che dovete inserire all’interno del modulo:

HTML
<div id="form-cf7" class="clearfix">
<div class="form-row">
<div class="column-full">Il tuo Nome... [text* nome]</div>
</div>

<div class="form-row">
<div class="column-half">La tua Email... [email* email]</div>
<div class="column-half">Il tuo Telefono... [tel* telefono]</div>
</div>

<div class="form-row">
<div class="column-full">Il tuo Messaggio* [textarea your-message]</div>
</div>

<div class="form-row">
<div class="column-full">[checkbox checkbox-term label_first use_label_element "Accetta Termini & Condizioni"]</div>
</div>

<div class="form-row">
<div class="column-full">[submit "Invia"]</div>
</div>
</div>
CSS
/** Plugin – Contact Form 7 **/
#form-cf7 {
width: 100%;
margin: 0 auto;
}

.form-row {
width: 100%;
}

.column-full,
.column-half,
.column-third {
position: relative;
float: left;
width: 100%;
padding: 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.clearfix:after {
content: "";
display: table;
clear: both;
}

/** Computer **/
@media only screen and (min-width: 768px) {
.column-half {
width: 50%;
}

.column-third {
width: 33%;
}
}

Personalizza ogni aspetto del design!

Se desiderate migliorare l’aspetto del frontend e del design del bottone di invio e del messaggio visualizzato dopo l’invio del modulo, potete personalizzare il CSS seguente e inserirlo sempre all’interno di “CSS Personalizzato”.

CSS
/** Bottone **/
.wpcf7-submit {
color: white; /** Colore del Testo **/
background: #000; /** Colore dello Sfondo **/
float: right; /** Posizione del Bottone **/
}

.wpcf7-submit:hover {
color: #000; /** Colore del Testo **/
background: #f3f3f3; /** Colore dello Sfondo **/
}

/** Messaggio di Successo **/
div.wpcf7-mail-sent-ok {
color: white;
background: #8bc34a;
text-shadow: none;
border: none;
}