Formularul de contact pe care îl completează oamenii și ce îl face să funcționeze
Cum construiți un formular de contact scurt și accesibil: puține câmpuri, etichete vizibile, erori clare și un om care chiar răspunde la mesaj.
- Nº
- 21
- Publicat
- Lectură
- 12 min
- Categorie
- Notes
- Scris de
- Revylio
Formularul de contact pe care îl completează oamenii: scurt, clar și cu un om la capăt
Formularul de contact pe care îl completează oamenii are puține câmpuri și o etichetă vizibilă pentru fiecare câmp. Mesajele lui de eroare se înțeleg din prima. Merge cu tastatura și cu un cititor de ecran. Spune onest ce faceți cu datele și ajunge la o persoană care răspunde.
Un formular de contact este blocul de pe site prin care un vizitator vă trimite un mesaj, o cerere de ofertă sau o programare. Formularele sunt modul obișnuit de interacțiune pe site-uri și în aplicații web. Ghidul W3C despre formulare dă ca exemple autentificarea, înregistrarea, comentariile și cumpărăturile. Pentru o firmă de servicii, formularul de contact este adesea singurul loc în care vizita devine cerere.
Accesibilitatea nu este un capitol separat de restul. Tutorialul W3C despre formulare accesibile spune direct că formularele accesibile sunt mai ușor de folosit de toată lumea, inclusiv de persoanele cu dizabilități. Același tutorial precizează că principiile se aplică oricărui formular, indiferent dacă datele sunt procesate în browser sau pe server.
Ghidul de mai jos parcurge, pe rând, câmpurile, etichetele, gruparea, erorile, completarea pe telefon, datele personale și drumul mesajului după trimitere. Urmează un exemplu lucrat, o listă de verificare și pașii concreți pentru site-ul dumneavoastră.
Câmpurile din formular: cereți doar ce folosiți în primul răspuns
Fiecare câmp în plus scade șansa ca formularul de contact să fie trimis. Tutorialul W3C notează că utilizatorii preferă de obicei formulare simple și scurte. Când cereți date irelevante sau excesive, oamenii abandonează mai des formularul.
Un test simplu vă ajută să tăiați. Pentru fiecare câmp, întrebați-vă: folosim această informație în primul nostru răspuns? Dacă nu, câmpul poate aștepta până la discuția următoare. De cele mai multe ori, primul răspuns are nevoie doar de câteva lucruri:
- numele persoanei, ca să știți cum să vă adresați;
- o adresă de email sau un număr de telefon, ca să puteți răspunde;
- un câmp de mesaj, în care omul explică ce vrea cu cuvintele lui.
Codul fiscal, adresa completă sau un buget detaliat rareori sunt necesare la primul contact. Le puteți cere în discuție, după ce omul a decis că vrea să lucreze cu dumneavoastră. Dacă păstrați un câmp opțional, marcați-l clar ca opțional, ca nimeni să nu creadă că trebuie completat.
Aceeași regulă se aplică și formularelor de cerere de ofertă. Un formular de ofertă poate avea un câmp în plus despre serviciul dorit, pentru că vă ajută să trimiteți cererea la omul potrivit. Fiecare câmp trebuie să aibă un motiv pe care îl puteți spune într-o propoziție.
Etichetele vizibile: fiecare câmp are un nume legat de el
Fiecare câmp dintr-un formular de contact are nevoie de o etichetă vizibilă, legată tehnic de câmp. Eticheta este textul scurt care spune ce trebuie scris în câmp, de exemplu „Numele dumneavoastră”. W3C recomandă elementul HTML <label> pentru a identifica fiecare câmp. Doar în cazuri specifice recomandă alte mecanisme, precum WAI-ARIA sau atributul title.
Legătura dintre etichetă și câmp ajută trei grupuri de oameni, potrivit aceluiași tutorial W3C:
- Persoanele care folosesc comenzi vocale pot rosti eticheta pentru a activa câmpul și a muta cursorul în el.
- Persoanele cu mobilitate redusă a mâinilor beneficiază de zone mari pe care se poate da clic, care includ eticheta. Contează mai ales la căsuțele de bifat și la butoanele de opțiune.
- Persoanele care folosesc un cititor de ecran înțeleg mai ușor fiecare câmp. Un cititor de ecran este programul care citește cu voce tare conținutul paginii.
Scrieți etichetele ca pe niște întrebări sau denumiri scurte, în limba clientului. „Telefon” este mai clar decât „Date de contact secundare”. Puneți eticheta deasupra câmpului sau lângă el, în același loc în tot formularul. Când cineva revine la un câmp, trebuie să vadă imediat ce i s-a cerut.
La redesign, cereți echipei să vă arate că fiecare câmp are o etichetă reală, nu doar un text decorativ. Verificarea durează câteva minute cu un cititor de ecran și vă scutește de un formular pe care o parte dintre vizitatori nu îl pot folosi.
Câmpurile înrudite grupate și formularele lungi împărțite în pași
Câmpurile care țin de același subiect trebuie grupate vizual și în cod. W3C recomandă elementele <fieldset> și <legend> pentru a grupa câmpurile înrudite. Elementul <fieldset> este cadrul care adună câmpurile. Elementul <legend> este titlul acelui grup.
Gruparea contează cel mai mult la opțiuni. Să presupunem că întrebați „Ce serviciu vă interesează?” și oferiți trei butoane de opțiune. Fără un grup cu titlu, un cititor de ecran poate anunța doar „Montaj” sau „Service”, fără întrebarea care le dă sens. Cu <fieldset> și <legend>, întrebarea și opțiunile rămân împreună.
Un formular de contact obișnuit încape pe un singur ecran. Unele cereri de ofertă au totuși nevoie de mai multe informații. Pentru formularele lungi, W3C recomandă împărțirea lor în formulare mai mici, care formează pași logici. Utilizatorul trebuie să afle în ce pas se află, de exemplu „Pasul 2 din 3”.
Înainte să împărțiți un formular în pași, încercați să îl scurtați. Un formular în trei pași cu câmpuri inutile rămâne un formular lung. Pașii ajută doar după ce ați păstrat strictul necesar.
Mesajele de eroare și validarea: spuneți ce s-a întâmplat și cum se repară
Un mesaj de eroare bun spune ce câmp are o problemă și ce trebuie făcut ca să fie corectat. „Adresa de email trebuie să conțină @” ajută. „Eroare de validare” nu ajută pe nimeni. Validarea este verificarea datelor înainte ca formularul să fie trimis.
Cursul Learn Forms de pe web.dev are un articol dedicat validării în browser, cu titlul „Help users enter the right data in forms”. Același curs explică atributele formularelor, inclusiv cum activați validarea integrată în browser. Validarea integrată prinde greșelile simple înainte de trimitere, fără să piardă textul deja scris.
Câteva reguli practice fac erorile ușor de înțeles:
- Afișați mesajul lângă câmpul cu problema, nu doar în partea de sus a paginii.
- Păstrați tot ce a scris omul. Nimeni nu rescrie un mesaj lung de două ori.
- Scrieți mesajul în limba formularului, fără coduri tehnice.
- Nu marcați ca greșit un format pe care clientul îl folosește corect, de exemplu un număr de telefon cu spații.
Limitele de timp sunt o altă sursă de erori. W3C recomandă ca formularele să nu aibă, pe cât posibil, o limită de timp. Dacă una este necesară, de exemplu din motive de securitate, utilizatorul trebuie să o poată opri sau prelungi. Excepțiile sunt evenimentele în direct, precum o licitație, sau cazurile în care timpul face parte din validitatea trimiterii.
Tastatura de pe telefon, completarea automată și testarea pe dispozitive
Pe telefon, un formular de contact se completează mai repede când browserul ajută. Cursul Learn Forms de pe web.dev explică două mecanisme care fac asta. Primul este completarea automată, controlată prin atributul autocomplete. Completarea automată înseamnă că browserul propune numele, emailul sau telefonul pe care omul le-a salvat deja.
Al doilea mecanism este tastatura de pe ecran. Același curs arată cum atributele formularului schimbă aspectul tastaturii de pe ecran. Pentru câmpul de telefon, omul vede cifre. Pentru câmpul de email, vede tastele de care are nevoie pentru o adresă.
Testați formularul și fără mouse. Apăsați tasta Tab și urmăriți dacă focusul trece prin câmpuri în ordinea logică. Verificați dacă vedeți mereu unde se află cursorul și dacă butonul de trimitere poate fi apăsat de la tastatură. Un test de cinci minute arată dacă formularul poate fi folosit de cine nu folosește mouse-ul.
Web.dev recomandă două feluri de testare. Primul verifică formularul pe dispozitive, browsere, platforme și contexte diferite. Al doilea este testarea cu utilizatori reali, ca să știți că formularul funcționează pentru toți. După lansarea unui site nou, includeți formularele în verificările de după lansare, alături de redirecționări și indexare.
Datele personale din formular: spuneți pe scurt de ce le cereți
Oamenii trimit date mai ușor când știu ce se întâmplă cu ele. Un text scurt lângă butonul de trimitere poate spune trei lucruri: de ce cereți datele, cine le vede și cum poate omul să renunțe. Cursul Learn Forms de pe web.dev tratează separat securitatea formularelor și păstrarea datelor utilizatorilor în siguranță.
Un exemplu bun de claritate vine dintr-un alt domeniu. Un formular de consimțământ informat pentru un studiu al Universității din București explică participanților, în limbaj simplu, ce se va face cu răspunsurile lor. Formularul promite confidențialitatea datelor și folosirea lor doar în scop academic. Spune și că participanții se pot retrage din studiu în orice moment.
Formularul de contact al unei firme nu este un studiu de cercetare, dar lecția se aplică. Spuneți scopul într-o propoziție, de exemplu: „Folosim aceste date doar ca să vă răspundem la cerere.” Nu ascundeți explicația într-un paragraf juridic lung. Nu bifați dinainte căsuțe pentru alte scopuri.
Partea juridică, adică temeiul prelucrării, consimțământul și politica de confidențialitate, o tratăm separat, în ghidul nostru despre GDPR pe site-ul firmei. Aici contează doar ca explicația să fie scurtă, onestă și vizibilă în momentul în care omul decide să trimită.
Mesajul ajunge la un om care răspunde: destinatarul și confirmarea
Un formular de contact bine construit nu valorează nimic dacă mesajul ajunge într-o căsuță pe care nu o citește nimeni. Drumul mesajului după trimitere face parte din formular la fel de mult ca etichetele. Stabiliți dinainte cine primește fiecare tip de cerere și cine îl înlocuiește în concediu.
După trimitere, omul trebuie să vadă un mesaj de confirmare pe pagină. Confirmarea spune că cererea a ajuns și ce urmează, de exemplu cine va răspunde și pe ce canal. Fără confirmare, mulți vizitatori nu știu dacă mesajul a plecat și îl trimit din nou sau sună.
La Svennis, înainte de predarea unui site, trimitem un mesaj de probă din fiecare formular și verificăm că ajunge la persoana care răspunde efectiv, nu doar la o adresă generică. Am văzut des formulare corect construite care trimiteau cererile către o adresă veche, pe care nu o mai verifica nimeni.
Repetați același test după orice schimbare de email, de găzduire sau de personal. Un test lunar, cu un mesaj scurt marcat clar ca probă, vă arată la timp dacă lanțul s-a rupt. Notați cine a primit mesajul și în cât timp a răspuns.
Exemplu lucrat: formularul de cerere de ofertă al unei firme de instalații
Să luăm o firmă de instalații care vrea un formular de cerere de ofertă pe pagina de servicii. Firma păstrează doar câmpurile pe care le folosește în primul telefon către client. Tabelul de mai jos arată câmpurile, etichetele și setările, pe baza recomandărilor W3C și web.dev de mai sus.
| Câmp | Etichetă vizibilă | Obligatoriu | Setare |
|---|---|---|---|
| Nume | Numele dumneavoastră | Da | <label> legat de câmp, autocomplete activ |
| Telefon | Telefon | Da | Tastatură cu cifre pe ecran, spațiile acceptate |
| Adresa de email | Nu, marcat opțional | Validare integrată în browser | |
| Serviciu | Ce serviciu vă interesează? | Da | <fieldset> cu <legend>, trei opțiuni |
| Mesaj | Descrieți pe scurt ce aveți nevoie | Nu | Text liber, fără limită de timp |
Sub câmpuri, firma pune o propoziție despre date: „Folosim aceste date doar ca să vă sunăm în legătură cu cererea.” Butonul spune exact ce face: „Trimiteți cererea”. După trimitere, pagina confirmă că un coleg din echipa tehnică va suna.
Opțiunea aleasă la „Serviciu” decide cine primește cererea. Montajul merge la echipa de montaj, iar service-ul la dispecerat. Pentru felul în care pagina din jurul formularului convinge omul să ajungă până aici, vedeți ghidul despre pagina de serviciu care aduce cereri.
Ce înseamnă pentru o firmă din România: diacritice, formate locale și texte în română
Pentru o firmă din România, formularul de contact trebuie să accepte fără probleme nume, adrese și numere scrise așa cum le scriu clienții. Cursul Learn Forms de pe web.dev are o secțiune despre formatele internaționale de date și despre planificarea formularului pentru localizare. Localizarea înseamnă adaptarea formularului la limba și la obiceiurile unei piețe.
În practică, câteva verificări sunt specifice pieței românești:
- Câmpul de nume acceptă litere cu diacritice, precum ș, ț, ă, â și î.
- Câmpul de telefon acceptă numărul scris cu sau fără spații.
- Mesajele de eroare și confirmarea sunt scrise în română corectă, cu diacritice.
- Textul despre date este în română simplă, nu o traducere automată.
Aveți și clienți străini? Atunci formularul nu trebuie să respingă numerele cu prefix de altă țară sau numele fără diacritice. Același câmp trebuie să funcționeze pentru ambele situații.
Testați formularul cu câțiva clienți reali sau colegi din afara echipei care a construit site-ul. Rugați-i să trimită o cerere de pe telefon și urmăriți unde ezită. Ezitările vă arată etichetele neclare și câmpurile de prisos mai bine decât orice opinie din ședință.
Lista de verificare pentru formularul de contact
Lista de mai jos adună verificările din acest ghid. Fiecare rând spune ce verificați, cum testați și ce sursă susține recomandarea. O puteți parcurge singur în mai puțin de o oră.
| Ce verificați | Cum testați | Sursa |
|---|---|---|
| Doar câmpurile necesare | Pentru fiecare câmp: îl folosim în primul răspuns? | W3C WAI |
| Etichetă pentru fiecare câmp | Treceți prin formular cu un cititor de ecran | W3C WAI |
| Opțiuni grupate cu titlu | Întrebarea se aude împreună cu opțiunile | W3C WAI |
| Erori clare, date păstrate | Trimiteți intenționat un email greșit | web.dev |
| Completare automată și tastatură potrivită | Completați formularul de pe telefon | web.dev |
| Fără limită de timp ascunsă | Lăsați pagina deschisă, apoi trimiteți | W3C WAI |
| Mesajul ajunge la un om | Trimiteți un mesaj de probă și notați cine răspunde | Practică proprie |
Orice rând bifat cu „nu” este o reparație concretă. Începeți cu destinatarul mesajului și cu etichetele, pentru că acestea blochează cele mai multe cereri.
Pașii următori pentru formularul de pe site-ul dumneavoastră
Primul pas este un test complet, de la vizitator la răspuns. Deschideți site-ul de pe telefon și trimiteți o cerere ca un client. Apoi verificați cine a primit-o și în cât timp a răspuns.
Al doilea pas este parcurgerea listei de verificare de mai sus. Notați fiecare problemă găsită, cu pagina și câmpul unde apare. O listă scurtă și concretă se repară mai ușor decât impresia generală că formularul „nu merge bine”.
Al treilea pas depinde de ce găsiți:
- Dacă problemele sunt mici, precum o etichetă neclară sau un destinatar greșit, le poate repara cine administrează site-ul.
- Dacă formularul nu are etichete reale, nu merge de la tastatură sau pierde datele la eroare, problema ține de construcția site-ului.
- Dacă pagina din jurul formularului nu convinge, lucrați întâi la pagina de serviciu.
Când lucrați cu o agenție la un site nou, cereți-i să vă demonstreze formularul cu un cititor de ecran și de la tastatură, înainte de semnare. Ghidul despre cum alegeți agenția care vă face site-ul conține și alte întrebări pe care merită să le puneți înainte de contract.
