{"id":166619,"date":"2024-04-01T09:00:00","date_gmt":"2024-04-01T08:00:00","guid":{"rendered":"https:\/\/gtechgroup.it\/blog\/cf7-tutti-tag-campi-guida-completa\/"},"modified":"2026-05-26T10:00:00","modified_gmt":"2026-05-26T08:00:00","slug":"cf7-tutti-tag-campi-guida-completa","status":"publish","type":"post","link":"https:\/\/gtechgroup.it\/blog\/cf7-tutti-tag-campi-guida-completa\/","title":{"rendered":"Contact Form 7: Tutti i Tag e Campi \u2014 Guida Completa"},"content":{"rendered":"

Introduzione ai Tag di Contact Form 7<\/h2>\n

Contact Form 7 utilizza un sistema di tag proprietario per definire i campi dei moduli. Ogni tag rappresenta un elemento del modulo che viene convertito in codice HTML quando la pagina viene visualizzata dal visitatore. Comprendere a fondo tutti i tag disponibili e fondamentale per sfruttare al massimo le potenzialita di questo plugin e creare moduli che rispondano esattamente alle tue esigenze. In questa guida analizzeremo ogni singolo tag offerto da Contact Form 7, con la sintassi completa, esempi pratici e suggerimenti per ogni caso di utilizzo.<\/p>\n

Prima di iniziare, e importante comprendere la struttura base di un tag CF7. Ogni tag segue questo schema: [tipo-tag nome-campo opzioni \"valore-predefinito\"]<\/code>. Il simbolo asterisco (*) dopo il tipo indica che il campo e obbligatorio. Il nome del campo e quello che utilizzerai come mail-tag nella scheda Email per recuperare il valore inserito dal visitatore.<\/p>\n

\"Editor<\/p>\n

Tag text e text* \u2014 Campo di Testo<\/h2>\n

Il tag text<\/code> crea un campo di input testuale su una singola riga. E il tag piu versatile e utilizzato nei moduli di contatto.<\/p>\n

Sintassi base:<\/strong><\/p>\n

[text your-name]\n[text* your-name]  (obbligatorio)<\/code><\/pre>\n
Con opzioni avanzate:<\/strong><\/p>\n
[text* your-name minlength:2 maxlength:50 placeholder \"Il tuo nome completo\" class:campo-nome id:nome]<\/code><\/pre>\n
Le opzioni disponibili includono: minlength<\/code> e maxlength<\/code> per limitare la lunghezza del testo, placeholder<\/code> per mostrare un testo guida, class<\/code> e id<\/code> per aggiungere attributi CSS, e default:get<\/code> per precompilare il campo con un parametro dalla URL. Questo tag e ideale per raccogliere nomi, cognomi, numeri di riferimento, codici e qualsiasi altra informazione testuale breve.<\/p>\n
Tag email e email* \u2014 Campo Email<\/h2>\n
Il tag email<\/code> crea un campo specifico per gli indirizzi email con validazione automatica del formato.<\/p>\n
Sintassi:<\/strong><\/p>\n
[email* your-email placeholder \"nome@esempio.it\"]<\/code><\/pre>\n
La validazione integrata verifica che il valore inserito contenga il simbolo @ e un dominio valido. Sui dispositivi mobili, questo tag attiva automaticamente una tastiera ottimizzata con il simbolo @ ben visibile. E fortemente consigliato rendere sempre obbligatorio questo campo, poiche senza un indirizzo email valido non potrai rispondere al visitatore. Nella scheda Email del modulo, utilizza il mail-tag [your-email]<\/code> nel campo Reply-To per poter rispondere direttamente.<\/p>\n
Tag url \u2014 Campo URL<\/h2>\n
Il tag url<\/code> e pensato per raccogliere indirizzi web e include la validazione del formato URL.<\/p>\n
Sintassi:<\/strong><\/p>\n
[url your-website placeholder \"https:\/\/www.esempio.it\"]<\/code><\/pre>\n
Questo tag e utile quando desideri che il visitatore indichi il proprio sito web, ad esempio in un modulo di richiesta preventivo per servizi di realizzazione siti web<\/a>. La validazione verifica che il valore inserito abbia il formato di un URL valido.<\/p>\n
Tag tel \u2014 Campo Telefono<\/h2>\n
Il tag tel<\/code> crea un campo ottimizzato per i numeri di telefono.<\/p>\n
Sintassi:<\/strong><\/p>\n
[tel your-phone placeholder \"+39 333 1234567\"]<\/code><\/pre>\n
Su smartphone e tablet, questo tag attiva la tastiera numerica, rendendo piu semplice e veloce la digitazione del numero. A differenza del campo email, il tag tel non effettua una validazione rigorosa del formato, poiche i formati telefonici variano significativamente tra paesi diversi. Se hai bisogno di una validazione specifica, puoi utilizzare le espressioni regolari come spiegato nella guida alla validazione dei campi<\/a>.<\/p>\n
Tag textarea \u2014 Area di Testo<\/h2>\n
Il tag textarea<\/code> crea un campo di testo multi-riga, ideale per messaggi lunghi.<\/p>\n
Sintassi:<\/strong><\/p>\n
[textarea your-message]\n[textarea* your-message 40x10 placeholder \"Scrivi qui il tuo messaggio...\"]<\/code><\/pre>\n
I parametri 40x10<\/code> indicano rispettivamente la larghezza (colonne) e la altezza (righe) del campo. Senza questi parametri, Contact Form 7 utilizza dimensioni predefinite. Il tag textarea accetta anche minlength<\/code> e maxlength<\/code> per controllare la lunghezza del testo. Ad esempio, [textarea* your-message minlength:20 maxlength:2000]<\/code> richiede almeno 20 caratteri e ne accetta al massimo 2000.<\/p>\n
Tag select \u2014 Menu a Tendina<\/h2>\n
Il tag select<\/code> crea un menu a tendina (dropdown) con opzioni predefinite.<\/p>\n
Sintassi:<\/strong><\/p>\n
[select your-service \"Web Design\" \"SEO\" \"Social Media\" \"Consulenza\"]\n[select* your-service include_blank \"Web Design\" \"SEO\" \"Social Media\" \"Consulenza\"]<\/code><\/pre>\n
La opzione include_blank<\/code> aggiunge una voce vuota in cima al menu, forzando il visitatore a fare una scelta esplicita. Per permettere la selezione multipla, aggiungi la opzione multiple<\/code>: [select* your-services multiple \"Web Design\" \"SEO\" \"Social Media\"]<\/code>. Nella email, le selezioni multiple vengono separate da virgole.<\/p>\n
Puoi anche utilizzare la sintassi pipe per separare il valore visualizzato dal valore inviato via email: [select your-dept \"Vendite|sales\" \"Supporto|support\" \"Amministrazione|admin\"]<\/code>. In questo caso il visitatore vede “Vendite” ma il valore inviato nella email sara “sales”.<\/p>\n
Tag checkbox \u2014 Caselle di Controllo<\/h2>\n
Il tag checkbox<\/code> crea un gruppo di caselle di controllo che permettono selezioni multiple.<\/p>\n
Sintassi:<\/strong><\/p>\n
[checkbox your-interests \"WordPress\" \"SEO\" \"E-commerce\" \"App Mobile\"]\n[checkbox* your-interests use_label_element exclusive \"Opzione A\" \"Opzione B\" \"Opzione C\"]<\/code><\/pre>\n
La opzione use_label_element<\/code> rende cliccabile il testo accanto alla casella (non solo il quadratino), migliorando la usabilita. La opzione exclusive<\/code> trasforma le checkbox in un comportamento simile ai radio button, permettendo una sola selezione. Per preselezionare una opzione, utilizza default:1<\/code> (il numero indica la posizione della opzione, partendo da 1).<\/p>\n
Tag radio \u2014 Pulsanti Radio<\/h2>\n
Il tag radio<\/code> crea un gruppo di pulsanti radio per la selezione singola.<\/p>\n
Sintassi:<\/strong><\/p>\n
[radio your-budget default:1 \"Meno di 1000 euro\" \"1000-5000 euro\" \"5000-10000 euro\" \"Oltre 10000 euro\"]<\/code><\/pre>\n
A differenza delle checkbox, i radio button permettono sempre e solo una selezione. La opzione default:1<\/code> preseleziona la prima opzione. I radio button sono ideali quando hai un numero limitato di opzioni mutuamente esclusive, come la scelta di un budget, una tipologia di servizio o una preferenza di contatto.<\/p>\n
\"Creazione<\/p>\n
Tag acceptance \u2014 Casella di Accettazione<\/h2>\n
Il tag acceptance<\/code> crea una casella di accettazione, tipicamente utilizzata per il consenso alla privacy policy (GDPR).<\/p>\n
Sintassi:<\/strong><\/p>\n
[acceptance your-consent] Accetto il trattamento dei dati personali secondo la <a href=\"\/privacy-policy\/\">Privacy Policy<\/a> [\/acceptance]<\/code><\/pre>\n
Quando la casella non e selezionata, il pulsante di invio viene disabilitato automaticamente. Puoi invertire questo comportamento con la opzione invert<\/code>. La opzione optional<\/code> rende la casella facoltativa, utile per consensi non obbligatori come la iscrizione alla newsletter. Questo tag e essenziale per la conformita al GDPR e alla normativa sulla privacy.<\/p>\n
Tag file \u2014 Caricamento File<\/h2>\n
Il tag file<\/code> permette ai visitatori di allegare file al modulo.<\/p>\n
Sintassi:<\/strong><\/p>\n
[file your-file limit:5mb filetypes:pdf|doc|docx|jpg|png]<\/code><\/pre>\n
La opzione limit<\/code> imposta la dimensione massima del file (in bytes, kb o mb). La opzione filetypes<\/code> limita i tipi di file accettati, separati dal simbolo pipe. Per allegare il file alla email di notifica, aggiungi [your-file]<\/code> nel campo “Allegati” della scheda Email. Per approfondire le configurazioni avanzate del file upload, consulta la guida ai form avanzati<\/a>.<\/p>\n
Tag date \u2014 Selettore Data<\/h2>\n
Il tag date<\/code> crea un campo per la selezione di una data con il datepicker nativo del browser.<\/p>\n
Sintassi:<\/strong><\/p>\n
[date your-date min:2024-01-01 max:2025-12-31]\n[date* your-date placeholder \"gg\/mm\/aaaa\"]<\/code><\/pre>\n
Le opzioni min<\/code> e max<\/code> limitano la intervallo di date selezionabili. Il formato della data dipende dalle impostazioni del browser del visitatore. Questo tag e utile per moduli di prenotazione, richieste di appuntamento o qualsiasi situazione in cui sia necessario raccogliere una data specifica.<\/p>\n
Tag number \u2014 Campo Numerico<\/h2>\n
Il tag number<\/code> crea un campo per la inserzione di valori numerici.<\/p>\n
Sintassi:<\/strong><\/p>\n
[number your-quantity min:1 max:100 step:1 placeholder \"Quantita\"]<\/code><\/pre>\n
Le opzioni min<\/code> e max<\/code> definiscono la intervallo di valori accettati, mentre step<\/code> definisce la incremento. Il browser mostra frecce per incrementare e decrementare il valore. Su dispositivi mobili, viene mostrata la tastiera numerica.<\/p>\n
Tag range \u2014 Cursore a Scorrimento<\/h2>\n
Il tag range<\/code> crea un cursore (slider) per la selezione di un valore numerico in modo visuale.<\/p>\n
Sintassi:<\/strong><\/p>\n
[range your-budget min:500 max:50000 step:500]<\/code><\/pre>\n
Questo tag e particolarmente efficace per la selezione di budget, valutazioni o qualsiasi valore numerico che si presta a una selezione visuale. Il visitatore trascina il cursore lungo una barra per selezionare il valore desiderato.<\/p>\n
Tag quiz \u2014 Domanda Anti-Spam<\/h2>\n
Il tag quiz<\/code> crea una semplice domanda a cui il visitatore deve rispondere correttamente per poter inviare il modulo.<\/p>\n
Sintassi:<\/strong><\/p>\n
[quiz your-quiz \"Quanto fa 3+4?|7\" \"Di che colore e il cielo?|blu\" \"Capitale della Italia?|Roma\"]<\/code><\/pre>\n
La sintassi utilizza il separatore pipe per dividere la domanda dalla risposta corretta. Se inserisci piu domande, Contact Form 7 ne selezionera una in modo casuale ad ogni caricamento della pagina. Questo tag rappresenta un metodo antispam semplice ma efficace, approfondito nella guida alla protezione spam<\/a>.<\/p>\n
Tag hidden \u2014 Campo Nascosto<\/h2>\n
Il tag hidden<\/code> crea un campo invisibile al visitatore ma che viene inviato con il modulo.<\/p>\n
Sintassi:<\/strong><\/p>\n
[hidden your-page default:get]\n[hidden campaign-id \"primavera2024\"]<\/code><\/pre>\n
I campi nascosti sono estremamente utili per il tracciamento. Con default:get<\/code>, il campo viene precompilato con il parametro corrispondente dalla URL. Ad esempio, se la URL e tuosito.it\/contatti\/?your-page=homepage<\/code>, il campo nascosto avra il valore “homepage”. Questo e perfetto per tracciare la provenienza delle richieste o i parametri UTM delle campagne pubblicitarie.<\/p>\n
Tag submit \u2014 Pulsante di Invio<\/h2>\n
Il tag submit<\/code> crea il pulsante per la sottomissione del modulo.<\/p>\n
Sintassi:<\/strong><\/p>\n
[submit \"Invia Messaggio\"]\n[submit class:btn-primary id:submit-btn \"Richiedi Preventivo Gratuito\"]<\/code><\/pre>\n
Puoi personalizzare il testo del pulsante e aggiungere classi CSS per lo styling. Un testo orientato alla azione come “Richiedi Preventivo Gratuito” o “Prenota la tua Consulenza” tende a generare piu conversioni rispetto a un generico “Invia”.<\/p>\n
Opzioni Comuni a Tutti i Tag<\/h2>\n
Diverse opzioni sono condivise tra tutti i tipi di tag e possono essere combinate liberamente:<\/p>\n