Skip to main content
WordPress

Contact Form 7 su due colonne

Contact Form 7 su due colonne

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

Rispettiamo la tua privacy!

Su questo sito utilizziamo strumenti nostri o di terze parti che memorizzano piccoli file (cookie) sul tuo dispositivo. I cookie sono normalmente usati per permettere al sito di funzionare correttamente (cookie tecnici), per generare statistiche di uso/navigazione (cookie statistici). Abilitando questi cookie, ci aiuti ad offrirti una esperienza migliore con noi.

Privacy & Cookie Policy