Hai bisogno di un modulo di contatto che si adatti alle scelte dell'utente: l'assistenza tecnica mostra un set di campi, l'area commerciale ne mostra uno completamente diverso. Il Contact Form 7 standard non è in grado di farlo. Senza logica condizionale, la pagina mostra un muro di campi tutti insieme, metà dei quali non servono al visitatore. L'aspetto è disordinato e genera confusione.

Il plugin Conditional Fields** per Contact Form 7** risolve questo problema: i campi appaiono e scompaiono in base a ciò che l'utente seleziona. Di seguito trovi una guida passo passo per costruire un modulo di assistenza reale, dall'installazione del plugin fino alle risposte email personalizzate. Lo stesso approccio si adatta a calcolatori, sondaggi e candidature multi-step.

💡 Panoramica rapida:

• Installa CF7 e Conditional Fields, crea un modulo base con una tipologia di richiesta
• Racchiudi i gruppi di campi in [group]…[/group], configura le condizioni di visualizzazione tramite la scheda "Conditional fields"
• Costruisci il modulo finale con gruppi annidati, etichette dinamiche e un ramo personalizzato "Altro"
• Imposta email personalizzate: testo e set di campi diversi per assistenza tecnica e area commerciale

Cosa offrono i campi condizionali

Contact Form 7 è il form builder più diffuso per WordPress: oltre 10 milioni di installazioni attive, overhead minimo. Ma di base è statico: tutti i campi sono sempre visibili. Se il modulo ha tre rami logici (assistenza tecnica, commerciale, partnership), il visitatore vede nove campi extra che non c'entrano nulla con la sua richiesta.

Conditional Fields for Contact Form 7 aggiunge la logica "if-then" direttamente nell'editor del modulo. Il plugin è gratuito, ha una valutazione di 4.8 su WordPress.org e oltre 100.000 installazioni attive. L'autore, Jules Colle, sviluppa anche la versione Pro con campi ripetibili, moduli multi-step e valori calcolati.

Importante: il plugin non rimuove i campi nascosti dal markup; li nasconde solo tramite JavaScript. Pertanto, tutti i campi all'interno dei gruppi nascosti vengono comunque inviati al server. I nomi dei campi devono essere univoci anche tra gruppi diversi, altrimenti i valori verranno sovrascritti. Questa è la regola numero uno e, nella pratica, è l'inciampo più comune.

Installazione e modulo iniziale

Installa entrambi i plugin da Plugin → Aggiungi nuovo:

• Contact Form 7, il form builder vero e proprio
• Conditional Fields for Contact Form 7, il motore di logica condizionale

Dopo l'attivazione, vai su Contatti → Aggiungi nuovo e incolla il template del modulo. Nessun gruppo condizionale per ora, solo tutti i campi insieme:

1
Your name: [text your-name]
2
Your email address: [email your-email]
3
 
4
What kind of support do you want?
5
[select support-type first_as_label "-- Choose support type --" "Technical support" "Sales"]
6
 
7
Your operating system: [select operating-system first_as_label "-- Choose your operating system --" "Android" "iOS" "Linux" "Windows"]
8
 
9
In case you selected Technical support:
10
Please specify your OS version: [text version]
11
 
12
In case you selected Sales:
13
Where is your business located? [select continent first_as_label "-- Choose your continent --" "Europe" "America" "Africa" "Asia" "Oceania" "Antarctica"]
14
 
15
[textarea comments]
16
 
17
[submit "Send"]

Ecco come appare il modulo senza logica: la selezione del sistema operativo e i campi dell'assistenza tecnica sono sempre visibili, anche se il visitatore ha selezionato "Commerciale". Non c'è alcuna opzione "Altro OS" e l'etichetta del campo versione non cambia in base al sistema selezionato. Risolviamo con i gruppi.

Creare gruppi di campi

Un gruppo è una coppia di tag [group group-name] ... [/group]. Tutto ciò che sta in mezzo è nascosto per impostazione predefinita e appare solo quando viene attivata una condizione. I gruppi possono essere annidati l'uno dentro l'altro, il che è utile per la logica a cascata.

