Evidențierea câmpurilor de formular obligatorii folosind CSS3. Ordinea de completare a câmpurilor fișierului (ZS) Y Sunt obligatorii 2 câmpuri marcate.

Anexa nr. 4
Numele contractantului: _________________________________________________

Participă la preselectie prin lot:

LISTA DOCUMENTELOR PARTICIPANTULUI

Aproape toate site-urile moderne și noi au formulare care vor fi verificate pentru completare fără a reîncărca pagina. Așa-numitele câmpuri de formular obligatorii. Dar ce metode sunt folosite pentru a crea astfel de formulare?

Până de curând, cea mai populară modalitate a fost să folosești JavaScript. O bibliotecă foarte convenabilă este validarea jquery. Această metodă este modern, dar necesită o anumită îndemânare și timp pentru a-l integra în formularul de pe site.

Odată cu venirea html 5și integrarea sa pe scară largă în site-urile web moderne, puteți refuza să utilizați javascript. Mai mult, pentru a face obligatoriu un câmp din formular, trebuie doar să adăugați atribut necesar.

Cu atributul necesar, browserul va verifica dacă un anumit câmp este completat sau nu înainte de a trimite formularul. Dacă nu, utilizatorul va fi instruit să completeze un câmp sau chiar toate câmpurile formularului.

Și nu va dura mai mult de un minut pentru a crea astfel de câmpuri.

Deci, să presupunem că există o formă mică:

Iată cum arată în browser:

Acum facem obligatorii câteva câmpuri din formular:

Asta e tot. Am făcut toate câmpurile obligatorii în mai puțin de 1 minut. Dacă nu completăm câmpurile obligatorii, vom vedea următoarele mesaje:

Și, important. Această verificare funcționează în toate browserele moderne și numai pentru specificația html 5 Pentru cei neinițiați, trebuie să inserați o etichetă la începutul codului html.

Orice agent de marketing pe internet știe că experiența utilizatorului atunci când interacționează cu o pagină de destinație este un pas important către conversie. Și în acest proces, joacă un rol semnificativ, deoarece nu numai impresia generală a companiei depinde de performanța acesteia, ci și dacă utilizatorul atras va rămâne pe pagină sau va merge la pagina de destinație a unui concurent.

Din acest motiv, dezvoltarea formei feedback trebuie să acordați o atenție deosebită, chiar dacă este simplu și nu conține multe câmpuri de completat. În acest articol, vom arunca o privire rapidă la 15 puncte care sunt esențiale pentru crearea formularului de contact perfect.

Și pentru a consolida materialul primit și a vă exersa abilitățile, acesta conține toate funcționalitățile tehnice necesare pentru crearea unei varietăți de forme de lead-uri.

1. Titlu clar și concis

Scopul principal al titlului este de a transmite esența în doar câteva cuvinte, evitând frazele înflorate și propozițiile complexe. În mod ideal, un vizitator ar trebui să înțeleagă clar și fără ambiguitate pentru ce este formularul de clienți potențiali doar privind titlul acestuia.

În timp ce un titlu bun explică scopul formularului potențial, o descriere informativă poate motiva și mai mult vizitatorii care ezită să-l completeze. Acest lucru poate fi realizat prin includerea a 2 puncte importante din punct de vedere strategic în text:

• ce anume este cerut de la utilizator;
• ce anume va primi vizitatorul după finalizarea acţiunilor aşteptate de la el.

Titlu: „Completați formularul pentru a primi un catalog cu prețuri de la producător.” Descriere: „Grăbește-te! Completați formularul până la sfârșitul zilei și primiți o reducere de 20%.” Întreaga pagină de destinație este posibilă.

3. Nimănui nu-i place să completeze formulare lungi.

Nu ar trebui să supraîncărcați formularul de clienți potențiali cu numeroase câmpuri pe care să le completați inutil. Folosiți numai cele care sunt esențiale pentru afacerea dvs. Dacă este posibil, evitați duplicarea informațiilor solicitate (de exemplu, „E-mail” și „Confirmare e-mail”). Solicitările de informații personale și personale (cum ar fi „număr de telefon”, „adresă” sau „numele companiei”) nu ar trebui să fie suprautilizate. Dacă astfel de câmpuri sunt totuși prezente, informați utilizatorul (în text și grafic) că datele sale personale sunt protejate în siguranță și nu vor fi transferate unei terțe părți.

Mai jos sunt 2 imagini care ilustrează un formular lung și scurt:

