Introduzione ai Tag di Contact Form 7
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.
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"]. 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.
Tag text e text* — Campo di Testo
Il tag text crea un campo di input testuale su una singola riga. E il tag piu versatile e utilizzato nei moduli di contatto.
Sintassi base:
[text your-name]
[text* your-name] (obbligatorio)Con opzioni avanzate:
[text* your-name minlength:2 maxlength:50 placeholder "Il tuo nome completo" class:campo-nome id:nome]Le opzioni disponibili includono: minlength e maxlength per limitare la lunghezza del testo, placeholder per mostrare un testo guida, class e id per aggiungere attributi CSS, e default:get 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.
Tag email e email* — Campo Email
Il tag email crea un campo specifico per gli indirizzi email con validazione automatica del formato.
Sintassi:
[email* your-email placeholder "nome@esempio.it"]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] nel campo Reply-To per poter rispondere direttamente.
Tag url — Campo URL
Il tag url e pensato per raccogliere indirizzi web e include la validazione del formato URL.
Sintassi:
[url your-website placeholder "https://www.esempio.it"]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. La validazione verifica che il valore inserito abbia il formato di un URL valido.
Tag tel — Campo Telefono
Il tag tel crea un campo ottimizzato per i numeri di telefono.
Sintassi:
[tel your-phone placeholder "+39 333 1234567"]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.
Tag textarea — Area di Testo
Il tag textarea crea un campo di testo multi-riga, ideale per messaggi lunghi.
Sintassi:
[textarea your-message]
[textarea* your-message 40x10 placeholder "Scrivi qui il tuo messaggio..."]I parametri 40x10 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 e maxlength per controllare la lunghezza del testo. Ad esempio, [textarea* your-message minlength:20 maxlength:2000] richiede almeno 20 caratteri e ne accetta al massimo 2000.
Tag select — Menu a Tendina
Il tag select crea un menu a tendina (dropdown) con opzioni predefinite.
Sintassi:
[select your-service "Web Design" "SEO" "Social Media" "Consulenza"]
[select* your-service include_blank "Web Design" "SEO" "Social Media" "Consulenza"]La opzione include_blank 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: [select* your-services multiple "Web Design" "SEO" "Social Media"]. Nella email, le selezioni multiple vengono separate da virgole.
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"]. In questo caso il visitatore vede “Vendite” ma il valore inviato nella email sara “sales”.
Tag checkbox — Caselle di Controllo
Il tag checkbox crea un gruppo di caselle di controllo che permettono selezioni multiple.
Sintassi:
[checkbox your-interests "WordPress" "SEO" "E-commerce" "App Mobile"]
[checkbox* your-interests use_label_element exclusive "Opzione A" "Opzione B" "Opzione C"]La opzione use_label_element rende cliccabile il testo accanto alla casella (non solo il quadratino), migliorando la usabilita. La opzione exclusive trasforma le checkbox in un comportamento simile ai radio button, permettendo una sola selezione. Per preselezionare una opzione, utilizza default:1 (il numero indica la posizione della opzione, partendo da 1).
Tag radio — Pulsanti Radio
Il tag radio crea un gruppo di pulsanti radio per la selezione singola.
Sintassi:
[radio your-budget default:1 "Meno di 1000 euro" "1000-5000 euro" "5000-10000 euro" "Oltre 10000 euro"]A differenza delle checkbox, i radio button permettono sempre e solo una selezione. La opzione default:1 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.
Tag acceptance — Casella di Accettazione
Il tag acceptance crea una casella di accettazione, tipicamente utilizzata per il consenso alla privacy policy (GDPR).
Sintassi:
[acceptance your-consent] Accetto il trattamento dei dati personali secondo la <a href="/privacy-policy/">Privacy Policy</a> [/acceptance]Quando la casella non e selezionata, il pulsante di invio viene disabilitato automaticamente. Puoi invertire questo comportamento con la opzione invert. La opzione optional 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.
Tag file — Caricamento File
Il tag file permette ai visitatori di allegare file al modulo.
Sintassi:
[file your-file limit:5mb filetypes:pdf|doc|docx|jpg|png]La opzione limit imposta la dimensione massima del file (in bytes, kb o mb). La opzione filetypes limita i tipi di file accettati, separati dal simbolo pipe. Per allegare il file alla email di notifica, aggiungi [your-file] nel campo “Allegati” della scheda Email. Per approfondire le configurazioni avanzate del file upload, consulta la guida ai form avanzati.
Tag date — Selettore Data
Il tag date crea un campo per la selezione di una data con il datepicker nativo del browser.
Sintassi:
[date your-date min:2024-01-01 max:2025-12-31]
[date* your-date placeholder "gg/mm/aaaa"]Le opzioni min e max 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.
Tag number — Campo Numerico
Il tag number crea un campo per la inserzione di valori numerici.
Sintassi:
[number your-quantity min:1 max:100 step:1 placeholder "Quantita"]Le opzioni min e max definiscono la intervallo di valori accettati, mentre step definisce la incremento. Il browser mostra frecce per incrementare e decrementare il valore. Su dispositivi mobili, viene mostrata la tastiera numerica.
Tag range — Cursore a Scorrimento
Il tag range crea un cursore (slider) per la selezione di un valore numerico in modo visuale.
Sintassi:
[range your-budget min:500 max:50000 step:500]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.
Tag quiz — Domanda Anti-Spam
Il tag quiz crea una semplice domanda a cui il visitatore deve rispondere correttamente per poter inviare il modulo.
Sintassi:
[quiz your-quiz "Quanto fa 3+4?|7" "Di che colore e il cielo?|blu" "Capitale della Italia?|Roma"]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.
Tag hidden — Campo Nascosto
Il tag hidden crea un campo invisibile al visitatore ma che viene inviato con il modulo.
Sintassi:
[hidden your-page default:get]
[hidden campaign-id "primavera2024"]I campi nascosti sono estremamente utili per il tracciamento. Con default:get, il campo viene precompilato con il parametro corrispondente dalla URL. Ad esempio, se la URL e tuosito.it/contatti/?your-page=homepage, il campo nascosto avra il valore “homepage”. Questo e perfetto per tracciare la provenienza delle richieste o i parametri UTM delle campagne pubblicitarie.
Tag submit — Pulsante di Invio
Il tag submit crea il pulsante per la sottomissione del modulo.
Sintassi:
[submit "Invia Messaggio"]
[submit class:btn-primary id:submit-btn "Richiedi Preventivo Gratuito"]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”.
Opzioni Comuni a Tutti i Tag
Diverse opzioni sono condivise tra tutti i tipi di tag e possono essere combinate liberamente:
id:valore— aggiunge un attributo id al campo HTMLclass:valore— aggiunge una classe CSS (puo essere ripetuto per piu classi)placeholder "testo"— mostra un testo guida nel campo vuotodefault:valore— imposta un valore predefinitodefault:get— precompila il campo dal parametro URL corrispondenteautocomplete:off— disabilita il completamento automatico del browserreadonly— rende il campo di sola letturatabindex:N— imposta la ordine di tabulazione
Guide Correlate della Serie Contact Form 7
- Come Installare e Configurare Contact Form 7 su WordPress
- Creare un Form di Contatto Perfetto Passo Passo
- Tutti i Tag e Campi — Guida Completa
- Configurare Email, Notifiche e SMTP
- Validazione Campi, Messaggi di Errore e Conferma
- Protezione Spam con reCAPTCHA, Honeypot e Quiz
- Form Avanzati — Condizionali, Multi-Step e File Upload
- Integrazioni con Mailchimp, CRM e Zapier
- Personalizzare lo Stile con CSS — Guida Design
- Email Non Arrivano? Problemi Comuni e Soluzioni
Se desideri assistenza nella creazione di moduli personalizzati per il tuo progetto web, il team di G Tech Group e pronto ad aiutarti. Contattaci per una consulenza dedicata.