Contact Form 7, un plugin utilizzato da oltre 5 milioni di utenti, consente di 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; l’esempio è stato testato con il tema The7, quindi potrebbe non funzionare correttamente con altri temi sviluppati per WordPress.
Per iniziare andremo a scriviamo 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">[submit "INVIA"]</div> </div>
Per disporre i campi del modulo su due colonne implementiamo l’applicativo con il codice seguente:
/* inizio Conctact Form 7 su due colonne */
#responsive-form{
max-width:600px /* 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 only screen and (min-width: 48em) {
.column-half{
width: 50%;
}
}
.wpcf7-submit{
float: right;
margin-right: 10px;
}
/* fine Conctact Form 7 su due colonne */
