Creare un modulo di contatto a 2 colonne con Contact Form 7

02 Mar Creare un modulo di contatto a 2 colonne con Contact Form 7

Contact Form 7 è un ottimo plugin per la creazione di moduli di contatto, sicuramente sul podio per installazione attive in siti WordPress.
L’unico “inghippo” e che in diversi temi, se non già preconfigurati, i suoi campi compaiono unicamente in un’unica colonna verticale, mentre spesso l’esigenza grafica è quella di creare un modulo di contatto a due colonne con Contact Form 7.

In questo articolo perciò ho deciso di mostrare una possibile soluzione, e sottolineo “una possibile soluzione” in quanto in certi temi potrebbe anche non funzionare per motivi extra, su come creare un modulo di contatto a 2 colonne responsive utilizzando il nostro plugin Contact Form 7.

È piuttosto semplice e non servono grandi conoscenze tecniche, poichè il tutto si riduce in due passaggi, il primo è quello di creare un codice HTML da inserire nel modulo, mentre il secondo è quello di dargli uno stile (appunto a due colonne) aggiungendo il codice CSS. Per fare ciò ipotizzeremo un modulo con i seguenti campi da compilare:

• Nome
• Cognome
• Email
• Telefono
• Messaggio

I primi due campi, Nome e Cognome, saranno divisi in due colonne mentre gli altri due, Telefono ed Email, saranno incolonnati sotto quelli precedenti. L’ultimo campo invece, quello del Messaggio, prenderà un’unica colonna intera per ovvie ragioni di comodità di scrittura. Per farla breve, il layout del modulo a due colonne di Contact Form 7 dovrebbe comparire come l’immagine seguente.

Codice HTML per modulo di contatto responsive a 2 colonne

Il primo step quindi è quello di andare su Contatto > Moduli di contatto > Il vostro modulo ed andare ad incollare il seguente codice nella scheda chiamata Modulo.

<div class="clearfix">
<div id="left">[text* nome placeholder "Nome*"] [text* cognome placeholder "Cognome*"]</div>
<div id="right">[email* email placeholder "Email*"] [tel* telefono placeholder "Telefono*"]</div>
</div>
[textarea* messaggio placeholder "Messaggio*"]
[submit "Invia"]

Fatto questo, se necessario, aggiungete al modulo gli altri vostri tag come ad esempio la casella di accettazione, il link alla Privacy e tutto ciò che può servirvi, ed ovviamente compilate anche la scheda Mail.

Codice CSS per modulo di contatto responsive a 2 colonne

Ora non rimane che lo step successivo, ossia andare a copiare ed incollare il codice CSS che segue direttamente in Aspetto > Personalizza > CSS aggiuntivo, salvando poi tale modifica.

/*--- Inizio stile modulo di contatto con Contact Form 7 a 2 colonne ---*/

#left {
width: 47%;
float: left;
margin-right:6%;
}

#right {
width: 47%;
float: left;
}

.clearfix:after {
content:"\0020";
display:block;
height:0;
clear:both;
visibility:hidden;
overflow:hidden;
margin-bottom:10px;
}

.clearfix {
display:block;
}

/*--- Fine stile modulo di contatto con Contact Form 7 a 2 colonne ---*/

Se ora andate ad inserire il vostro modulo di contatto nella pagina desiderata, dovreste aver ottenuto un modulo con quattro campi suddivisi in due colonne ed uno in un’unica colonna unica.