Moduli web che le persone inviano davvero

Un modulo è il punto in cui il visitatore smette di leggere e comincia ad agire: iscriversi al convegno, rinnovare l’adesione, chiedere un contributo, fare una domanda.

Tutti questi visitatori hanno già deciso di agire. Quando se ne vanno senza inviare, è stato il modulo a convincerli a lasciar perdere.

Questa guida copre le scelte che fanno la differenza, nell’ordine in cui il visitatore le incontra. Ogni sezione ha un esempio funzionante in cui può scrivere. Gli esempi girano nel suo browser e non inviano nulla, e ogni soluzione di questa guida funziona anche sui moduli di questo sito.

Perché ora è un’unica guida. È nata come una serie in otto parti. L’abbiamo riunita in una sola pagina con esempi dal vivo, perché di un modulo si impara di più compilandolo che leggendone.

È il primo dei nostri articoli a ricevere questo trattamento. Stiamo riprendendo tutto ciò che abbiamo pubblicato per renderlo più breve, più facile da scorrere e più pratico.

Vuole vedere prima gli errori? Le versioni sbagliate raccoglie moduli dal vivo che falliscono di proposito.

Ogni campo ha bisogno di un'etichetta visibile

Un’etichetta sta fuori dal campo e ci resta. Un placeholder sta dentro il campo e sparisce appena si scrive.

I moduli che usano i placeholder come etichette sembrano ordinati in un mockup, l’unico momento in cui qualcuno li vede vuoti. Una volta compilati, le domande non ci sono più:

• Chi vuole ricontrollare le risposte prima di inviare non ha nulla con cui confrontarle.
• Chi viene interrotto da una telefonata torna a caselle che non dicono più che cosa sono.
• La compilazione automatica riempie tutti i campi insieme, e il compito del visitatore diventa solo controllare. Provi nell’esempio qui sotto: le etichette restano, quindi basta un’occhiata.

I placeholder hanno ancora un compito: mostrare il formato di una risposta. L’etichetta chiede "Telefono" e il placeholder mostra (555) 012-3456. Quando l’esempio sparisce, al visitatore non serve più.

Per chi usa un lettore di schermo, un’etichetta collegata al suo campo nel codice viene letta quando il campo riceve il focus. La lettura di un placeholder dipende dal lettore di schermo, e il placeholder non è mai stato pensato come nome del campo.

Per gli enti e le istituzioni pubbliche, un’etichetta visibile è anche un requisito della norma di accessibilità a cui devono attenersi, e chi valuta le gare d’appalto lo controlla.

Non conti su uno strumento automatico per trovare questo problema. Le regole che usano la maggior parte degli strumenti accettano un placeholder come nome del campo, quindi un modulo con soli placeholder può superare la scansione. Lo abbiamo verificato: la versione sbagliata di questo modulo supera le stesse regole automatiche che segnalano il suo menu e il suo pulsante di invio.

Etichette mobili, costruite con cura

Un’etichetta mobile parte dentro il campo, dove starebbe un placeholder. Sale sopra il campo quando il visitatore ci entra o scrive una risposta.

Fa risparmiare una riga di altezza in un modulo lungo, e si può fare bene. Farla bene significa tre cose:

• È una vera etichetta collegata al campo, quindi viene letta come qualsiasi altra.
• Resta leggibile in entrambe le posizioni, con pieno contrasto, mai sbiadita al grigio di un placeholder.
• Si sposta prima che il testo del visitatore possa toccarla.

La maggior parte delle etichette mobili decide se spostarsi con una sola domanda: il campo è vuoto? Il solito trucco CSS controlla se il placeholder è visibile.

Quella domanda riceve la risposta sbagliata appena entra in gioco una maschera di input.

Quando una maschera di input riempie il campo

Una maschera di input formatta la risposta mentre si scrive: un numero di telefono diventa (703) 555-0142, una data diventa 10/11/2026.

Le maschere aiutano, finché i loro caratteri vengono scritti nel campo prima che qualcuno digiti. A quel punto il campo non è mai vuoto, e si rompono tre cose:

• Un’etichetta mobile vede (___) ___-____, decide che c’è una risposta e salta in alto al caricamento della pagina oppure resta sopra la maschera.
• La validazione del modulo vede del testo e può lasciar passare un numero di telefono vuoto.
• Un lettore di schermo legge ad alta voce i trattini bassi.

