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?;)
Grazie, articolo veramente utile!
Grazie a te per il commento:)
Ciao Marco,
Ho seguito quanto hai scritto e funziona piuttosto bene. Bravo!
Stavo preparando un form per un sito, quando si è presentato un intoppo.
Prima del campo invia, devo inserire l’accettazione della privacy con il quadratino da spuntare. Non me li allinea a sinistra e il testo della privacy non scorre fino in fondo ma si interrompe e va a capo a circa metà della lunghezza totale del form e Il quadratino rimane a circa metà della colonna di sinistra.
Come posso risolvere?
CIao Simone, probabilmente è un conflitto con il tema che stai utilizzando. Anche a me una volta aveva dato lo stesso problema e ho dovuto agire sul file css.
Ciao Marco, complimenti per l’articolo. Ho usato il tuo codice ma i due form sulla stessa linea risultano attaccati, come faccio a dare uno spazio?
Ciao Roberto e grazie.
Intendi dire che due campi del form risultano attaccati?
In questo caso prova ad inserire padding:10px; anzichè padding:0.
Ciao Marco, ho impostato il padding a 10px ma non cambia nulla.
Ciao Giuseppe, dovrei avere più info. Così non so darti una risposta
Ciao, sto usando il tuo codice dentro il widjet di bakery, funziona tutto correttamente tranne email e cellulare, dove i campi input escono dalla colonna, dove sbaglio?
[tel* tel-883]
[email* your-email]
.padding-b15{
padding-bottom:15px;}
Ciao Luca,
probabilmente c’è qualcosa da modificare nello stile del tema che utilizzi in questo caso
ciao, ho seguito il tutorial ma non ottengo il risultato desiderato: NOME | EMAIL | ARRIVO | PARTENZA | INVIO
cinque colonne.
tutto mi pare molto chiaro e ben descritto nel tuo tutorial ma alla fine è un blocco monovolonna.
il codice è questo:
[text* your-name]
[email* your-email ]
[date arrivo]
[date partenza]
l’ultima colonna è il button “invio”
mi daresti una dritta? i primi due passaggi sono regolarmente svolti: modifica del function.php e install del plugin.
grazie infinite fin d’ora.
teo
scusami, noto che lo snippet di codice viene renderizzato una volta pubblicato, te lo riposto qui sotto:
https://prnt.sc/sswlv9
Ciao Teo,
nel tuo caso nell’ultima colonna non va inserito il “clear column”. Prova eventualmente ad inserire una colonna vuota sotto e mettere lì il clear column
zero. purtroppo no luck.
Ciao Teo, purtroppo così è difficile poterti dare una mano, dovrei vedere sito, tema e codice. Magari puoi provare a spostare il bottone “invia” su una riga sotto, e lasciare la riga sopra di 4 colonne.
Altrimenti se vuoi girami tutti i dettagli in privato per una consulenza mirata.