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!

Hola 👋
Non vuoi perderti nemmeno un articolo?

Ottima decisione! Iscriviti per ricevere ogni mese un nuovo articolo, direttamente nella tua casella di posta!
Te lo garantisco, zero spam!