Nell'editor del modulo, clicca il pulsante Conditional group sopra l'area di testo; aggiunge i tag automaticamente.

Nella finestra che appare, imposta il nome del gruppo e le opzioni:

• Clear on hide svuota tutti i campi all'interno del gruppo quando questo viene nascosto. Utile per evitare che i valori dei campi invisibili vengano inviati nell'email.
• Inline mostra il gruppo come elemento inline. Comodo quando devi incorporare un pezzo di testo direttamente in una frase (lo mostrerò più avanti).

Crea il primo gruppo technical-support-selected e sposta al suo interno i campi del sistema operativo e della versione:

1
[group technical-support-selected]
2
  Your operating system: [select operating-system first_as_label "-- Choose your operating system --" "Android" "iOS" "Linux" "Windows"]
3
  [group os-selected]
4
    Please specify your OS version: [text version]
5
  [/group]
6
[/group]

Qui ci sono già due gruppi, uno dentro l'altro. Quello esterno (technical-support-selected) rappresenta il fatto che è stata selezionata l'assistenza tecnica. Quello interno (os-selected) è il dettaglio della versione del sistema operativo, che apparirà SOLO quando l'utente seleziona un sistema operativo specifico. Senza una condizione, entrambi i gruppi restano invisibili per ora.

Lo stesso vale per l'area commerciale:

1
[group sales-support-selected]
2
  Where is your business located?
3
  [select continent first_as_label "-- Choose your continent --" "Europe" "America" "Africa" "Asia" "Oceania" "Antarctica"]
4
[/group]

Salva il modulo e i gruppi spariranno dal frontend. È normale: non ci sono ancora condizioni.

Impostare la logica condizionale

Dopo aver salvato il modulo, vai alla scheda Campi condizionali. Ci sono due modalità: visuale (menu a tendina) e testuale (scrivi le regole a mano). La modalità testuale è più rapida per moduli complessi, quindi useremo quella.

Clicca su Aggiungi nuova regola condizionale e inserisci la prima regola:

1
show [technical-support-selected] if [support-type] equals "Technical support"

La sintassi è semplice: show <group> if <field> equals "<value>". Dopo aver salvato la regola, il gruppo technical-support-selected diventerà visibile non appena l'utente seleziona «Technical support» dal menu a tendina.

Aggiungi la regola per le vendite:

1
show [sales-support-selected] if [support-type] equals "Sales"

Ora il modulo passa da un ramo all'altro, ma all'interno del supporto tecnico il campo versione è ancora sempre visibile. Dobbiamo farlo apparire solo dopo aver selezionato un sistema operativo specifico:

1
show [os-selected] if [operating-system] not equals ""

Il controllo not equals "" funziona perché usiamo first_as_label; il valore -- Choose your operating system -- non è considerato selezionato. Il campo operating-system resta vuoto finché il visitatore non clicca effettivamente su un'opzione.

Proseguendo: dovremmo aggiungere un'opzione «Altro» al menu a tendina del sistema operativo. Se l'utente seleziona «Altro», non sappiamo che sistema operativo abbia, quindi gli diamo due campi di testo: nome del sistema e versione. Ci serve un nuovo gruppo os-other-selected e una regola con l'operatore AND:

1
show [os-selected] if [operating-system] not equals ""
2
               and if [operating-system] not equals "Other"
3
show [os-other-selected] if [operating-system] equals "Other"

Due regole per un gruppo: la prima mostra os-selected per qualsiasi sistema operativo tranne «Altro», la seconda mostra os-other-selected solo per «Altro». La logica si esclude a vicenda, quindi non ci saranno conflitti.

Modulo finale: etichette dinamiche e il ramo «Altro»

Ora mettiamo tutto insieme. Aggiungeremo gruppi inline che cambiano l'etichetta del campo versione in base al sistema operativo selezionato (Android, iOS, Linux o Windows). Il testo dell'etichetta è «incorporato» direttamente nel gruppo e appare solo quando la condizione è soddisfatta:

1
Your name: [text your-name]
2
Your email address: [email your-email]
3
 
