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 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 (*) </div> <div class="column-half">Cognome (*) </div></div> <div class="form-row"> <div class="column-half">Email (*) [email* your-email]</div> <div class="column-half">Telefono </div> </div><div class="form-row"> <div class="column-full">Oggetto (*) </div></div> <div class="form-row"> <div class="column-full">Messaggio (*) [textarea* your-message]</div></div> <div class="form-row">[submit "INVIA"]</div></div>
otterremo questo risultato
per disporre i campi del modulo su due colonne andremo ad implementare 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 */
otterremo questo risultato
