Moduli di contatto che vengono compilati davvero sul sito della Sua azienda
Come progettare moduli di contatto che vengono compilati: pochi campi, etichette visibili, errori chiari, accessibilità e richieste che arrivano a destinazione.
- Nº
- 21
- Pubblicato
- Lettura
- 13 min
- Categoria
- Notes
- Scritto da
- Revylio
Moduli di contatto che vengono compilati: brevi, accessibili, chiari e collegati
I moduli di contatto che vengono compilati hanno quattro caratteristiche. Chiedono pochi dati e si usano con tastiera e screen reader. Spiegano con chiarezza informativa ed errori e, dopo l'invio, portano la richiesta dove qualcuno la legge. Se manca una delle quattro, il visitatore abbandona oppure la richiesta si perde.
Un modulo di contatto è l'insieme di campi che il visitatore compila su una pagina del sito. Serve a inviare all'azienda una domanda o una richiesta di preventivo. Il W3C ricorda che i moduli sono il modo più comune di interagire con un sito: accesso, registrazione, commenti, acquisti. Per un'azienda che vende servizi, il modulo è spesso l'unico punto in cui un visitatore anonimo diventa un contatto con nome ed e-mail.
Il margine di miglioramento è ampio. La guida di Framework360 sulla creazione dei moduli di contatto afferma che un form efficiente può aumentare le conversioni di oltre il 100%. Per conversioni qui si intende il numero di compilazioni. La stessa fonte osserva che spesso bastano piccole modifiche per ottenere più richieste.
Il tempo a disposizione è poco. Secondo Framework360, il visitatore arriva al modulo perché attratto da un'offerta o da un prodotto. La permanenza su un sito, aggiunge la fonte, è di solito molto breve. Ogni campo superfluo, ogni errore poco chiaro e ogni ostacolo tecnico consuma quel tempo. Le sezioni che seguono affrontano i quattro requisiti uno per uno, con un esempio guidato su WordPress e una checklist finale.
Pochi campi: chiedere solo i dati necessari per rispondere
Il numero di campi è la prima causa di abbandono di un modulo di contatto. Il W3C, nel suo tutorial sui moduli accessibili, osserva che gli utenti preferiscono moduli semplici e brevi. Se il modulo chiede dati irrilevanti o eccessivi, la probabilità che venga abbandonato cresce.
Framework360 riassume la regola in tre aggettivi: i campi devono essere pochi, istantanei e adeguati. Istantaneo significa che il visitatore conosce la risposta senza cercarla. Adeguato significa che il dato serve davvero a chi risponderà.
Quali campi tenere
Un buon punto di partenza è la configurazione predefinita del modulo di Jetpack, il plugin gratuito per WordPress, che secondo la guida di Akismet ai moduli di contatto su WordPress prevede tre campi:
- Nome, per rivolgersi alla persona.
- E-mail, che Framework360 considera fondamentale perché garantisce le conversazioni successive.
- Messaggio, per descrivere la richiesta con parole proprie.
Ogni campo aggiunto a questi tre deve giustificarsi. Il numero di telefono è il caso tipico. Framework360 avverte che il visitatore può percepirlo come un'informazione riservata da non rilasciare. Se il telefono serve, conviene renderlo facoltativo.
Quando il modulo deve restare lungo
Una richiesta di preventivo complessa può richiedere più dati. In quel caso il W3C raccomanda di dividere il modulo lungo in più moduli brevi, organizzati in passaggi logici, e di informare l'utente sui progressi. Il visitatore vede pochi campi alla volta e sa quanto manca alla fine.
Etichette visibili e campi raggruppati per tastiera e screen reader
Ogni campo del modulo di contatto ha bisogno di un'etichetta visibile e collegata al campo stesso. Il W3C indica di usare l'elemento <label> per identificare ogni controllo del modulo. Solo in casi specifici si ricorre ad altri meccanismi, come WAI-ARIA o l'attributo title. WAI-ARIA è un insieme di attributi che descrive ai software di assistenza il ruolo degli elementi di una pagina.
Il testo segnaposto scritto dentro il campo non sostituisce l'etichetta. Scompare appena il visitatore inizia a scrivere, e con lui scompare l'indicazione di cosa inserire.
Chi beneficia di etichette corrette
Il tutorial del W3C elenca tre gruppi di persone che dipendono da etichette ben costruite:
- Chi usa uno screen reader identifica e comprende i campi perché sono associati a etichette, gruppi e altri elementi strutturali.
- Chi usa l'input vocale pronuncia l'etichetta per attivare un controllo e spostare il cursore sul campo da compilare.
- Chi ha una destrezza limitata trae vantaggio da aree cliccabili ampie che includono l'etichetta, soprattutto per pulsanti di opzione e caselle di controllo.
Raggruppare i campi correlati
I campi che rispondono alla stessa domanda vanno raggruppati. Il W3C indica gli elementi <fieldset> e <legend> per associare controlli correlati, per esempio i pulsanti di opzione che chiedono il tipo di servizio desiderato. Lo screen reader legge allora la domanda insieme a ogni risposta.
Il W3C conclude che i moduli accessibili sono più facili da usare per tutti, comprese le persone con disabilità. Gli obblighi di legge collegati all'accessibilità sono trattati nella guida su chi è obbligato dopo l'European Accessibility Act e cosa verificare per primo.
Messaggi di errore e validazione che aiutano a correggere il modulo
La validazione è il controllo che verifica se i dati inseriti nel modulo sono completi e nel formato giusto. Un controllo ben progettato aiuta il visitatore a correggere l'errore. Uno mal progettato lo fa rinunciare.
Il corso Learn Forms di web.dev dedica un capitolo alla validazione lato frontend, cioè nel browser, prima dell'invio. Lo scopo dichiarato è aiutare gli utenti a inserire i dati giusti. Il corso tratta anche gli attributi dei campi che attivano la validazione integrata del browser e che cambiano la tastiera mostrata sullo smartphone.
Come funziona il controllo in un plugin comune
Contact Form 7, uno dei plugin di moduli più diffusi su WordPress, controlla tutti i campi al momento dell'invio. Secondo la videoguida di Go WordPress, se i contenuti sono corretti il plugin invia le informazioni via e-mail. Altrimenti avverte l'utente di correggere l'errore. Nello stesso plugin, l'asterisco nella definizione del campo lo rende obbligatorio.
Il messaggio di errore deve dire quale campo correggere e come. Un avviso generico in cima al modulo costringe il visitatore a cercare il problema, e con uno screen reader questa ricerca diventa lunga.
Ridurre gli errori prima che accadano
- Il completamento automatico: web.dev dedica un capitolo all'attributo
autocomplete, che permette al browser di proporre nome ed e-mail già salvati. - Nessun limite di tempo: il W3C chiede di evitarlo quando possibile. Se serve, per esempio per sicurezza, l'utente deve poterlo disattivare o estendere.
- Formati locali: web.dev raccomanda di prevedere i formati di dati internazionali e di pianificare il modulo per la localizzazione.
Protezione dallo spam senza CAPTCHA che fanno abbandonare il modulo
Ogni modulo di contatto pubblico riceve spam, e la difesa scelta può costare richieste vere. Un CAPTCHA è una verifica che aggiunge passaggi extra, come risolvere un quesito matematico o rispondere a una domanda, per impedire a spammer e bot di completare il modulo. La guida di Akismet riporta che, secondo Moz, i CAPTCHA possono abbassare notevolmente le conversioni.
Il CAPTCHA è anche un ostacolo di accessibilità. Un quesito visivo o una domanda di cultura generale rallenta chiunque, e alcune persone non riescono a superarlo. Contact Form 7, per esempio, offre un campo Quiz, matematico o di cultura generale, e un campo reCAPTCHA, lo strumento di verifica di Google che di solito chiede di spuntare "Non sono un robot".
Il filtro che lavora dietro le quinte
L'alternativa è un filtro che analizza i messaggi senza chiedere nulla al visitatore. Akismet Anti-Spam è sviluppato da Automattic, il team di WordPress.com. Per usarlo serve una chiave API. La chiave è gratuita per i blog personali, mentre un sito commerciale o aziendale richiede un abbonamento a pagamento. Akismet è incluso anche in alcuni piani Jetpack, come Jetpack Security, Jetpack Complete e Jetpack Starter.
La scelta pratica è semplice. Prima si attiva un filtro che non disturba il visitatore. Solo se lo spam resta ingestibile si valuta una verifica visibile, sapendo che avrà un costo in compilazioni.
Dopo l'invio: pagina di ringraziamento e richiesta che arriva a destinazione
Un modulo di contatto che viene compilato serve solo se la richiesta arriva a chi deve rispondere. Il punto più fragile del modulo non è la pagina, ma ciò che succede dopo il clic su Invia.
Pagina di ringraziamento invece del popup
Framework360 considera una pagina di ringraziamento dopo l'invio molto migliore di un popup di conferma. Il motivo è la misurazione: la pagina si può tracciare per esaminare le conversioni e capire cosa ha portato l'utente a scrivere. Il metodo per collegare queste conversioni ai clienti reali è descritto nella guida per misurare cosa porta il sito aziendale in richieste e clienti.
Dove finisce la richiesta
Su WordPress una richiesta inviata dal modulo arriva, secondo Wpmet, a un indirizzo e-mail indicato oppure all'elenco delle voci nella bacheca. Il dettaglio cambia da plugin a plugin:
- Contact Form 7 non memorizza i messaggi inviati, a meno di aggiungere il plugin Flamingo.
- MetForm salva gli invii nel proprio database delle voci, se l'opzione è attiva nelle impostazioni generali.
- MetForm può inviare i dati a sistemi esterni come Google Sheet, Mailchimp, Zapier e Slack, a CRM abilitati dalla scheda CRM e ad API di terze parti tramite REST API.
Collegare il modulo al CRM che l'azienda già usa evita che una richiesta resti in una casella e-mail senza responsabile. In Svennis, quando rivediamo un sito, inviamo una richiesta di prova da ogni modulo e seguiamo il percorso fino alla destinazione: capita che il messaggio parta senza errori ma arrivi a una casella che nessuno controlla più.
Esempio guidato: un modulo preventivo accessibile con Contact Form 7 su WordPress
Questo esempio costruisce un modulo di richiesta preventivo con Contact Form 7 su un sito WordPress. I passaggi seguono la videoguida di Go WordPress su Contact Form 7, con le correzioni di accessibilità indicate dal W3C.
- Installare il plugin dal menu Plugin, voce Aggiungi Nuovo, cercando "Contact Form 7". Dopo l'installazione compare nel menu a sinistra la voce "Contatti".
- Creare un nuovo modulo e dargli un nome interno, per esempio "Preventivo servizi". Il nome non è visibile al pubblico.
- Inserire tre campi obbligatori, Nome, E-mail e Messaggio, segnandoli con l'asterisco. Aggiungere il telefono come campo facoltativo.
- Se serve indicare il tipo di servizio, usare pulsanti di opzione, dove l'utente sceglie una sola voce, raggruppati sotto una domanda comune.
- Inserire sotto il pulsante di invio un collegamento all'informativa privacy. Se si desidera anche il consenso al marketing, aggiungere con il campo Accettazione una casella separata, facoltativa e non spuntata, che non blocca l'invio.
- Installare Flamingo, così ogni messaggio resta salvato anche se l'e-mail di notifica non arriva.
- Impostare la pagina di ringraziamento e inviare una richiesta di prova.
Due trappole da evitare
La videoguida segnala che alcuni temi non supportano bene il tag <label> e suggerisce di sostituirlo con <p>. Questa scorciatoia rompe il legame tra etichetta e campo che il W3C richiede. La soluzione corretta è adattare lo stile del tema e mantenere <label>.
Il campo Data di Contact Form 7 supporta solo il formato aaaa-mm-gg. Se la data non è indispensabile, conviene chiederla nel messaggio libero.
Contact Form 7, Jetpack e MetForm a confronto per un sito WordPress
La scelta del plugin determina dove finiscono le richieste e come si filtra lo spam. Secondo la documentazione di Wpmet, un modulo di contatto si può creare con un plugin per WordPress, con un form builder online come Jotform da incorporare nel sito, oppure scrivendolo in HTML. La guida di Akismet precisa che la strada senza plugin richiede la conoscenza di CSS, HTML e PHP.
La tabella confronta i tre plugin citati nelle fonti di questa guida.
| Plugin | Costo e requisiti | Archivio delle richieste | Antispam e collegamenti |
|---|---|---|---|
| Contact Form 7 | Gratuito, installabile su un numero illimitato di siti | Nessuno, salvo aggiungere Flamingo | Campi reCAPTCHA e Quiz |
| Jetpack | Gratuito, installabile dalla bacheca di WordPress | Da verificare nella configurazione del sito | Akismet incluso in alcuni piani a pagamento |
| MetForm | Freemium, richiede il page builder Elementor | Database delle voci, se attivato | reCAPTCHA, integrazioni come Mailchimp, Google Sheet, Zapier, Slack e alcuni CRM |
Contact Form 7 si adatta a chi vuole un modulo semplice e gratuito, a patto di aggiungere un archivio. Jetpack offre un modulo pronto con i campi essenziali e supporta anche moduli di registrazione e di feedback. MetForm, secondo la documentazione di Wpmet per MetForm, propone tre stili di partenza e si inserisce in pagina con Elementor oppure con uno shortcode univoco per ogni modulo.
Nella sezione Avanzate di MetForm si controlla anche la resa su diversi dispositivi. Il dettaglio delle integrazioni è descritto nella guida di Wpmet ai moduli di contatto Elementor.
Cosa significa per un'azienda italiana con un modulo di contatto sul sito
Per un'azienda italiana, un modulo di contatto efficace deve funzionare prima di tutto su smartphone. La guida di Akismet riporta che oltre il 60% degli utenti usa un dispositivo mobile per andare online. Ogni campo in più pesa di più su uno schermo piccolo, e una pagina lenta fa perdere il visitatore prima ancora che veda il modulo. Il calcolo di questa perdita è spiegato nella guida su quanto costa un sito lento in richieste.
Il sito di un'azienda è un sito commerciale. Per Akismet significa che la chiave API gratuita non basta e serve un abbonamento a pagamento. Il costo va messo in conto quando si sceglie la protezione dallo spam.
Formati e abitudini locali
Le date in Italia si scrivono nel formato giorno, mese, anno. Un campo che accetta solo aaaa-mm-gg, come quello di Contact Form 7, obbliga il visitatore a un formato che non usa. Per questo web.dev raccomanda di pianificare il modulo per la localizzazione.
Anche il telefono merita attenzione. Molti visitatori preferiscono scrivere invece di chiamare, e Framework360 avverte che il numero può essere percepito come un dato riservato. Renderlo facoltativo lascia al visitatore la scelta del canale.
Per rispondere a una richiesta non serve il consenso: basta un'informativa privacy chiara, collegata vicino al pulsante di invio. Il consenso va chiesto solo per usi ulteriori, come la newsletter, con una casella facoltativa e non spuntata. Le regole di dettaglio sulla privacy rientrano nei controlli GDPR del sito e non cambiano i principi di progettazione descritti qui.
Checklist del modulo di contatto prima della pubblicazione
La checklist riassume i controlli che un modulo di contatto deve superare prima di andare online. Ogni riga indica come verificarla senza strumenti specialistici.
| Controllo | Come verificarlo | Riferimento |
|---|---|---|
| Numero di campi | Ogni campo serve a chi risponde; il telefono è facoltativo | W3C, Framework360 |
| Etichette | Ogni campo ha un'etichetta visibile collegata con <label> | W3C |
| Gruppi di opzioni | Pulsanti e caselle correlati stanno sotto <fieldset> e <legend> | W3C |
| Tastiera | Il modulo si compila e si invia usando solo il tasto Tab e Invio | W3C |
| Errori | Un invio con dati sbagliati indica quale campo correggere | web.dev, Contact Form 7 |
| Limite di tempo | Nessuno, oppure disattivabile o estendibile | W3C |
| Spam | Filtro attivo senza quesiti imposti al visitatore | Akismet |
| Informativa privacy | Vicino al pulsante di invio c'è un collegamento all'informativa, che indica chi è il titolare e come contattarlo, finalità e base giuridica, destinatari come il servizio antispam e il CRM, eventuali trasferimenti fuori dall'UE, per quanto tempo si conservano i messaggi e i diritti dell'interessato, compreso il reclamo all'autorità di controllo | GDPR, art. 13 |
| Dopo l'invio | Pagina di ringraziamento tracciata e richiesta archiviata | Framework360, Akismet, Wpmet |
| Dispositivi | Prova su smartphone, tablet e computer con browser diversi | web.dev |
Il tracciamento della pagina di ringraziamento ha una condizione. Se la pagina è tracciata con strumenti che richiedono il consenso, il tracciamento parte solo dopo il consenso dato nel banner.
Il controllo con la tastiera è il più rapido e il più rivelatore. Se il cursore salta un campo o non raggiunge il pulsante di invio, anche chi usa uno screen reader incontrerà lo stesso ostacolo.
Prossimi passi per migliorare il modulo di contatto del Suo sito
Il primo passo è compilare oggi stesso il modulo di contatto del Suo sito, da smartphone e con la sola tastiera. Annoti quanti campi chiede, quali errori mostra e dove arriva la richiesta. Questa prova da sola rivela la maggior parte dei problemi descritti in questa guida.
Il secondo passo è un test con persone reali. Il corso Learn Forms di web.dev dedica un capitolo ai test di usabilità, per verificare che il modulo funzioni bene per tutti gli utenti. Dedica un capitolo anche alla prova su dispositivi, browser e piattaforme diversi. Bastano pochi colleghi o clienti fidati, osservati mentre compilano senza aiuto.
Il terzo passo dipende da ciò che emerge dalle prove:
- Se i problemi riguardano solo il modulo, un intervento mirato su campi, etichette e destinazione delle richieste è sufficiente.
- Se il modulo è lento, inaccessibile e scollegato insieme al resto del sito, conviene valutare un progetto più ampio.
Per decidere tra le due strade è utile la guida su quando conviene il rifacimento del sito e quando basta un intervento mirato. Se la scelta è un nuovo sito, i requisiti dei moduli vanno messi per iscritto fin dall'inizio, come spiegato nella guida per scrivere il brief del rifacimento del sito.
Fonti
- web.dev, Learn Forms
- W3C WAI, Forms Tutorial
- Framework360, Come creare moduli di contatto
- Go WordPress, Crea moduli di contatto con Contact Form 7
- Akismet, Come aggiungere un modulo di contatto a WordPress
- Wpmet, Modulo di contatto Elementor con MetForm
- Wpmet, Come creare un modulo di contatto utilizzando MetForm