4
What kind of support do you want?
5
[select support-type first_as_label "-- Choose support type --" "Technical support" "Sales"]
6
 
7
[group technical-support-selected]
8
  Your operating system: [select operating-system first_as_label "-- Choose your operating system --" "Android" "iOS" "Linux" "Windows" "Other"]
9
 
10
  [group os-selected]
11
    Please specify your [group os-android inline]Android[/group][group os-ios inline]iOS[/group][group os-linux inline]Linux[/group][group os-windows inline]Windows[/group] version:
12
    [text version]
13
  [/group]
14
 
15
  [group os-other-selected]
16
    Please specify your OS and version.
17
    [text other-os "Operating System"][text other-version "Version"]
18
  [/group]
19
[/group]
20
 
21
[group sales-support-selected]
22
  Where is your business located?
23
  [select continent first_as_label "-- Choose your continent --" "Europe" "America" "Africa" "Asia" "Oceania" "Antarctica"]
24
[/group]
25
 
26
[textarea comments]
27
 
28
[submit "Send"]

Il punto chiave: gruppi inline con i nomi dei sistemi operativi ([group os-android inline]Android[/group]). L'attributo inline rende il gruppo un elemento inline, così il testo dell'etichetta non va a capo. Le condizioni per questi gruppi nella scheda Campi condizionali:

1
show [technical-support-selected] if [support-type] equals "Technical support"
2
show [sales-support-selected] if [support-type] equals "Sales"
3
show [os-selected] if [operating-system] not equals ""
4
               and if [operating-system] not equals "Other"
5
show [os-android] if [operating-system] equals "Android"
6
show [os-ios] if [operating-system] equals "iOS"
7
show [os-linux] if [operating-system] equals "Linux"
8
show [os-windows] if [operating-system] equals "Windows"
9
show [os-other-selected] if [operating-system] equals "Other"

Clicca su Salva condizioni, poi salva il modulo. Copia lo shortcode [contact-form-7 id="..." title="..."] in una pagina e testalo sul frontend. Il passaggio da un ramo all'altro dovrebbe funzionare all'istante, senza ricaricare la pagina.

Personalizzare la risposta email

I gruppi condizionali funzionano non solo nel modulo ma anche nel template dell'email. Questo significa che l'utente può ricevere un'email diversa in base a ciò che ha selezionato.

Apri la scheda Mail nell'editor del modulo. Nel campo Corpo del messaggio, racchiudi il testo negli stessi gruppi che hai usato nel modulo:

1
[technical-support-selected]
2
Thank you for submitting your technical support question
3
[/technical-support-selected][sales-support-selected]
4
Thank you for your sales question
5
[/sales-support-selected]

Il tag di chiusura [/technical-support-selected] e il tag di apertura [sales-support-selected] vanno uno subito dopo l'altro, senza spazio; altrimenti nell'email comparirà un'interruzione di riga in più.

Ora aggiungiamo una tabella con i campi compilati. All'interno di ogni gruppo, elenchiamo SOLO i campi pertinenti:

1
<table>
2
<tr><td>your-name</td><td>[your-name]</td></tr>
3
<tr><td>your-email</td><td>[your-email]</td></tr>
4
<tr><td>support-type</td><td>[support-type]</td></tr>
5
[technical-support-selected]
6
  <tr><td>operating-system</td><td>[operating-system]</td></tr>
7
  [os-selected]
8
    <tr><td>version</td><td>[version]</td></tr>
9
  [/os-selected]
10
  [os-other-selected]
11
    <tr><td>other-os</td><td>[other-os]</td></tr>
12
    <tr><td>other-version</td><td>[other-version]</td></tr>
13
  [/os-other-selected]
14
[/technical-support-selected]
15
[sales-support-selected]
16
  <tr><td>continent</td><td>[continent]</td></tr>
17
[/sales-support-selected]
18
<tr><td>comments</td><td>[comments]</td></tr>
19
</table>