Come costruire una maschera che funziona:

• Conti le cifre, non i caratteri. Il campo è vuoto finché non contiene una cifra. La punteggiatura aggiunta dalla maschera non è mai una risposta.
• Mostri il modello solo quando il campo ha il focus, dietro il testo del visitatore e fuori dal valore. L’etichetta sale prima, quindi nulla si sovrappone.
• Accetti qualsiasi formato. Qualcuno incolla 703.555.0142 o lo scrive con gli spazi. Tenga le cifre e le formatti lei.
• Lasci il cursore dove l’ha messo il visitatore. Una maschera che sposta il cursore alla fine trasforma ogni correzione in una riscrittura.
• Lasci passare i numeri internazionali. Un + all’inizio deve disattivare la maschera statunitense. Una maschera troppo rigida è il motivo per cui chi vive all’estero non riesce a iscriversi.
• Salvi le cifre, non il testo formattato. Il dato registrato deve essere 7035550142, così la ricerca, l’eliminazione dei doppioni e il sistema successivo concordano su quale sia il numero.

Chieda la tastiera giusta

Su un telefono, il tipo del campo decide quale tastiera compare:

• Un campo email mette la @ nella prima schermata.
• Un campo telefono apre il tastierino numerico.
• Un campo di testo generico dà al visitatore la tastiera completa per tutto, e lui deve cercare tra le schermate dei simboli per scrivere un indirizzo.

<input type="email" autocomplete="email" autocapitalize="off" spellcheck="false">
<input type="tel" autocomplete="tel">
<input inputmode="numeric" autocomplete="postal-code">
<input inputmode="decimal">

Gli stessi attributi alimentano la compilazione automatica. Quando i campi dicono che cosa contengono (nome, email, organizzazione, CAP), il browser propone di compilarli, e la parte più lenta di un modulo su telefono diventa un tocco.

Le tastiere dei telefoni mettono anche la maiuscola alla prima lettera e correggono le parole che non conoscono. In un messaggio aiuta. In un indirizzo email o in un numero di riferimento cambia la risposta senza avvisare, quindi disattivi maiuscole automatiche e correzione nei campi che contengono identificativi.

Le dimensioni contano quanto la tastiera:

• Renda gli elementi toccabili alti almeno 44 pixel.
• Colleghi l’etichetta di ogni casella di spunta, così che si possa toccare anche il testo.
• Usi nei campi un testo di almeno 16 pixel. Sotto quella soglia, l’iPhone ingrandisce il campo e lascia la pagina ingrandita quando il visitatore ha finito di scrivere.

Errori che dicono come correggere la risposta

Quando un controllo fallisce, il modulo sa quale campo non va e quale regola non è rispettata. "Dati non validi" butta via questa informazione.

Un messaggio utile nomina il campo, dice che cosa non va e mostra una risposta corretta: "Inserisca un numero statunitense di 10 cifre con il prefisso, per esempio 555-012-3456."

Conta anche il momento. Un modulo che controlla a ogni tasto dichiara non valido un indirizzo email per tutto il tempo in cui lo si sta scrivendo. Controlli quando il visitatore lascia il campo, cioè quando la risposta dovrebbe essere finita.

Quando un campo è già segnato come sbagliato, lo controlli mentre si scrive, così il messaggio sparisce appena la risposta è corretta. Poi:

• Metta ogni messaggio accanto al suo campo, dove il visitatore sta già guardando.
• All’invio, elenchi tutti i problemi in alto con un link a ogni campo, e sposti il focus su quell’elenco.
• Non si affidi mai al solo colore. Un bordo rosso è invisibile per alcune persone daltoniche e per tutti i lettori di schermo. Le parole, un’icona e un bordo più spesso portano il messaggio.
• Colleghi il messaggio al campo nel codice, così viene letto quando il campo riceve il focus.
• Non svuoti mai un campo per un errore in un altro. Un refuso nel telefono non è un motivo per cancellare il messaggio.

Trovare i refusi nell'email senza bloccare nessuno

Qualcuno scrive gamil.com invece di gmail.com. L’indirizzo è formalmente corretto, quindi ogni validatore lo accetta.

La sua risposta, la ricevuta o la conferma di iscrizione non arrivano da nessuna parte. Dal punto di vista del visitatore, le ha scritto e lei non ha mai risposto.

Una piccola percentuale degli indirizzi scritti a mano contiene un refuso, e quelli comuni sono prevedibili. Quando il visitatore lascia il campo:

• Confronti l’indirizzo con un breve elenco di errori noti.
• Spieghi il suggerimento e offra la correzione con un tocco.
• Lasci al visitatore ciò che ha scritto. Gli indirizzi insoliti esistono, e l’ultima parola spetta sempre al visitatore.

Mostri ogni stato del pulsante di invio

Un pulsante di invio deve al visitatore quattro stati:

• A riposo invita a premere.
• In corso mostra che il clic è arrivato. Il pulsante cambia testo e si disattiva, così un secondo clic nervoso non invia il modulo due volte.
• Errore spiega che cosa è andato storto, vicino al pulsante, mentre ogni campo conserva ciò che il visitatore ha scritto.
• Fatto sostituisce il modulo con una conferma che dice che cosa è stato ricevuto e che cosa succede dopo. I lettori di schermo la leggono, oltre a mostrarla.

Dedichi la cura maggiore all’errore. Se il modulo conserva le parole del visitatore, una connessione caduta costa un clic in più. Se le perde, pochissime persone riscrivono a memoria un messaggio lungo. Attivi l’errore simulato qui sopra e prema invia.

Costruisca un vero modulo sotto lo script. Se lo script non si carica sulla rete rigida di un ufficio, il modulo deve inviarsi nel modo tradizionale e mostrare una semplice pagina di conferma.

Quando una richiesta va in timeout, dica che l’esito non è noto. Mostrare un successo che non le risulta porta a scusarsi per messaggi mai arrivati.

Divida i moduli lunghi in passaggi

Una domanda di contributo o un’iscrizione a un evento può arrivare a trenta domande. Su una sola pagina, la barra di scorrimento dice al visitatore quanto lavoro lo aspetta prima ancora di cominciare.

Diviso in passaggi, lo stesso modulo chiede pochi minuti alla volta. Che cosa fa funzionare i passaggi:

• Un solo argomento per passaggio.
• Un indicatore di avanzamento che dice il vero: "Passaggio 2 di 3", mai una barra che salta dal 20 al 90 per cento.
• Controlli ogni passaggio prima di proseguire, così i problemi emergono mentre le domande sono fresche.
• Tornare indietro non fa perdere nulla. Chi torna a correggere una data ritrova tutte le risposte successive dove le aveva lasciate.
• Finisca con una schermata di riepilogo che mostri ogni risposta con un modo per modificarla, prima dell’invio finale.
• Sposti il focus sul titolo del nuovo passaggio, così chi usa un lettore di schermo sente dove si trova.
• Invio fa avanzare di un passaggio. Non deve mai inviare un modulo compilato a metà.

Salvi le risposte perché le persone possano tornare

Poche persone finiscono un modulo lungo in una volta sola. Serve una cifra dall’amministrazione, una lettera di referenze, il via libera di un collega. Un modulo che dimentica tutto alla chiusura della scheda le costringe a ricominciare, e molte non lo faranno.

Ci sono due modi per salvare le risposte. Qualunque scelga, lo dica alle persone: "Salvato su questo dispositivo" accanto al modulo basta.

Per un modulo breve o anonimo, conservi le risposte nel browser del visitatore mentre scrive, come fa l’esempio in più passaggi qui sopra. Ricarichi questa pagina e le sue risposte tornano.

• Nulla lascia il dispositivo, e non serve un account.
• Un pulsante "Cancella le mie risposte" permette di eliminarle a chi usa un computer condiviso.
• Non salvi mai nel browser password, dati di pagamento o informazioni sensibili.

Per una candidatura lunga, salvi le bozze sul server e invii al visitatore un link per riprendere. Protegga quel link:

• Lo mandi solo all’indirizzo inserito nel modulo.
• Lo faccia scadere.
• Limiti quante richieste può fare lo stesso visitatore. Altrimenti la casella per riprendere diventa un modo per mandare le sue email a sconosciuti.

Sfondi scuri: avvisi il browser

Il suo CSS dà stile alla casella, al bordo e al testo di un campo. Il browser e il sistema operativo disegnano il resto: la freccia di un menu, l’elenco che si apre sotto, il calendario di un campo data, il segno di spunta di una casella.

Danno per scontato che la pagina sia chiara, a meno che lei non dica il contrario. In un piè di pagina scuro con l’iscrizione alla newsletter, può voler dire una freccia grigio scuro su un menu quasi nero, che sembra un semplice rettangolo.

Una sola dichiarazione CSS risolve. Imposti color-scheme su dark nell’area scura e il browser ridisegna la sua parte di ogni controllo per adeguarla.

.site-footer {
  background: #11141a;
  color-scheme: dark;
}

Poi controlli ciò che color-scheme non copre, possibilmente su un sistema operativo che il suo team non usa, in modalità chiara e scura:

• La compilazione automatica colora i campi compilati di giallo o azzurro pallido, e il testo bianco diventa illeggibile.
• Il grigio dei placeholder è scelto per gli sfondi bianchi.
• Un contorno di focus evidente sul bianco può sparire sul nero.

Fermi lo spam senza rompicapi

Un CAPTCHA trasforma il suo problema di spam in un compito per il visitatore. Pesa di più su chi ha una vista ridotta, mani lente o un lettore di schermo.

Quasi tutto lo spam nei moduli è automatico e distratto, quindi tre controlli che il visitatore non vede mai ne fermano quasi tutto:

• Un honeypot: un campo in più, nascosto alle persone e ai lettori di schermo. I bot compilano ogni campo, quindi un honeypot compilato segna l’invio come spam.
• Un timer: nessuno compila un modulo di contatto due secondi dopo il caricamento della pagina.
• Un limite di frequenza: trenta invii al minuto dallo stesso indirizzo non sono trenta persone.

Ciò che supera questi controlli è stato scritto da una persona. Lo segnali per una verifica invece di bloccarlo, così un falso positivo non fa mai perdere un messaggio vero.

Mostri a tutti la stessa conferma, così chi gestisce un bot non impara nulla dalla risposta.

Che cosa succede dopo il pulsante

Nessuno compila un modulo per vedere una schermata di conferma. Vuole una risposta, e tutto ciò che sta tra inviato e risposto è un secondo sistema che si guasta più spesso di qualsiasi pulsante.

La soluzione più diffusa è un modulo che manda un’email a una sola casella, e quell’email è l’unica copia. Se un filtro antispam la blocca, o se il destinatario ha cambiato ruolo la primavera scorsa, la richiesta sparisce senza traccia.

Prima salvi, poi avvisi.

Poi faccia in modo che le notifiche continuino ad arrivare:

• Le invii dal suo dominio autenticato, con l’indirizzo del visitatore come risposta, così superano i controlli che applicano i fornitori di posta.
• Affidi l’instradamento del modulo a una persona con un nome, e lo riveda ogni volta che qualcuno cambia ruolo.
• Tenga d’occhio il silenzio. Un modulo che riceveva in media cinque invii a settimana e da tre settimane non ne riceve nessuno è guasto, anche se tutte le pagine si caricano.
• Programmi un invio di prova che percorra tutta la catena, dal modulo alla casella che il personale legge. Trova ciò che il monitoraggio della disponibilità non vede.

Provi le versioni sbagliate

Leggere di un placeholder che sparisce non è come compilare un modulo e perdere il filo.

La pagina delle versioni sbagliate ha moduli dal vivo con gli errori di cui parla questa guida. Ognuno viene spiegato prima di cominciare, e ognuno rimanda alla versione corretta qui.

Perché è una pagina a parte. Chiediamo a ogni pagina di LFW.com un punteggio perfetto nei controlli automatici di accessibilità, e il sito viene analizzato ogni notte. Moduli che falliscono di proposito violerebbero questa regola sulla guida stessa.

Per questo gli errori stanno su una sola pagina, e ognuno è giustificato con precisione: una regola, su un elemento, in quella sola pagina. Qualsiasi altro errore lì fa comunque scattare un allarme, e la pagina mantiene il suo punteggio reale, più basso. È anche esclusa dai risultati di ricerca.

Se vuole sapere come vanno i suoi moduli, l’audit gratuito controlla i campi della sua home page: etichette, contrasto e le altre regole automatiche di accessibilità.

Progettiamo e correggiamo anche moduli per le organizzazioni con siti su WordPress. Ci parli dei suoi moduli.