Contact Form 7, un plugin utilizzato da oltre 5 milioni di utenti, che permette di gestire può gestire moduli di contatto multipli, è affidabile, sicuro e personalizzabile. In questo articolo vedremo un esempio che mostra come disporre disporre i campi di un modulo di contatto, creato con Contact Form 7, su due colonne; per iniziare andiamo a scrivere la parte in HTML nella sezione apposita dell’ applicativo:

<div id="responsive-form" class="clearfix"> <div class="form-row"> <div class="column-half">Nome (*) [text* first-name]</div> <div class="column-half">Cognome (*) [text* last-name]</div> </div> <div class="form-row"> <div class="column-half">Email [email* your-email]</div> <div class="column-half">Telefono [text your-phone]</div> </div> <div class="form-row"> <div class="column-full">Oggetto (*) [text* your-subject]</div> </div> <div class="form-row"> <div class="column-full">Messaggio (*) [textarea* your-message]</div> </div> <div class="form-row"> <div class="column-full">[submit "Invia"]</div> </div> </div><!--end responsive-form-->

l’immagine successiva mostra il risultato che si ottiene utilizzando il codice HTML come sopra esplicitato:


elemento

Per disporre i campi del modulo su due colonne andremo ad implementare l’applicativo con il seguente codice CSS:

/* inizio Conctact Form 7 su due colonne */
#responsive-form{
	max-width:100% /* questo parametro può essere modificato */;
	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%;
	}
}
/* fine Conctact Form 7 su due colonne */

otterremo il risultato mostrato nell’immaginatine successiva:


elemento