Zvýraznenie povinných polí formulára pomocou CSS3. Poradie vypĺňania polí súboru (ZS) Y 2 označené polia sú povinné.

Príloha č.4
Meno dodávateľa: _________________________________________________

Zúčastňuje sa predvýberžrebom:

ZOZNAM DOKLADOV ÚČASTNÍKA

Takmer všetky moderné a nové stránky majú formuláre, ktorých vyplnenie sa bude kontrolovať bez opätovného načítania stránky. Takzvané povinné polia formulára. Aké metódy sa však používajú na vytváranie takýchto foriem?

Až donedávna bolo najpopulárnejším spôsobom používanie JavaScriptu. Veľmi pohodlnou knižnicou je validácia jquery. Táto metóda je moderný, ale jeho integrácia do formulára na stránke si vyžaduje určitú zručnosť a čas.

S príchodom html 5 a jeho rozšírená integrácia do moderných webových stránok, môžete odmietnuť používať javascript. Navyše, aby bolo pole vo formulári povinné, stačí ho pridať povinný atribút.

S požadovaným atribútom prehliadač pred odoslaním formulára skontroluje, či je konkrétne pole vyplnené alebo nie. Ak nie, používateľ dostane pokyn, aby vyplnil pole alebo dokonca všetky polia formulára.

A vytvorenie takýchto polí nezaberie viac ako minútu.

Povedzme teda, že existuje malá forma:

Takto to vyzerá v prehliadači:

Teraz robíme niektoré polia vo formulári povinnými:

To je všetko. Všetky polia sme urobili povinnými za menej ako 1 minútu. Ak nevyplníme povinné polia, zobrazia sa nám nasledujúce správy:

A čo je dôležité. Táto kontrola funguje vo všetkých moderných prehliadačoch a len pre špecifikáciu html 5 Pre neznalých je potrebné vložiť značku na začiatok html kódu.

Každý internetový obchodník vie, že používateľská skúsenosť pri interakcii so vstupnou stránkou je dôležitým krokom ku konverzii. A v tomto procese zohráva významnú úlohu, pretože nielen celkový dojem spoločnosti závisí od jej výkonu, ale aj to, či priťahovaný používateľ zostane na stránke alebo prejde na vstupnú stránku konkurenta.

Z tohto dôvodu sa vyvíja forma spätná väzba je potrebné venovať osobitnú pozornosť, aj keď je jednoduchá a neobsahuje veľa polí na vyplnenie. V tomto článku sa rýchlo pozrieme na 15 bodov, ktoré sú rozhodujúce pre vytvorenie dokonalého kontaktného formulára.

A aby ste si upevnili získaný materiál a precvičili si svoje zručnosti, obsahuje všetky potrebné technické funkcie na vytváranie rôznych formulárov pre záujemcov.

1. Jasný a výstižný názov

Hlavným účelom názvu je vyjadriť podstatu v niekoľkých slovách, vyhnúť sa kvetnatým frázam a zložitým vetám. V ideálnom prípade by návštevník mal jasne a jednoznačne pochopiť, na čo slúži formulár pre potenciálnych zákazníkov, a to už z jeho názvu.

Zatiaľ čo dobrý nadpis vysvetľuje účel formulára pre potenciálnych zákazníkov, informatívny popis môže ešte viac motivovať návštevníkov, ktorí váhajú s jeho vyplnením. Dá sa to dosiahnuť zahrnutím 2 strategicky dôležitých bodov do textu:

• čo presne sa od používateľa vyžaduje;
• čo presne návštevník dostane po vykonaní úkonov, ktoré sa od neho očakávajú.

Názov: „Vyplňte formulár a dostanete katalóg s cenami od výrobcu.“ Popis: „Ponáhľaj sa! Vyplňte formulár do konca dňa a získajte 20% zľavu." Je možná celá vstupná stránka.

3. Nikto nemá rád vypĺňanie dlhých formulárov.

Formulár pre potenciálnych zákazníkov by ste nemali zahlcovať množstvom polí, ktoré treba zbytočne vyplňovať. Používajte len tie, ktoré sú pre vaše podnikanie dôležité. Ak je to možné, vyhnite sa duplicite požadovaných informácií (napríklad „E-mail“ a „Potvrdiť e-mail“). Žiadosti o osobné a osobné informácie (ako napríklad „telefónne číslo“, „adresa“ alebo „názov spoločnosti“) by sa nemali zneužívať. Ak sa takéto polia napriek tomu nachádzajú, informujte používateľa (textovo aj graficky), že jeho osobné údaje sú bezpečne chránené a nebudú prenesené na tretiu stranu.

Nižšie sú uvedené 2 obrázky znázorňujúce dlhý a krátky formulár pre potenciálnych zákazníkov:

