Il plugin è piuttosto spartano, ma offre una grande elasticità con delle piccole modifiche..

Di default i campi vengono incolonnati e gli unici plugin che ho testato per ovviare a questa situazione non mi sono sembrati pratici da usare.. quindi, a meno che non abbiate installato un tema che va a sovrascrivere le impostazioni di “contact form 7” ci si deve adoperare per aggiungere un po di style.

Come già descritto in questo articolo (Contact Form 7, rendiamolo un pò grazioso con i CSS), possiamo inserire lo “style” direttamente sopra il form che stiamo realizzando.

Andiamo quindi ad aggiungere le classi che poi richiameremo nel form.. ovviamente il richiamo @media queries non deve mancare in quanto tutto il form deve incolonnarsi nuovamente per l’utente che naviga nel sito da smartphone o tablet.. come si legge nel css, @media andrà a stabilire la larghezza massima della finestra browser (in questo esempio 500px), sotto la quale tutte le colonne dovranno essere larghe il 100% andando quindi a incolonnare tutto!.

CSS:

<style>
@media (max-width: 500px) {
.col { width: 100% !important;}
.pad { margin-top: 14px;}
}
.contenitore {width:100%; float:left;}
.col {width:48%; float:left; padding: 0 1% 0 1%;}
.colorato {font-style:italic; font-size:13px; line-height:20px; color:#65a1b5;}
</style>

HTML:

<div class="contenitore">
<div class="col"><label>[text* nome placeholder "Inserisci il tuo Nome *"] </label></div>
<div class="col pad"><label> [text* cognome placeholder "Inserisci il tuo Cognome *"] </label></div>
</div>

<div class="contenitore">
<div class="col"><label>
[tel* telefono placeholder "Il tuo recapito Telefonico *"] </label>
<p class="colorato"><span>Indica un n. di telefono valido.</span></p></div>
<div class="col"><label>
[text* indirizzo placeholder "Inserisci il tuo indirizzo *"] </label>
<p class="colorato"><span>Indica l'indirizzo comprensivo di CAP, COMUNE e CITTA'.</span></p></div>
</div>

<div class="contenitore">
<div class="col"><label>
[email* your-email placeholder "inserisci la tua E-mail *"] </label></div>
<div class="col"><label>
[checkbox* importo-effettuato use_label_element "test 1" "test 2"]
<p class="colorato"><span>Testo da inserire per la scelta dei checkbox.</span></p></label></div>
</div>

<div class="contenitore">
<div class="col"><label>
[textarea testo placeholder "Inserisci note aggiuntive, puoi anche decidere di caricare un file nell'area apposita"] </label></div>
<div class="col"><label>
[file allega-doc limit:210000 filetypes:pdf|jpeg|jpg|gif]<br /><p class="colorato"><span>Selezona il file dal tuo pc o smartphone. Sono ammessi file pdf, jpg (quindi anche screenshot) e gif del peso non superiore a 2mb.</span></p> </label></div>
</div>

<div class="contenitore">
<div class="col"><label>
Si prega di leggere la <a href="http://nome_sito.it/privacy-policy">Privacy Policy</a> di questo sito prima di procedere alla conferma del modulo
[checkbox* accetto-privacy use_label_element "Ho preso visione della Privacy Policy"]</label></div>
<div class="col"></label>
<span style="font-weight:bold;">Servizio Newsletter:</span>
[radio newsletter use_label_element default:2 "Desidero essere iscritto al servizio newsletter" "Preferisco decidere in un secondo momento"]
</label></div>
</div>

<div class="contenitore">
<div class="col"><label>

[quiz quiz "La capitale del Veneto ? |Venezia" "La capitale della Francia ? |Parigi" " E' più grande 8 o 10 ? |10" "E' più grande 7 o 13 ? |13"]</label>
<p class="colorato"><span>Rispondi alla domanda antispam per poter proseguire</span></p></div>
</div>
<div class="contenitore" style="padding-top:10px;"><label>[submit "Invio richiesta"]</label></div>

In sostanza si deve creare un unico contenitore, che a sua volta ne conterrà 2 (uno per ogni campo, quello di sx e quello di dx) e cosi per ogni coppia di campi, ogni contenitore deve avere la sua classe di style “contenitore” e “col”.

Questo è il risultato finale, con gli smartphone apparirà un campo sotto l’altro (quindi dopo il nome, ci sarà il cognome e via dicendo) ma non una colonna sotto l’altra in quanto abbiamo creato un contenitore per ogni coppia di campi:

I campi e la grafica sono stati realizzati ad-hoc per rimanere in tema con il sito, puoi rendere piu grazioso il tuo form leggendo la guida di questa pagina.