Contact form 7 su due colonne

Vi sarà capitato di voler inserire un contact form usando il plugin Contact Form 7 sul vostro sito WordPress. Questo plugin é infatti uno dei migliori – a mio avviso – per l’inserimento di moduli di contatto. Di default, la predisposizione dei campi é su una riga. Ad ogni riga corrisponde un campo.

Come fare quindi a inserire i campi del contact form su due colonne? Non è così complicato, bisognerà indubbiamente usare del codice custom ma se segui passo a passo questa guida sono certa riuscirai nell’impresa!

 

Come predisporre i campi di Contact Form 7 su due colonne

Per prima cosa, dovrai andare sul tuo modulo di contatto creato dentro a Contact Form 7 e cliccare su modifica.

Ora, le opzioni che abbiamo sono 2. Nella prima ti mostrerò come inserire i campi Nome, Email e Messaggio con tanto di “Label” prima della casella, il risultato finale sarà questo:

 

Procediamo dunque a inserire il seguente codice nella sezione Modulo che ti avevo mostrato poco fa’.

</pre>
<div id="responsive-form" class="clearfix">

<div class="form-row">
<div class="column-half">Nome * </div>
<div class="column-half">La tua Email * [email* your-email]</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">[submit "Invia"]</div>
</div>

</div> 

 

Se hai esigenze di inserire più campi, basterà replicare il codice

<div class="form-row">
<div class="column-half">Nome * </div>
<div class="column-half">La tua Email * [email* your-email]</div>
</div>

sostituendo i vari campi per quelli che desideri.

Modifica del CSS per impostare il Contact Form su due colonne

Il secondo step invece, é quello del CSS. Dunque, sotto il tuo editor di CSS (solitamente sotto Aspetto -> Personalizzazione e poi Custom CSS) inserisci il seguente codice:


/** CSS per contact form ---**/
#responsive-form{
max-width:600px /*-- cambia questo con la larghezza desiderata --*/;
margin:0 auto;
width:100%;
}
.form-row{
width: 100%;
}
.column-half, .column-full{
float: left;
position: relative;
padding: 0.65rem;
width:100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
.clearfix:after {
content: "";
display: table;
clear: both;
}

/**---------------- Media query ----------------**/
@media only screen and (min-width: 48em) { 
.column-half{
width: 50%;
}
}

/**---------------- Per spostare il bottone invio a destra ----------------**/

.wpcf7-submit{
float: right;
}

/**---------------- Per cambiare il colore del bottone ----------------**/ 
.wpcf7-submit{ 
background: #000/*-- colore sfondo --*/;
color: white/*-- colore testo --*/; 
}

/**---------------- Colore del bottone con il passaggio del mouse ----------------**/ 
.wpcf7-submit:hover{ 
background: #f3f3f3;
color: #000; 
}

/**---------------- Per personalizzare il messaggio di successo ----------------**/

div.wpcf7-mail-sent-ok {
text-shadow: none;
border: none;
background: #8BC34A;
color: white;
font-family: 'Raleway';
}

Salva, et voilà! Il gioco é fatto!

Se invece, desideri che i campi non abbiano un label che li preceda, e preferisci dunque un placeholder al loro posto, ovvero vuoi ottenere il seguente risultato:

 

Allora il codice da inserire nel tuo Modulo di Contact Form 7 sarà il seguente:


<div id="responsive-form" class="clearfix">

<div class="form-row">
<div class="column-half"></div>
<div class="column-half">[email* your-email placeholder "La tua email"]</div>
</div>

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

<div class="form-row">
<div class="column-full">[submit "Invia"]</div>
</div>

</div>

Il CSS resta invariato per entrambe le opzioni di visualizzazione!

Tutto chiaro? Se hai dubbi, lascia pure un messaggio qui sotto!