Il layout standard di Contact Form 7 è una colonna verticale di campi. Nome, email, oggetto, messaggio, impilati uno sotto l'altro, estesi a tutta larghezza. L'aspetto è goffo e occupa spazio sullo schermo, soprattutto quando hai più di tre campi.

Ma ecco il punto: l'editor di CF7 comprende l'HTML. Questo significa che puoi racchiudere i campi in contenitori div, impostarne la larghezza e allinearli in riga. Nessun plugin, nessun trucco, solo puro CSS.

Qui sotto trovi due metodi funzionanti per disporre i campi di Contact Form 7 su 2, 3 o 4 colonne. Il primo è universale (HTML + CSS), il secondo usa il sistema di shortcode del tuo tema. Entrambi sono stati testati su siti live e non rompono il layout mobile.

💡 Panoramica rapida:

• Vedi l'aspetto di un modulo CF7 predefinito e perché il layout verticale è problematico
• Copia il CSS flexbox già pronto e incollalo nel tuo child theme (metodo 1, nessun plugin)
• Se il tuo tema supporta già shortcode per colonne, abilitali in CF7 e racchiudi i tuoi campi (metodo 2)
• Testa il risultato su desktop e mobile (media query inclusa)

L'aspetto di un modulo Contact Form 7 predefinito

Dopo aver creato un modulo tramite "Contatti" → "Aggiungi nuovo", ottieni un markup standard: campi di testo, email, messaggio e un pulsante di invio, rigorosamente impilati uno sotto l'altro. Nell'editor appare così:

Nel frontend, con TwentySeventeen o qualsiasi altro tema senza stili personalizzati per i moduli, l'output sarà verticale:

I campi "Nome" ed "Email" occupano tutta la larghezza disponibile, anche se ne basterebbe metà per ciascuno. Il risultato: il modulo sembra massiccio, gli utenti scorrono più del necessario e le conversioni calano.

L'editor di CF7 è progettato per accettare markup HTML all'interno del template del modulo. È esattamente ciò che useremo.

Metodo 1: HTML + CSS flexbox (consigliato)

L'approccio: racchiudi i campi del modulo in elementi <div> con classi CSS per le colonne, poi definisci quelle classi una volta sola nel tuo child theme o tramite un plugin CSS personalizzato.

Nessun plugin aggiuntivo per le colonne, solo CF7 e poche righe di CSS.

Griglia CSS per 2 e 3 colonne

Qui sotto trovi CSS pronto all'uso con flexbox. A differenza delle soluzioni basate su float, flex allinea automaticamente le colonne in altezza e non richiede hack di clearfix:

1
/* Column row */
2
.cf7-row {
3
    display: flex;
4
    flex-wrap: wrap;
5
    gap: 4%;
6
    margin-bottom: 16px;
7
}
8
 
9
/* 2 columns */
10
.cf7-col-2 {
11
    flex: 0 0 48%;
12
}
13
 
14
/* 3 columns */
15
.cf7-col-3 {
16
    flex: 0 0 30.66%;
17
}
18
 
19
/* Mobile: columns stack vertically */
20
@media only screen and (max-width: 767px) {
21
    .cf7-col-2,
22
    .cf7-col-3 {
23
        flex: 0 0 100%;
24
    }
25
}

Inserisci il CSS nel tuo child theme (file style.css) o tramite il plugin Simple Custom CSS, che aggiunge un campo per gli stili nel pannello di amministrazione senza modificare file.

Markup dentro CF7

Apri l'editor del modulo (Contatti → il tuo modulo) e racchiudi i campi in contenitori div con le classi CSS viste sopra. Per 2 colonne:

1
<div class="cf7-row">
2
  <div class="cf7-col-2">
3
    <label>Your name (required)
4
      [text* your-name]
5
    </label>
6
  </div>
7
  <div class="cf7-col-2">
8
    <label>Your Email (required)
9
      [email* your-email]
10
    </label>
11
  </div>
12
</div>
13
 
14
<label>Your message
15
  [textarea your-message]
16
</label>
17
 
18
[submit "Send"]

Sul sito, il risultato apparirà così:

Tre colonne, stessa logica

Per tre campi in riga, cambia le classi in cf7-col-3 e aggiungi un terzo blocco:

1
<div class="cf7-row">
2
  <div class="cf7-col-3">
3
    <label>Your name (required)
4
      [text* your-name]
5
    </label>
6
  </div>
7
  <div class="cf7-col-3">
8
    <label>Your Email (required)
9
      [email* your-email]
10
    </label>
11
  </div>
12
  <div class="cf7-col-3">
13
    <label>Subject
14
      [text your-subject]
15
    </label>
16
  </div>
17
</div>
18
 
19
<label>Your message
20
  [textarea your-message]
21
</label>
22
 
23
[submit "Send"]

Output frontend:

I campi «Nome», «Email» e «Oggetto» ora sono allineati su un’unica riga, mentre il messaggio occupa l’intera larghezza sotto di essi. Sugli schermi con larghezza inferiore a 767px tutte le colonne collassano in una sola, mantenendo il modulo leggibile sui telefoni.

Il vantaggio di flexbox: se le altezze dei campi differiscono (ad esempio per un’etichetta lunga in una colonna), la riga non si rompe. Flex allinea le colonne automaticamente. I layout basati su float non possono farlo senza ricorrere a espedienti come clearfix e margin-right.

Metodo 2: colonne con shortcode del tema

