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’.
[html]</pre>
<div id="responsive-form" class="clearfix">
<div class="form-row">
<div class="column-half">Nome * [ text* your-name ]</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> [/html]
Se hai esigenze di inserire più campi, basterà replicare il codice
[html]<div class="form-row">
<div class="column-half">Nome * [text* your-name]</div>
<div class="column-half">La tua Email * [email* your-email]</div>
</div>[/html]
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]
/** 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’;
}
[/css]
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:
[html]
<div id="responsive-form" class="clearfix">
<div class="form-row">
<div class="column-half">[text your-name placeholder "Il tuo nome"]</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>
[/html]
Il CSS resta invariato per entrambe le opzioni di visualizzazione!
Tutto chiaro? Se hai dubbi, lascia pure un messaggio qui sotto!
