{"id":166623,"date":"2024-05-27T09:00:00","date_gmt":"2024-05-27T08:00:00","guid":{"rendered":"https:\/\/gtechgroup.it\/blog\/cf7-form-avanzati-condizionali-multi-step\/"},"modified":"2026-05-26T10:00:00","modified_gmt":"2026-05-26T08:00:00","slug":"cf7-form-avanzati-condizionali-multi-step","status":"publish","type":"post","link":"https:\/\/gtechgroup.it\/blog\/cf7-form-avanzati-condizionali-multi-step\/","title":{"rendered":"Contact Form 7: Form Avanzati \u2014 Condizionali, Multi-Step e File Upload"},"content":{"rendered":"

Oltre il Modulo di Contatto Base: Funzionalita Avanzate<\/h2>\n

Contact Form 7, nella sua configurazione standard, offre tutto il necessario per creare moduli di contatto funzionali. Tuttavia, le esigenze dei siti web moderni spesso vanno oltre il semplice modulo nome-email-messaggio. Potresti aver bisogno di mostrare o nascondere campi in base alle risposte del visitatore, dividere un modulo lungo in piu passaggi per migliorare la esperienza utente, permettere il caricamento di documenti o implementare meccanismi di tracciamento avanzato. In questa guida esploreremo tutte queste funzionalita avanzate, utilizzando plugin complementari e tecniche che estendono le capacita di Contact Form 7 ben oltre le sue funzioni native.<\/p>\n

Ogni funzionalita descritta in questa guida e stata testata e verificata per la compatibilita con le versioni piu recenti di Contact Form 7. Tuttavia, quando utilizzi plugin di terze parti, verifica sempre la compatibilita con la tua versione specifica di WordPress e Contact Form 7.<\/p>\n

Campi Condizionali con Conditional Fields<\/h2>\n

I campi condizionali ti permettono di mostrare o nascondere sezioni del modulo in base alle risposte del visitatore. Ad esempio, se un visitatore seleziona “Azienda” come tipo di contatto, puoi mostrare campi aggiuntivi come “Ragione Sociale”, “Partita IVA” e “Numero Dipendenti” che non sarebbero rilevanti per un privato.<\/p>\n

Installazione del Plugin<\/h3>\n

Installa il plugin Conditional Fields for Contact Form 7<\/strong> dalla bacheca di WordPress (Plugin > Aggiungi nuovo > cerca “Conditional Fields for Contact Form 7”). Dopo la attivazione, avrai un nuovo pulsante “Conditional fields Group” nella barra dei tag del editor di Contact Form 7.<\/p>\n

\"Editor<\/p>\n

Creare Gruppi Condizionali<\/h3>\n

La struttura di un campo condizionale si basa su tre elementi: un campo trigger (che attiva la condizione), un gruppo condizionale (i campi che vengono mostrati o nascosti) e una regola (la condizione che deve essere soddisfatta). Ecco un esempio pratico:<\/p>\n

<label>Tipo di contatto\n    [select your-type \"Privato\" \"Azienda\" \"Ente pubblico\"]<\/label>\n\n[group azienda]\n    <label>Ragione Sociale\n        [text* company-name]<\/label>\n\n    <label>Partita IVA\n        [text* vat-number]<\/label>\n\n    <label>Settore\n        [select company-sector \"Tecnologia\" \"Commercio\" \"Servizi\" \"Manifattura\" \"Altro\"]<\/label>\n[\/group]\n\n[group ente]\n    <label>Nome Ente\n        [text* ente-name]<\/label>\n\n    <label>Codice CIG\/CUP\n        [text cig-cup]<\/label>\n[\/group]<\/code><\/pre>\n
Dopo aver inserito i gruppi nel template, clicca sulla scheda Conditional Fields<\/strong> (aggiunta dal plugin) per configurare le regole. Creerai regole come: “Mostra il gruppo [azienda] quando il campo [your-type] e uguale a Azienda” e “Mostra il gruppo [ente] quando il campo [your-type] e uguale a Ente pubblico”.<\/p>\n
I campi condizionali migliorano notevolmente la esperienza utente perche il visitatore vede solo i campi rilevanti per la sua situazione, rendendo il modulo piu corto e meno intimidatorio. Inoltre, i campi nascosti non vengono validati, quindi non bloccheranno la invio del modulo.<\/p>\n
Moduli Multi-Step: Dividere in Piu Passaggi<\/h2>\n
I moduli lunghi con molti campi possono scoraggiare i visitatori. La soluzione e dividerli in piu passaggi (step), mostrando pochi campi alla volta con una barra di avanzamento che indica quanti passaggi mancano al completamento.<\/p>\n
Installazione del Plugin Multi-Step<\/h3>\n
Installa il plugin Contact Form 7 Multi-Step Forms<\/strong> dalla bacheca di WordPress. Questo plugin permette di creare una sequenza di moduli CF7 che funzionano come passaggi di un unico processo.<\/p>\n
Configurazione dei Passaggi<\/h3>\n
Il principio e creare moduli CF7 separati per ogni passaggio e collegarli tra loro. Ogni modulo (tranne la ultimo) termina con un pulsante “Avanti” invece del classico “Invia”, e i dati vengono passati al passaggio successivo tramite campi nascosti.<\/p>\n
Passaggio 1 \u2014 Dati Personali:<\/strong><\/p>\n
<label>Nome [text* your-name]<\/label>\n<label>Email [email* your-email]<\/label>\n<label>Telefono [tel your-phone]<\/label>\n\n[previous \"Indietro\"][next \"Avanti\"]<\/code><\/pre>\n
Passaggio 2 \u2014 Dettagli Richiesta:<\/strong><\/p>\n
<label>Servizio richiesto\n    [select* your-service \"Web Design\" \"SEO\" \"Social Media\" \"App Mobile\"]<\/label>\n<label>Budget indicativo\n    [select your-budget \"Meno di 1.000 euro\" \"1.000 - 5.000 euro\" \"5.000 - 10.000 euro\" \"Oltre 10.000 euro\"]<\/label>\n\n[previous \"Indietro\"][next \"Avanti\"]<\/code><\/pre>\n
Passaggio 3 \u2014 Messaggio e Invio:<\/strong><\/p>\n
<label>Descrivi il tuo progetto\n    [textarea* your-message]<\/label>\n<label>Allega documenti [file your-file limit:10mb filetypes:pdf|doc|docx]<\/label>\n\n[acceptance your-consent] Accetto la privacy policy [\/acceptance]\n\n[previous \"Indietro\"][submit \"Invia Richiesta\"]<\/code><\/pre>\n
I moduli multi-step sono particolarmente efficaci per richieste di preventivo, registrazioni a eventi, candidature lavorative e qualsiasi scenario in cui e necessario raccogliere molte informazioni senza sovraccaricare il visitatore.<\/p>\n
File Upload: Configurazione Avanzata<\/h2>\n
Il caricamento di file e una funzionalita richiesta in molti contesti: invio di curriculum, documenti aziendali, immagini di riferimento o specifiche di progetto. Contact Form 7 supporta il file upload nativamente con il tag [file]<\/code>, ma richiede una configurazione attenta per funzionare in modo sicuro e affidabile.<\/p>\n
\"Creazione<\/p>\n
Configurazione del Tag File<\/h3>\n
[file your-document limit:10mb filetypes:pdf|doc|docx|xls|xlsx|jpg|png]<\/code><\/pre>\n
I parametri principali sono:<\/p>\n