Come realizzare un modulo di contatto su due colonne con Contact Form 7

Contact Form 7 è uno dei plugin più utilizzati per realizzare un modulo di contatto su un sito fatto con WordPress.

Grazie alla sua semplice interfaccia e all’utilizzo di tag, Contact Form 7 permette di creare dei moduli di contatto in modo facile e veloce. Inoltre è compatibile con numerosi template e plugin, compresi quelli per bloccare lo spam o tenere traccia delle mail ricevute con un database.

Purtroppo però il design del modulo di default di Contact Form 7 è molto basico e soprattutto orientato su un’unica colonna, come nella foto qui sotto.

Ma nel caso in cui, per una questione di spazi o di design, avessi bisogno di mettere il contact form su due colonne? In questo articolo ti spieghiamo come fare utilizzando un po’ di CSS!

Come predisporre i campi di Contact Form 7 su due colonne

Come prima cosa bisogna andare sul modulo di contatto che hai creato con Contact Form 7 e cliccare su modifica. Poi nella sezione Modulo aggiungi questo codice:

Copy to Clipboard

Nel caso tu abbia bisogno di un’altra riga nel tuo modulo di contatto ti basterà aggiungere questo codice inserendo il nome e il tag del campo che ti interessa:

Copy to Clipboard

Per inserire il nome del campo all’interno dei box invece devi invece usare questo codice:

Copy to Clipboard

Modifica del CSS per impostare Contact Form 7 su due colonne

Dopo aver modificato il modulo di contatto, è necessario modificare anche il CSS.
Per farlo vai sulla barra laterale nel backend di WordPress e clicca su Aspetto > Personalizza > CSS Aggiuntivo, e inserisci questo codice:

Copy to Clipboard

/** 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’;
}

Conclusioni

Grazie al codice che ti abbiamo indicato in questo articolo, non solo potrai realizzare un modulo di contatto a due colonne, ma avrai più spazio a disposizione per inserire più campi con cui ottimizzare le comunicazioni che ti arrivano dagli utenti.