Je ľahké uhádnuť, ktorý z formulárov vyššie vyplní návštevník vstupnej stránky ľahšie. Prevažná väčšina bude v rozpakoch z potreby poskytnúť toľko údajov, z ktorých veľká časť bude pravdepodobne zbytočná.

4. Umiestnite textové štítky vľavo nad polia, ktoré sa majú vyplniť

Štúdie využívajúce , ukazujú, že hlavičky polí umiestnené nad poliami fungujú lepšie ako ich zarovnanie doprava alebo ich umiestnenie doľava oproti zodpovedajúcim poliam. Ak potrebujete urobiť formulár kompaktnejší alebo vizuálne kratší, názvy štítkov je možné umiestniť do polí zarovnaných doľava (v tomto prípade fungujú ako zástupné symboly):

5. Zmysluplné titulky na tlačidle CTA

• súvisiace s obsahom formulára pre záujemcov a
• ukázať, čo človek dostane po kliknutí na tlačidlo CTA.

6. Umiestnite formulár na prvú obrazovku

Logika je tu jednoduchá: ak návštevník po načítaní stránky okamžite uvidí formulár pre potenciálnych zákazníkov, je pravdepodobnejšie, že mu bude venovať pozornosť, čo môže zvýšiť konverziu. Umiestnením formulára pod takzvaný , zvyšujete pravdepodobnosť, že sa k nemu používateľ nikdy nedostane. Ešte horšie je, ak je formulár na priesečníku prvej a druhej obrazovky. V tomto prípade je vypĺňanie mimoriadne nepohodlné.

7. Pomôžte návštevníkom vyplniť kontaktný formulár

9. Zvýraznenie polí, ktoré treba vyplniť

Okrem chybových hlásení je vhodné zvýrazniť viditeľnou (ale nie červenou) farbou pole, ktoré používateľ vypĺňa tento moment. To mu umožní v prípade rozptyľovania sa rýchlo vrátiť do tej časti olovrantu, kde bol prerušený.

Okrem toho môžete vyššie popísanú techniku ​​doplniť nastavením automatického umiestňovania a zvýraznenia kurzora v prvom poli, ktoré sa má vyplniť. Tento malý detail nielen šetrí čas, ale tiež nenápadne podporuje konverznú akciu:

10. Štýl a veľkosť písma, ako aj farba pozadia

Jednou z dôležitých požiadaviek ideálneho formulára spätnej väzby je jeho čitateľnosť, ktorú možno dosiahnuť tým, že sa vyhneme používaniu príliš exotických fontov a farebných schém, ktoré sťažujú čítanie (napríklad biely text na svetlosivom pozadí).

11. Rozlišovanie povinných a nepovinných polí, ktoré treba vyplniť

Najlepší spôsob, ako identifikovať povinné polia, je označiť ich hviezdičkou (*):

V editore formulára pre potenciálnych zákazníkov z LPgeneratora môžete nastaviť rôzne konfigurácie polí Meno, Priezvisko, Vek, E-mail, Dátum a Url vrátane označenia poľa ako povinného (možnosť č. 2).

Povinné polia sú označené hviezdičkami. Celá vstupná stránka môže byť

Toto rozlíšenie zlepšuje a v dôsledku toho podporuje vyššie miery konverzie.

12. Optimalizujte svoj formulár pre mobilnú návštevnosť

Rýchly rast používateľov mobilné zariadenia predstavuje pre vlastníkov webových stránok a vstupných stránok náročnú úlohu poskytnúť vysokokvalitné používateľské prostredie pre tých, ktorí vyplnia formulár pre potenciálnych zákazníkov pomocou rôznych typov zariadení. Preto má zmysel investovať do formulárových polí pre túto rastúcu kategóriu používateľov.

Niektoré polia vyžadujú výber údajov z dlhého zoznamu možné možnosti. Ak je ich priveľa, môže to sťažiť hľadanie potrebné informácie a spôsobiť, že návštevník opustí stránku. Preto je potrebné rozbaľovacie ponuky vo formulároch pre potenciálnych zákazníkov používať rozumne. Ak je údajov príliš veľa, ako alternatívu možno použiť technológie automatického dopĺňania.

Dlhá rozbaľovacia ponuka vo formulároch najčastejšie vyžaduje, aby ste vybrali krajinu pobytu. Alternatívnou možnosťou v tomto prípade môže byť automatická detekcia regiónu používateľa pomocou IP adresy

14. Ďakovná stránka s personalizačnými prvkami po vyplnení prihlasovacieho formulára

Dajte používateľovi vedieť o výsledkoch vyplnenia formulára nastavením príslušnej aktivácie. Ak návštevník zadal svoje meno, keď zanechával kontaktné informácie, oslovte ho menom a – v závislosti od vašich marketingových cieľov – mu povedzte, ako s ním budete ďalej komunikovať alebo iné relevantné a užitočné informácie.

