Come disporre i campi di Contact Form 7 su 2 o più colonne

Se anche tu, come me, utilizzi Contact Form 7 per implementare form sui tuoi siti WordPress, magari ti sei chiesto più volte se esiste un modo per disporre i vari campi su due o più colonne.

Di fatto, tutti i form di CF7 “escono dalla fabbrica” in modalità colonna unica, come questo in figura.

Esiste però una via piuttosto semplice per disporre i campi su due o più colonne.
Vediamo come si fa in 3 passi.

Vuoi saperne di più su come sfruttare al meglio i messaggi che ricevi tramite form e aumentare così le vendite del tuo e-commerce?
[amazon_link asins=’0071458298,0071352872,1546910638,8820375052,8857905535′ template=’ProductCarousel’ store=’wet0d-21′ marketplace=’IT’ link_id=’9c83045a-73ca-11e8-99bd-05500051fc4c’]

STEP 1 – PERMETTERE A CF7 DI UTILIZZARE GLI SHORTCODES
Di default CF7 utilizza solo html. Per usare gli shortcodes dobbiamo dire a WP di sbloccarli per poterli utilizzare anche su CF7.
Per fare questo dobbiamo aggiungere al file function.php del nostro tema child il seguente codice:

//abilita shortcode CF
add_filter( 'wpcf7_form_elements', 'kiz_wpcf7_form_elements' );
 
function kiz_wpcf7_form_elements( $form ) {
   $form = do_shortcode( $form );
   return $form;
   }

STEP 2 – SCARICARE IL PLUGIN COLUMN SHORTCODES
Il plugin Column Shortcodes sblocca la possibilità di utilizzare degli shortcodes specifici per visualizzare qualsiasi contenuto su più colonne. Quindi contenuti di pagine, di articoli e, nel nostro caso, anche di form.

STEP 3 – INSERIRE IL CODICE NEL FORM
Una volta installato e attivato il nostro form CF7 digerirà volentieri l’utilizzo di colonne, aggiungendo semplicemente un codice di questo tipo:

<div class="content-column one_half"><div style="padding:0;"><label> Il tuo nome (richiesto)
    [text* your-name] </label></div></div>
 
<div class="content-column one_half last_column"><label> La tua email (richiesto)
    [email* your-email] </label></div><div class="clear_column"></div>

<label> Oggetto
    [text your-subject] </label>

<label> il tuo messaggio
    [textarea your-message] </label>
 
[submit "Invia"]

E avremo un risultato di questo tipo

Naturalmente se vogliamo ottenere 3 colonne dovremo usare un codice del tipo

<div class="content-column one_third"><div style="padding:0;"><label> Il tuo nome (richiesto)
    [text* your-name] </label></div></div>
 
<div class="content-column one_third"><div style="padding:0;"><label> La tua email (richiesto)
    [email* your-email] </label></div></div>

<div class="content-column one_third last_column"><label> Oggetto 
    [text your-subject] </label><div class="clear_column"></div></div>

<label> il tuo messaggio
    [textarea your-message] </label>
 
[submit "Invia"]

Per 4 colonne useremo l’espressione “one_fourth” e così via…Semplice no?

Se questo articolo ti è stato utile perchè non lo condividi o lo commenti?;)