Alcuni temi WordPress, in particolare quelli commerciali come GeneratePress, Kadence e Astra, dispongono di un sistema di shortcode integrato per le colonne. Di solito compare come pulsante nell’editor e genera shortcode del tipo [one_half]...[/one_half] oppure [column grid="6"]...[/column].

Se il tuo tema lo supporta, puoi creare colonne in CF7 senza CSS. Devi però consentire a CF7 di elaborare gli shortcode all’interno del modulo, perché di default li ignora.

Passaggio 1: abilitare gli shortcode nell’editor di CF7

Installa il plugin Contact Form 7 Shortcode Enabler. È minimale, pesa pochi kilobyte e fa esattamente una cosa: lascia passare gli shortcode attraverso CF7.

Alternativa senza plugin: aggiungi un filtro al file functions.php del tuo child theme:

1
add_filter('wpcf7_form_elements', 'cf7_do_shortcode');
2
 
3
function cf7_do_shortcode($form) {
4
    return do_shortcode($form);
5
}

Passaggio 2: racchiudere i campi con gli shortcode per colonne

Il principio è lo stesso delle classi div, ma al posto delle classi CSS si usano gli shortcode del tema. Il pulsante per generarli si trova di solito nell’editor visuale di WordPress:

Genera gli shortcode per il numero di colonne desiderato e inserisci il contenuto:

Output della pagina:

Ora trasferisci gli shortcode nell'editor di CF7. Per 2 campi sulla stessa riga:

1
[one_half]
2
<label>Your name (required)
3
  [text* your-name]
4
</label>
5
[/one_half]
6
 
7
[one_half_last]
8
<label>Your Email (required)
9
  [email* your-email]
10
</label>
11
[/one_half_last]
12
 
13
<label>Your message
14
  [textarea your-message]
15
</label>
16
 
17
[submit "Send"]

Il risultato frontend sono le stesse due colonne del metodo 1. Questo approccio è comodo quando il tuo tema ha già shortcode per le griglie: niente CSS da scrivere e la responsività funziona in automatico.

Lo svantaggio: resti vincolato al tema. Se cambi tema, le colonne da shortcode spariscono e il modulo si rompe. Il metodo 1 con CSS si trasferisce tra qualsiasi tema.

Video: configurare passo passo un modulo a più colonne

Una video-guida dettagliata in inglese dove l'autore mostra entrambi gli approcci, inclusa la configurazione flexbox e l'adattamento mobile:

⁉️🤔 Domande frequenti

Il markup flexbox funziona nei browser più vecchi?

Flexbox è supportato da tutti i browser moderni da oltre dieci anni: Chrome, Firefox, Safari ed Edge hanno piena compatibilità senza prefissi a partire dalle versioni rilasciate nel 2015-2016. L'unica eccezione è Internet Explorer 11, dove flexbox funziona con bug minori e richiede il prefisso -ms-, ma la quota di traffico globale di IE11 è scesa sotto la soglia di rilevanza statistica. Per siti in produzione, flexbox si può usare senza prefissi in tutta sicurezza.

Posso avere un numero diverso di colonne in righe diverse del modulo?

Sì. Il contenitore flexbox .cf7-row isola ogni riga: può contenere 2, 3 o 4 colonne, mentre la riga successiva ha una combinazione diversa. Ad esempio, la prima riga ha nome + email (2 colonne), la seconda ha azienda + telefono + città (3 colonne) e la terza ha un messaggio a larghezza piena. Basta chiudere un .cf7-row prima di aprirne un altro.

Cosa succede se le etichette dei campi hanno lunghezze diverse e le colonne si disallineano?

In una riga flexbox, le colonne si estendono all'altezza di quella più alta per impostazione predefinita. Questo comportamento è abilitato esplicitamente con align-items: stretch (attivo di default nel codice sopra). Se le etichette appaiono ancora visivamente disallineate, imposta un'altezza fissa per le etichette con label { min-height: 48px; display: block; } all'interno del modulo.

Devo abilitare gli shortcode per il metodo 1 con CSS?

No. Il metodo 1 usa HTML puro (contenitori div con classi) e CF7 lascia passare il markup HTML senza plugin aggiuntivi. Il plugin Shortcode Enabler serve solo per il metodo 2, dove si usano colonne da shortcode del tema all'interno del modulo.

Cosa succede se il mio tema usa Gutenberg invece degli shortcode?

Le colonne di Gutenberg funzionano a livello di pagina o articolo, ma non dentro l'editor di CF7. Il modulo CF7 stesso viene inserito tramite lo shortcode [contact-form-7 id="..." title="..."] in una pagina e Gutenberg non controlla il layout dei campi al suo interno. Per le colonne dentro il modulo, usa il metodo 1 (CSS flexbox), che è compatibile con qualsiasi editor.

Vale la pena impostare le colonne?

Un modulo a colonna singola funziona. Un modulo a due colonne funziona e raccoglie più invii perché ha un aspetto più ordinato e richiede meno scorrimento. La differenza di conversione può sembrare minima a prima vista, ma nel tempo si traduce in decine di lead in più.

Il metodo flexbox risolve completamente il problema: 15 righe di CSS, 5 minuti di configurazione, zero plugin. Non è legato a nessun tema, non si rompe quando il CMS si aggiorna e non crea dipendenze. Se il tuo tema supporta già la suddivisione in colonne, anche l'approccio con shortcode funziona, ma ricorda il plugin per abilitare gli shortcode e tieni presente che le colonne spariranno se cambi tema.

Entrambi i metodi sono stati testati su CF7 versione 6.1 e successive, con WordPress 6.5+. Funzionano in produzione senza sorprese.