15. Použite jednoduchý captcha

Hoci je captcha pomerne účinným opatrením proti spamu, mali by ste pamätať na to, že ak ho používateľ na prvý raz nezadá správne, je vysoká pravdepodobnosť, že odmietne vyplniť váš formulár úplne. Aby ste predišli takýmto nepríjemným nedorozumeniam, použite jednoduché captcha a možnosť zmeniť bezpečnostný kód požadovaný pre vstup.

Môžete tiež použiť jednoduché začiarkavacie políčko, v ktorom stačí začiarknuť políčko, aby ste označili, že návštevník vstupnej stránky je skutočná osoba a nie robot:

Príklad začiarkavacieho políčka s nápisom „Nie som robot“, ktorý sa aktivuje zaškrtnutím štvorcového políčka prideleného na tento účel

Záver

Vytvorenie dokonalého zážitku zo vstupnej stránky často spočíva v návrhu dokonalého formulára pre potenciálnych zákazníkov, ktorý má nasledujúce vlastnosti:

• jeho účel možno rýchlo a jasne pochopiť z názvu a popisu;
• ľahko sa plní;
• je relevantný a zameraný na konkrétnu cieľovú skupinu.

Ideálne v v tomto prípade Neznamená to v prvom rade ohromujúci dizajn, ale schopnosť tohto prvku vstupnej stránky „prísť do kontaktu“ s návštevníkom vstupnej stránky. Okrem toho účinný kontaktný formulár obsahuje potrebné výzvy, ktorým má používateľ zabrániť drahocenný cieľ- poskytovanie informácií o sebe.

V tomto návode urobíme malý pútavý efekt pre požadované polia vo formulári. Väčšina webových formulárov je vyvinutá minimálnym spôsobom, len na zhromažďovanie údajov o používateľoch. Zamyslite sa nad tým, koľko návštevníkov prestalo vypĺňať formulár, pretože obsahoval príliš veľa polí. Existuje však aj veľa formulárov, ktoré žiadajú o dodatočné informácie, ktoré návštevník chce alebo potrebuje uviesť do voliteľných polí. Napríklad objednávkové formuláre alebo klasifikačné formuláre.

Cieľom je zvýrazniť iba povinné polia. Tento problém sa zvyčajne rieši nastavením malého * alebo podobného symbolu. Ale pôjdeme ďalej a pridáme interaktívny efekt, aby sme lepšie vizuálne zvýraznili požadované polia.

Aby sme túto myšlienku zrealizovali, zabaľme štítky a polia formulárov do dvoch prvkov div, ktoré nám umožnia aplikovať rôzne efekty. Vonkajší kontajner bude mať ďalšiu triedu, ak je pole povinné ( af-vyžaduje sa):

Pozrime sa na štýl druhého ukážkového príkladu, ktorý používa škálovanie na skrytie voliteľných polí. Výšku druhej nádoby znížime, keď sa vnútorná zmenší.

Pridajme prechod pre vonkajší kontajner, definujme pevnú výšku a nastavte vyčnievanie na skrytie, aby sa skryl obsah, keď sa výška zníži.

Vonkajší ( pretečenie: skryté; výška: 70px; tieňový rámček: 0 1px 0 #f5f5f5 vsadený; prechod: všetko lineárne 0,5 s; )

Pre vnútornú nádobu nastavte stred prechodu na „stredný vrch“, aby sme videli proces znižovania výšky. Na začiatku je mierka nastavená na 1 (nie je potrebné ju nastavovať):

Af-vnútorné ( padding: 15px 20px 15px 20px; transform-origin: center top; transform: scale(1); transition: all 0,5s linear; )

V hornej časti formulára je tlačidlo (zaškrtávacie políčko) s ID af-showreq. Po kliknutí na tlačidlo sa zmení mierka ďalších polí. Používame pseudo triedu :nie získať prvky, ktoré potrebujete, ale môžete nastaviť triedy pre ďalšie polia a pristupovať k nim prostredníctvom relatívnych kombinátorov.

Zmenšme výšku vonkajšej nádoby a mierku vnútornej:

#af-showreq:checked ~ .af-form .af-outer:not(.af-required) (výška: 0px; viditeľnosť: skryté; ) #af-showreq:checked ~ .af-form .af-outer:not (.af-required).af-inner ( transform: scale(0); opacity: 0; )

Nastavenie vlastnosti viditeľnosť: skryté zaručuje, že sa môžete pomocou klávesnice prepínať do iných polí. Tu sa nedá použiť displej: žiadny, pretože prechod nebude fungovať.