fbpx
HeadJungle
  • Home
  • Web design
    • Risorse WordPress
  • Web Marketing
    • Google Analytics
    • SEO
  • Miscellaneous
  • Contatti
No Result
View All Result
  • Home
  • Web design
    • Risorse WordPress
  • Web Marketing
    • Google Analytics
    • SEO
  • Miscellaneous
  • Contatti
No Result
View All Result
HeadJungle
No Result
View All Result

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

E realizzare moduli di contatto belli e compatti:)

Marco Chisari by Marco Chisari
19 Giugno 2018
in Wordpress
15
Come disporre i campi di CF7 su due o più colonne
1
SHARES
0
VIEWS
Share on FacebookShare on Twitter

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.

Come dispore i campi di contact form 7 su due o più colonne

Creare form su due colonne

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.

 

 

 

Plugin Column Shortcodes

 

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

 

CF7 su due colonne

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?;)

Previous Post

Come creare un sito WordPress in 5 step

Next Post

Come impostare il monitoraggio interdominio su Google Analytics tramite Google Tag Manager

Next Post
Monitoraggio interdominio su Google Analytics via Google Tag Manager

Come impostare il monitoraggio interdominio su Google Analytics tramite Google Tag Manager

Comments 15

  1. Tommaso says:
    7 anni ago

    Grazie, articolo veramente utile!

    Rispondi
    • Marco Chisari says:
      7 anni ago

      Grazie a te per il commento:)

      Rispondi
  2. simone says:
    6 anni ago

    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?

    Rispondi
    • Marco Chisari says:
      6 anni ago

      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.

      Rispondi
  3. Roberto says:
    6 anni ago

    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?

    Rispondi
    • Marco Chisari says:
      6 anni ago

      Ciao Roberto e grazie.
      Intendi dire che due campi del form risultano attaccati?
      In questo caso prova ad inserire padding:10px; anzichè padding:0.

      Rispondi
      • Giuseppe says:
        5 anni ago

        Ciao Marco, ho impostato il padding a 10px ma non cambia nulla.

        Rispondi
        • Marco Chisari says:
          5 anni ago

          Ciao Giuseppe, dovrei avere più info. Così non so darti una risposta

          Rispondi
  4. Luca Fornaciari says:
    5 anni ago

    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?

    Cellulare (richiesto)
    [tel* tel-883]
    La tua email (richiesto)
    [email* your-email]

    .padding-b15{
    padding-bottom:15px;}

    Rispondi
    • Marco Chisari says:
      5 anni ago

      Ciao Luca,
      probabilmente c’è qualcosa da modificare nello stile del tema che utilizzi in questo caso

      Rispondi
  5. Teo says:
    5 anni ago

    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:

    Nome (richiesto)
    [text* your-name]
    E-mail (richiesto)
    [email* your-email ]
    Arrivo (richiesto)
    [date arrivo]
    Partenza (richiesto)
    [date partenza]
    [submit “Invia”]

    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

    Rispondi
    • Teo says:
      5 anni ago

      scusami, noto che lo snippet di codice viene renderizzato una volta pubblicato, te lo riposto qui sotto:
      https://prnt.sc/sswlv9

      Rispondi
      • Marco Chisari says:
        5 anni ago

        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

        Rispondi
  6. Teo says:
    5 anni ago

    zero. purtroppo no luck.

    Rispondi
    • Marco Chisari says:
      5 anni ago

      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.

      Rispondi

Lascia un commento Annulla risposta

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Fai una donazione

Search

No Result
View All Result

Marco Chisari

Graphic & Web Designer / Marketer

Benvenuto sul mio blog HeadJungle, uno spin-off del mio lavoro di graphic / web designer / web marketer "ziokiz". In questo sito vorrei condividere trucchi e soluzioni per rendere più semplice la vita dei lavoratori del web.

Contattami

Consigliato

iubenda Certified
Bronze Partner

Categories

  • Design (1)
  • Finance (1)
  • Google Analytics (3)
  • Google Tag Manager (3)
  • Miscellaneous (9)
  • SEO (2)
  • Wordpress (12)
HeadJungle - Miscellaneous blog
Privacy Policy | Cookie Policy
  • Home
  • Contatti
  • Cookie Policy (UE)

© 2025 JNews - Premium WordPress news & magazine theme by Jegtheme.

No Result
View All Result
  • Home
  • Web design
    • Risorse WordPress
  • Web Marketing
    • Google Analytics
    • SEO
  • Miscellaneous
  • Contatti

© 2025 JNews - Premium WordPress news & magazine theme by Jegtheme.

Gestisci Consenso
Per fornire le migliori esperienze, utilizziamo tecnologie come i cookie per memorizzare e/o accedere alle informazioni del dispositivo. Il consenso a queste tecnologie ci permetterà di elaborare dati come il comportamento di navigazione o ID unici su questo sito. Non acconsentire o ritirare il consenso può influire negativamente su alcune caratteristiche e funzioni.
Funzionale Sempre attivo
L'archiviazione tecnica o l'accesso sono strettamente necessari al fine legittimo di consentire l'uso di un servizio specifico esplicitamente richiesto dall'abbonato o dall'utente, o al solo scopo di effettuare la trasmissione di una comunicazione su una rete di comunicazione elettronica.
Preferenze
L'archiviazione tecnica o l'accesso sono necessari per lo scopo legittimo di memorizzare le preferenze che non sono richieste dall'abbonato o dall'utente.
Statistiche
L'archiviazione tecnica o l'accesso che viene utilizzato esclusivamente per scopi statistici. L'archiviazione tecnica o l'accesso che viene utilizzato esclusivamente per scopi statistici anonimi. Senza un mandato di comparizione, una conformità volontaria da parte del vostro Fornitore di Servizi Internet, o ulteriori registrazioni da parte di terzi, le informazioni memorizzate o recuperate per questo scopo da sole non possono di solito essere utilizzate per l'identificazione.
Marketing
L'archiviazione tecnica o l'accesso sono necessari per creare profili di utenti per inviare pubblicità, o per tracciare l'utente su un sito web o su diversi siti web per scopi di marketing simili.
Gestisci opzioni Gestisci servizi Gestisci {vendor_count} fornitori Per saperne di più su questi scopi
Visualizza le preferenze
{title} {title} {title}