Este ușor să ghiciți care dintre formularele de mai sus va fi completat mai ușor de către un vizitator al paginii de destinație. Marea majoritate va fi stânjenită de necesitatea de a furniza atât de multe date, dintre care multe dintre ele probabil că vor fi inutile.

4. Așezați etichete de text în partea stângă deasupra câmpurilor pentru a fi completate

Studiile care utilizează , arată că anteturile câmpurilor plasate deasupra câmpurilor au rezultate mai bune decât alinierea lor la dreapta sau plasarea lor la stânga opus câmpurilor corespunzătoare. Dacă trebuie să faceți formularul mai compact sau mai scurt din punct de vedere vizual, numele etichetelor pot fi plasate în interiorul câmpurilor, aliniate la stânga (în acest caz, acestea acționează ca substituenți):

5. Subtitrări semnificative pe butonul CTA

• legate de conținutul formularului de plumb și
• arătați ce va primi o persoană după ce faceți clic pe butonul CTA.

6. Așezați formularul pe primul ecran

Logica aici este simplă: dacă un vizitator vede imediat formularul de clienți potențiali după ce a încărcat pagina, este mai probabil să-i acorde atenție, ceea ce, la rândul său, poate crește conversia. Prin plasarea formularului sub așa-numitul , creșteți probabilitatea ca utilizatorul să nu ajungă niciodată la el. Este și mai rău dacă formularul se află la intersecția primului și al doilea ecran. În acest caz, este extrem de incomod de completat.

7. Ajută vizitatorii să completeze formularul de contact

9. Evidențierea câmpurilor de completat

Pe lângă mesajele de eroare, este recomandabil să evidențiați într-o culoare vizibilă (dar nu roșie) câmpul pe care îl completează utilizatorul în acest moment. Acest lucru îi va permite, în caz de distragere a atenției, să se întoarcă rapid în partea din formularul de plumb în care a fost întrerupt.

În plus, puteți completa tehnica descrisă mai sus setând plasarea automată a cursorului și evidențierea în primul câmp care trebuie completat. Acest mic detaliu nu numai că economisește timp, dar și încurajează discret acțiunea de conversie:

10. Stilul și dimensiunea fontului, precum și culoarea de fundal

Una dintre cerințele importante ale unui formular de feedback ideal este lizibilitatea acestuia, care poate fi realizată prin evitarea utilizării fonturilor și a schemelor de culori prea exotice care îngreunează citirea (de exemplu, text alb pe un fundal gri deschis).

11. Distingerea dintre câmpurile obligatorii și cele opționale care trebuie completate

Cel mai bun mod de a identifica câmpurile obligatorii este să le marcați cu un asterisc (*):

În editorul de formulare de clienți potențiali de la LPgenerator, puteți seta diferite configurații pentru câmpurile Prenume, Nume, Vârstă, E-mail, Data și Url, inclusiv marcarea câmpului ca fiind necesar (opțiunea nr. 2)

Câmpurile obligatorii sunt marcate cu asteriscuri. Întreaga pagină de destinație poate fi

Această distincție se îmbunătățește și, ca rezultat, promovează rate de conversie mai mari.

12. Optimizați-vă formularul pentru traficul mobil

Creștere rapidă a utilizatorilor dispozitive mobile reprezintă o sarcină dificilă pentru proprietarii de site-uri web și pagini de destinație de a oferi UX de înaltă calitate pentru cei care completează formularul de clienți potențiali folosind diferite tipuri de dispozitive. Prin urmare, este logic să investiți în câmpuri de formular pentru această categorie de utilizatori în creștere.

Unele câmpuri necesită selectarea datelor dintr-o listă lungă opțiuni posibile. Dacă sunt prea multe, poate fi dificil de găsit informatiile necesareși determină vizitatorul să părăsească pagina. Prin urmare, meniurile drop-down din formularele de clienți potențiali trebuie utilizate cu înțelepciune. Dacă există prea multe date, atunci tehnologiile de completare automată pot fi utilizate ca alternativă.

Cel mai adesea, un meniu derulant lung în formulare necesită să selectați țara de reședință. O opțiune alternativă în acest caz ar putea fi detectarea automată a regiunii utilizatorului folosind adresa IP

14. Pagina de mulțumire cu elemente de personalizare după completarea formularului de clienți potențiali

Informați utilizatorul despre rezultatele completării formularului, activând corespunzător. Dacă vizitatorul și-a introdus numele atunci când a lăsat informații de contact, adresați-i nume și - în funcție de obiectivele dvs. de marketing - spuneți-i cum veți interacționa în continuare cu el sau alte informații relevante și utile.