Quando il modulo viene inviato, il plugin eliminerà dall'email tutto ciò che appartiene a gruppi nascosti. Il supporto tecnico riceverà le righe con sistema operativo e versione; le vendite riceveranno solo il continente. Pulito e chiaro.

Se devi costruire le email a mano e modificare il markup, l'autore del plugin ha creato un convertitore web da codice CF7 a corpo email. Incolla il codice del modulo e ottieni un template di tabella per l'email.

⁉️🤔 Domande frequenti

Perché vedo tutti i gruppi? Le condizioni non funzionano.

Per prima cosa, controlla la console del browser (F12) per eventuali errori JavaScript. Conditional Fields carica il suo script per ultimo, e qualsiasi errore JS precedente blocca tutta la logica. Secondo, il tuo tema deve chiamare wp_footer() nel file footer.php. Senza questo hook, lo script non viene caricato. Nella maggior parte dei casi il colpevole è un conflitto tra plugin: disattiva tutto tranne CF7 e Conditional Fields e prova il modulo. Se funziona, riattiva i plugin uno alla volta finché non trovi il responsabile.

I campi nell'email arrivano con valori errati o vuoti.

I nomi di TUTTI i campi nel modulo devono essere univoci, anche se i campi si trovano in gruppi diversi e non sono mai visibili contemporaneamente. Il plugin NON rimuove i campi nascosti all'invio; li nasconde solo visivamente. Due campi chiamati a in gruppi diversi = due valori per la stessa chiave, e uno dei due prevarrà. Assicurati che ogni campo abbia il proprio nome.

Come posso creare un modulo con passaggi e campi ripetibili?

La versione gratuita non può farlo; ti serve Conditional Fields Pro. Aggiunge la multi-step (suddividere il modulo in passaggi con pulsanti "Avanti"), blocchi di campi ripetibili (repeater) e campi calcolati. Il costo, sul sito dello sviluppatore, dipende dal numero di siti. Se il tuo modulo è semplice e non ha repeater, la versione gratuita è più che sufficiente.

Cosa devo fare se il plugin è in conflitto con il mio tema?

Attiva un tema WordPress standard (Twenty Twenty-Five) e prova il modulo su quello. Se funziona, il problema è nel tuo tema. Di solito, aiuta chiamare manualmente wp_footer() o spostare il modulo su una pagina diversa, priva di script pesanti del tema. Se il tema è personalizzato, chiedi allo sviluppatore di assicurarsi che l'hook wp_footer() sia chiamato su tutte le pagine con i moduli.

Posso usare i campi condizionali per un calcolatore di prezzi?

Sì, ed è uno degli scenari più comuni. Un insieme di menu a tendina (tipo di servizio, volume, urgenza) con gruppi condizionali per ciascuna opzione. La versione Pro aggiunge campi calcolati veri e propri; se devi moltiplicare e sommare valori direttamente nel modulo, guarda in quella direzione.

Cosa fare dopo: dal prototipo al modulo in produzione

Abbiamo costruito un modulo di assistenza con due rami logici, gruppi annidati ed email personalizzate. Lo stesso approccio funziona per qualsiasi scenario con condizioni: sondaggi ramificati, calcolatori, registrazioni con ruoli diversi.

A cosa prestare attenzione prima di andare online:

• Verifica l'univocità di TUTTI i nomi dei campi; lo ripetiamo, è la regola numero uno.
• Prova il modulo su mobile: liste di opzioni lunghe e gruppi annidati possono rallentare i dispositivi meno potenti.
• Imposta una protezione antispam; Contact Form 7 funziona bene con reCAPTCHA v3, Akismet e Turnstile.

Se la logica del tuo modulo va oltre il "mostra/nascondi" e hai bisogno di repeater, calcoli o più passaggi, dai un'occhiata a Conditional Fields Pro. Ma per la maggior parte delle esigenze, la versione gratuita è sufficiente: è stabile, viene aggiornata ogni poche settimane e funziona con Contact Form 7 versione 6.1.6 e WordPress 7.0.

Guarda la dimostrazione video dell'intero processo, dall'installazione al modulo finito; rafforzerà ogni passaggio con un esempio dal vivo: