Oltre il Modulo di Contatto Base: Funzionalita Avanzate
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.
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.
Campi Condizionali con Conditional Fields
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.
Installazione del Plugin
Installa il plugin Conditional Fields for Contact Form 7 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.
Creare Gruppi Condizionali
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:
<label>Tipo di contatto
[select your-type "Privato" "Azienda" "Ente pubblico"]</label>
[group azienda]
<label>Ragione Sociale
[text* company-name]</label>
<label>Partita IVA
[text* vat-number]</label>
<label>Settore
[select company-sector "Tecnologia" "Commercio" "Servizi" "Manifattura" "Altro"]</label>
[/group]
[group ente]
<label>Nome Ente
[text* ente-name]</label>
<label>Codice CIG/CUP
[text cig-cup]</label>
[/group]Dopo aver inserito i gruppi nel template, clicca sulla scheda Conditional Fields (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”.
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.
Moduli Multi-Step: Dividere in Piu Passaggi
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.
Installazione del Plugin Multi-Step
Installa il plugin Contact Form 7 Multi-Step Forms dalla bacheca di WordPress. Questo plugin permette di creare una sequenza di moduli CF7 che funzionano come passaggi di un unico processo.
Configurazione dei Passaggi
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.
Passaggio 1 — Dati Personali:
<label>Nome [text* your-name]</label>
<label>Email [email* your-email]</label>
<label>Telefono [tel your-phone]</label>
[previous "Indietro"][next "Avanti"]Passaggio 2 — Dettagli Richiesta:
<label>Servizio richiesto
[select* your-service "Web Design" "SEO" "Social Media" "App Mobile"]</label>
<label>Budget indicativo
[select your-budget "Meno di 1.000 euro" "1.000 - 5.000 euro" "5.000 - 10.000 euro" "Oltre 10.000 euro"]</label>
[previous "Indietro"][next "Avanti"]Passaggio 3 — Messaggio e Invio:
<label>Descrivi il tuo progetto
[textarea* your-message]</label>
<label>Allega documenti [file your-file limit:10mb filetypes:pdf|doc|docx]</label>
[acceptance your-consent] Accetto la privacy policy [/acceptance]
[previous "Indietro"][submit "Invia Richiesta"]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.
File Upload: Configurazione Avanzata
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], ma richiede una configurazione attenta per funzionare in modo sicuro e affidabile.
Configurazione del Tag File
[file your-document limit:10mb filetypes:pdf|doc|docx|xls|xlsx|jpg|png]I parametri principali sono:
limit— dimensione massima del file. Puoi specificare in bytes, kb o mb. Il valore massimo dipende dalle impostazioni PHP del tuo server (upload_max_filesizeepost_max_size)filetypes— tipi di file accettati, separati dal simbolo pipe. Per sicurezza, non accettare mai file eseguibili (.exe, .php, .js) o archivi compressi (.zip, .rar) a meno che non sia strettamente necessario
Allegare il File alla Email
Per ricevere il file allegato nella email di notifica, aggiungi il nome del campo nel campo Allegati della scheda Email:
[your-document]Se non aggiungi il mail-tag nel campo Allegati, il file verra caricato sul server ma non verra allegato alla email. I file caricati vengono salvati temporaneamente nella cartella wp-content/uploads/wpcf7_uploads/ e vengono eliminati automaticamente dopo la invio della email.
Upload Multiplo
Per permettere il caricamento di piu file, aggiungi semplicemente piu tag file al modulo:
[file your-file-1 limit:5mb filetypes:pdf|jpg|png]
[file your-file-2 limit:5mb filetypes:pdf|jpg|png]
[file your-file-3 limit:5mb filetypes:pdf|jpg|png]E aggiungi tutti i mail-tag nel campo Allegati della email, uno per riga.
Menu a Tendina Dinamici
In alcuni casi potresti aver bisogno di menu a tendina il cui contenuto cambia dinamicamente, ad esempio caricando le opzioni dal database o da una fonte esterna. Il plugin Contact Form 7 — Dynamic Text Extension ti permette di creare campi il cui valore predefinito viene generato dinamicamente tramite shortcode di WordPress.
[dynamicselect your-products "CF7_get_products"]Dove CF7_get_products e uno shortcode personalizzato che restituisce le opzioni del menu. Questa tecnica e utile per moduli collegati a cataloghi prodotti, listini prezzi o qualsiasi dato che cambia frequentemente.
Checkbox di Accettazione per il GDPR
La conformita al GDPR (Regolamento Generale sulla Protezione dei Dati) richiede che il visitatore acconsenta esplicitamente al trattamento dei propri dati personali prima di inviare un modulo. Contact Form 7 offre il tag [acceptance] specificamente per questo scopo:
[acceptance your-consent] Ho letto e accetto la <a href="/privacy-policy/" target="_blank">Privacy Policy</a> e acconsento al trattamento dei miei dati personali ai sensi del Regolamento UE 2016/679 (GDPR). [/acceptance]Quando la casella di accettazione non e selezionata, il pulsante di invio rimane disabilitato. Puoi aggiungere piu caselle di accettazione per consensi diversi (ad esempio, una per la privacy e una per la newsletter):
[acceptance consent-privacy] Acconsento al trattamento dei dati per rispondere alla mia richiesta (obbligatorio). [/acceptance]
[acceptance consent-newsletter optional] Desidero ricevere aggiornamenti e offerte via email (facoltativo). [/acceptance]La opzione optional rende la casella facoltativa, non bloccando la invio del modulo se non selezionata. Il valore della casella (selezionata o meno) viene inviato nella email tramite il mail-tag corrispondente, permettendoti di sapere quali consensi sono stati dati.
Campi Nascosti per il Tracciamento UTM
I campi nascosti sono strumenti preziosi per il tracciamento delle campagne di marketing. Puoi catturare automaticamente i parametri UTM dalla URL e includerli nella email di notifica:
[hidden utm_source default:get]
[hidden utm_medium default:get]
[hidden utm_campaign default:get]
[hidden utm_content default:get]
[hidden landing_page default:shortcode_attr]Con questa configurazione, se un visitatore arriva al tuo sito tramite una campagna Google Ads con la URL tuosito.it/contatti/?utm_source=google&utm_medium=cpc&utm_campaign=primavera2024, questi parametri verranno automaticamente inclusi nella email di notifica. Puoi poi utilizzare questi dati nella scheda Email:
--- Tracciamento Campagna ---
Fonte: [utm_source]
Mezzo: [utm_medium]
Campagna: [utm_campaign]
Contenuto: [utm_content]
Pagina di atterraggio: [landing_page]Queste informazioni sono fondamentali per misurare il ROI delle campagne pubblicitarie e capire da quale canale provengono le richieste piu qualificate. Per una integrazione ancora piu avanzata con strumenti di marketing, consulta la guida alle integrazioni con CRM e Zapier.
Pipeline e Valori Personalizzati
La tecnica delle pipeline ti permette di mostrare un testo diverso al visitatore rispetto al valore che viene inviato via email. Questo e utile per menu a tendina dove desideri valori interni diversi da quelli visualizzati:
[select your-priority "Bassa (risposta entro 5 giorni)|low" "Media (risposta entro 48 ore)|medium" "Alta (risposta entro 24 ore)|high" "Urgente (risposta entro 4 ore)|urgent"]Il visitatore vede le descrizioni complete, ma nella email riceverai i codici brevi (low, medium, high, urgent), facilitando la categorizzazione automatica delle richieste nel tuo sistema di gestione.
Redirect Dopo la Invio del Modulo
In alcuni casi potresti voler reindirizzare il visitatore a una pagina di ringraziamento dedicata dopo la invio del modulo. Questo e utile per il tracciamento delle conversioni (Google Ads, Facebook Pixel) e per offrire contenuti aggiuntivi. Aggiungi il seguente codice nella scheda Impostazioni Aggiuntive del modulo:
on_sent_ok: "window.location = "/grazie/";"Nota: questa funzionalita e stata deprecata nelle versioni recenti di CF7. La alternativa consigliata e utilizzare il evento JavaScript DOM wpcf7mailsent nel tuo tema o in un plugin personalizzato.
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
Per la creazione di moduli avanzati e personalizzati, il team di G Tech Group offre soluzioni su misura per ogni esigenza. Contattaci per discutere il tuo progetto.