15. Folosește un simplu captcha

Deși captcha este o măsură destul de eficientă împotriva spam-ului, ar trebui să rețineți că, dacă utilizatorul nu îl introduce corect prima dată, există o probabilitate mare ca acesta să refuze complet completarea formularului dvs. Pentru a preveni astfel de neînțelegeri enervante, utilizați captch-uri simple și posibilitatea de a schimba codul de securitate solicitat pentru intrare.

De asemenea, puteți utiliza o casetă de selectare simplă în care trebuie doar să bifați o casetă pentru a indica faptul că vizitatorul paginii de destinație este o persoană reală și nu un robot:

Un exemplu de casetă de selectare cu inscripția „Nu sunt un robot”, care este activată prin bifarea casetei pătrate alocate pentru aceasta

Concluzie

Crearea unei experiențe perfecte în pagina de destinație se reduce adesea la proiectarea formularului de clienți potențiali perfect, care are următoarele caracteristici:

• scopul său poate fi înțeles rapid și clar din titlu și descriere;
• este ușor de umplut;
• este relevantă și vizează un anumit public țintă.

Ideal in în acest caz, Nu implică, în primul rând, un design uluitor, ci capacitatea acestui element al paginii de destinație de a „veni în contact” cu vizitatorul paginii de destinație. În plus, un formular de contact eficient conține solicitările necesare pentru ca utilizatorul să le prevină obiectiv prețuit- furnizarea de informații despre tine.

În acest tutorial vom realiza un mic efect atrăgător pentru câmpurile necesare din formular. Majoritatea formularelor web sunt dezvoltate într-un mod minim, doar pentru a colecta datele utilizatorului. Gândiți-vă câți vizitatori au renunțat la completarea unui formular deoarece conținea prea multe câmpuri. Există însă și multe formulare care solicită informații suplimentare pe care vizitatorul dorește sau trebuie să le furnizeze în câmpuri opționale. De exemplu, formulare de comandă sau formulare de clasificare.

Ideea este de a evidenția doar câmpurile obligatorii. Această problemă este de obicei rezolvată prin setarea unui simbol * mic sau similar. Dar vom merge mai departe și vom adăuga un efect interactiv pentru a evidenția vizual mai bine câmpurile necesare.

Pentru a implementa ideea, să împachetăm etichetele și câmpurile de formular în două elemente div, ceea ce ne va permite să aplicăm diverse efecte. Containerul exterior va avea o clasă suplimentară dacă câmpul este obligatoriu ( af-necesar):

Să ne uităm la stilul celui de-al doilea exemplu demonstrativ, care folosește scalarea pentru a ascunde câmpurile opționale. Vom reduce înălțimea celuilalt recipient pe măsură ce cel interior scade.

Să adăugăm o tranziție pentru containerul exterior, să definim o înălțime fixă ​​și să setăm părțile proeminente să se ascundă pentru a ascunde conținutul pe măsură ce înălțimea scade.

Af-exterior ( depășire: ascuns; înălțime: 70px; umbră casetă: 0 1px 0 #f5f5f5 încadrat; tranziție: toate 0,5s liniare; )

Pentru containerul interior, setați centrul tranziției la „centru de sus”, astfel încât să putem vedea procesul de scădere a înălțimii. Inițial, scara este setată la 1 (nu este necesar să o setați):

Af-inner ( umplutură: 15px 20px 15px 20px; transformare-origine: centru de sus; transformare: scară (1); tranziție: toate 0,5 s liniare; )

În partea de sus a formularului există un buton (căsuță de selectare) cu id af-showreq. Când faceți clic pe butonul, scara câmpurilor suplimentare se va schimba. Folosim o pseudo clasă :nu pentru a obține elementele de care aveți nevoie, dar puteți seta clase pentru câmpuri suplimentare și le puteți accesa prin combinatoare relative.

Să reducem înălțimea containerului exterior și scara celui interior:

#af-showreq:verificat ~ .af-form .af-outer:not(.af-required) ( înălțime: 0px; vizibilitate: ascuns; ) #af-showreq:checked ~ .af-form .af-outer:nu (.af-required).af-inner ( transform: scale(0); opacitate: 0; )

Stabilirea unei proprietăți vizibilitate: ascuns garantează că puteți comuta la alte câmpuri folosind tastatura. Nu poate fi folosit aici afișaj: niciunul, deoarece tranziția nu va funcționa.