Nõutavate vormiväljade esiletõstmine CSS3 abil. Failiväljade (ZS) Y 2 tähistatud väljade täitmise järjekord on vajalik

Lisa nr 4
Töövõtja nimi: ___________________________________________

Osaleb eelvalikus loosi teel:

OSALEJA DOKUMENTIDE KIRJELDUS

Peaaegu kõigil kaasaegsetel ja uutel saitidel on vormid, mille täitmist kontrollitakse ilma lehte uuesti laadimata. Niinimetatud on kohustuslikud vormiväljad. Milliseid meetodeid aga selliste vormide loomisel kasutatakse?

Alles hiljuti oli populaarseim viis kasutada javascripti. Väga käepärane raamatukogu on jquery valideerimine. See meetod on kaasaegne, kuid selle integreerimiseks saidi vormi abil on vaja natuke oskusi ja aega.

Tulekuga html 5 ja selle üldlevinud integreerimine tänapäevastesse saitidesse, võite keelduda javascripti kasutamisest. Samal ajal peate vormi välja kohustuslikuks muutmiseks lihtsalt lisama vajalik atribuut.

Vajaliku atribuudiga kontrollib brauser enne vormi esitamist, kas konkreetne väli on täidetud või mitte. Kui ei, siis juhendatakse kasutajat täitma väli või isegi kõik vormi väljad.

Ja selliste väljade loomine võtab vähem kui minut.

Ütleme nii, et on olemas väike vorm:

See näeb brauseris välja järgmine:

Nüüd muudame mõned väljad kujul kohustuslikuks:

See on kõik. Tegime kõik nõutavad väljad vähem kui ühe minutiga. Kui te ei täida nõutavaid välju, näeme järgmisi teateid:

Ja mis tähtis. See kontroll töötab kõigis kaasaegsetes brauserites ja ainult spetsifikatsiooni html 5. Käsitlemata - html-koodi alguses peate sisestama sildi.

Iga digitaalne turundaja teab, et sihtlehe kasutajakogemus on oluline samm konversiooni poole. Ja sellel on selles protsessis oluline roll, kuna mitte ainult ettevõtte üldmulje sõltub selle tulemuslikkusest, vaid ka see, kas meelitatud kasutaja jääb lehele või läheb konkurendi maandumislehele.

Sel põhjusel vormi kujundus tagasiside peate pöörama erilist tähelepanu, isegi kui see on lihtne ja ei sisalda palju välju, mida täita. Selles artiklis vaatleme lühidalt 15 kriitilist punkti täiusliku kontaktvormi loomisel.

Ja selleks, et koondada saadud materjali ja koolitada oma oskusi, sisaldab see kõiki vajalikke tehnilisi funktsioone mitmesuguste pliivormide loomiseks.

1. Selge ja lühike pealkiri

Pealkirja põhieesmärk on edastada olemus vaid mõne sõnaga, vältides ehitatavaid fraase ja keerulisi lauseid. Ideaalis peaks külastaja selgelt ja ühemõtteliselt aru saama, mis on pliivorm, lihtsalt selle pealkirja vaadates.

Kuigi hea pealkiri selgitab juhtvormi eesmärki, võib informatiivne kirjeldus veelgi motiveerida külastajaid, kes kahtlevad selle täitmist. Seda saab saavutada, kui lisada teksti 2 strateegiliselt olulist punkti:

• mida täpselt kasutajalt nõutakse;
• mida täpselt külastaja saab pärast temalt oodatud toimingute tegemist.

Pealkiri: "Täitke vorm, et saada tootjalt kataloog koos hindadega." Kirjeldus: “Kiirustage! Täitke vorm enne päeva lõppu ja saate 20% soodustust. " Võimalik on kogu sihtleht.

3. Kellelegi ei meeldi pikkade vormide täitmine.

Ärge tarbetu täitmise jaoks üle koormake pliivormi mitme väljaga. Kasutage ainult neid, mis on teie ettevõtte jaoks kriitilised. Kui võimalik, vältige nõutud teabe dubleerimist (näiteks „E-post” ja „Kinnitage e-post”). Isikliku ja isikliku teabe taotlusi (nt „Telefoninumber”, „Aadress” või „Ettevõtte nimi”) ei tohiks kuritarvitada. Kui sellised väljad siiski esinevad, teavitage kasutajat (tekstis ja graafiliselt), et tema isikuandmed on usaldusväärselt kaitstud ja neid ei edastata kolmandale isikule.

Allpool on 2 pilti, mis illustreerivad pikka ja lühikest juhtvormi:

Pole raske arvata, milline ülaltoodud vormidest täidab tõenäolisemalt sihtlehe külastaja. Valdav enamus on selgelt piinlik, kui tajub vajadust esitada nii palju andmeid, millest suur osa on tõenäoliselt tarbetu.

4. Asetage vasakul täidetavate väljade kohale tekstimärgised

Selle kasutamisega läbi viidud uuringud näitavad, et väljade pealkirjad toimivad paremini kui parem joondamine või vasakule paigutamine vastavate väljade vastas. Kui peate vormi kompaktsemaks või visuaalselt lühemaks muutma, võite siltide nimed väljadele paigutada, joondades need vasakule (antud juhul toimivad need kohahoidjatena):

5. Tähenduslikud pealdised CTA-nupul

• seotud juhtvormi sisuga ja
• näidata, mida inimene saab pärast CTA-nupu vajutamist.

6. Asetage vorm esimesele ekraanile

Loogika on lihtne: kui külastaja näeb kohe pärast lehe laadimist pliivormi, pöörab ta sellele tõenäolisemalt tähelepanu, mis omakorda võib teisendamist suurendada. Pannes vormi niinimetatud alla, suurendate tõenäosust, et kasutaja sellele kunagi ei jõua. Veel hullem on see, kui vorm asub esimese ja teise ekraani ristumiskohas. Sel juhul on selle täitmine äärmiselt ebamugav.

7. Külastajate abistamine kontaktivormi täitmisel

9. Täidetud väljade esiletõstmine

Lisaks veateadetele on soovitatav esile tõsta väli, mida kasutaja praegu täidab mõne märgatava (kuid mitte punase) värviga. See võimaldab tal tähelepanu kõrvalejuhtimise korral kiiresti pöörduda tagasi pliivormi selle osa juurde, mille ta katkestas.

Lisaks saate ülaltoodud tehnikat täiendada, määrates kursori automaatse paigutuse ja esiletõstmisega esimesel täidetaval väljal. Selline tühiasi mitte ainult ei säästa aega, vaid lükkab ka teid peensusteni toimingu suunas:

10. Fondi stiil ja suurus, samuti taustvärv

Ideaalse tagasiside vormi üheks oluliseks nõudeks on selle loetavus, mille saab saavutada vältides liiga eksootilisi fonte ja värve, mis raskendavad lugemist (näiteks valge tekst helehallil taustal).

11. Täitmiseks nõutavate ja valikuliste väljade eristamine

Parim viis nõutavate väljade tuvastamiseks on tähistada tärniga (*):

LPgeneratori peavormiredaktoris saate väljadele Nimi, Perekonnanimi, Vanus, E-post, Kuupäev ja Url konfigureerida erinevad konfiguratsioonid, sealhulgas märkida välja vastavalt vajadusele (suvand nr 2)

Kohustuslikud väljad on tähistatud tärnidega. Kogu maandumisleht võib olla

See eristamine paraneb ja aitab selle tulemusel suurendada ümberarvestuskurssi.

12. Optimeerige oma vorm mobiilse liikluse jaoks

Mobiilseadmete kasutajate plahvatuslik kasv esitab väljakutse veebisaitide ja sihtlehtede omanikele - pakkuda kvaliteetset UX-d neile, kes täidavad juhtvormi igasuguste seadmete abil. Seega on mõistlik investeerida selle kasvava kasutajate kategooria jaoks vormiväljadele.

Mõni täitmise väli nõuab andmete valimist pikast loendist võimalikud valikud... Liiga palju võib selle leidmise keeruliseks muuta vajalik teave ja provotseerida külastaja lahkumist lehelt. Seetõttu tuleks pliivormide rippmenüüd targalt kasutada. Kui andmeid on liiga palju, võib alternatiivina kasutada automaatse täitmise tehnoloogiaid.

Enamasti hõlmab vormide pikk rippmenüü elukohariigi valimist. Alternatiivseks võimaluseks võib sel juhul olla kasutaja piirkonna automaatne määramine IP-aadressi abil

14. Pärast juhtvormi täitmist tänan teid isikupärastamise elementidega leht

Andke kasutajale vormi täitmise tulemustest teada, konfigureerides vastava aktiveerimise. Kui külastaja on sisestanud oma nime, jättes kontaktteabe, võtke temaga ühendust nime abil ja - sõltuvalt taotletavatest turunduseesmärkidest - teavitage teda teiega edasise suhtlemise järjekorrast või muud asjakohast ja kasulikku teavet.

15. Kasutage lihtsat captcha-d

Ehkki captcha on rämpsposti vastu võitlemiseks üsna tõhus meede, tuleb meeles pidada, et kui kasutaja esimest korda seda õigesti ei sisesta, on väga tõenäoline, et ta keeldub täielikult teie vormi täitmast. Selliste tüütute arusaamatuste vältimiseks kasutage lihtsaid captchasid ja võimalust muuta sisendiks taotletud turvakoodi.

Võite kasutada ka lihtsat märkeruutu, mille puhul piisab, kui märkeruut näitab, et maandumislehe külastaja on reaalne inimene, mitte robot:

Näide märkeruutust kirjaga "Ma ei ole robot", mis aktiveeritakse, märkides selleks märgitud ruudu

Järeldus

Täiusliku sihtlehe kogemuse loomine tähendab sageli täiusliku juhtimisvormi kujundamist, millel on järgmised omadused:

• selle eesmärki saab pealkirja ja kirjelduse abil kiiresti ja ühemõtteliselt mõista;
• seda on lihtne täita;
• see on asjakohane ja suunatud konkreetsele sihtrühmale.

Ideaalsus sel juhul Peamiselt ei hõlma see uimastamist, vaid selle sihtlehe elemendi võimalust luua kontakt maandumislehe külastajaga. Lisaks kõigele sisaldab tõhus kontaktvorm kasutajale vajalikke viipasid ennetamiseks hellitatud eesmärk - enda kohta teabe edastamine.

Selles õpetuses teeme vormi nõutavatele väljadele kena väikese efekti. Enamik veebivorme on loodud minimaalse kujundusega, ainult kasutajaandmete kogumiseks. Mõelge, kui paljud külastajad keeldusid vormi täitmast, kuna see sisaldas paljusid välju. Kuid on ka palju vorme, mis valikulistes väljades küsivad lisateavet, mida külastaja soovib või peab esitama. Näiteks tellimisvormid või klassifikatsioonivormid.

Idee on esile tõsta ainult nõutavad väljad. Tavaliselt saab seda teha väikese * või sarnase sümboli abil. Kuid läheme edasi ja lisame interaktiivse efekti, et nõutavad väljad visuaalselt paremini esile tuua.

Idee valmimiseks pakime sildid ja vormiväljad kahte ossa, mis võimaldavad meil rakendada erinevaid efekte. Väliskonteineril on lisaklass, kui väli on nõutav ( af-nõutav):

Vaatame teise demo stiile, mis kasutavad valikuliste väljade peitmiseks skaleerimist. Vähendame teise konteineri kõrgust, kuna sisemine maht väheneb.

Lisage välimise konteineri jaoks üleminek, määrake fikseeritud kõrgus ja määrake eendite peitmiseks sisu peitmiseks, kui kõrgus väheneb.

Af-väline (ülevool: varjatud; kõrgus: 70 pikslit; kasti vari: 0 1 pikslit 0 # f5f5f5 sisestus; üleminek: kõik 0,5 s lineaarsed;)

Sisemise konteineri jaoks seadke ülemineku kese asendisse „keskele ülemine”, et näha, kuidas kõrgus väheneb. Esialgu seatakse skaala väärtuseks 1 (seda ei ole vaja seada):

Af-sisemine (polster: 15 pikslit 20 pikslit 15 pikslit 20 pikslit; teisendamise lähtepunkt: keskelt ülaosa; teisendus: skaala (1); üleminek: kõik 0,5 s on lineaarsed;)

Vormi ülaosas on nupp (märkeruut), millel on ID af-showreq... Nupule vajutamine muudab lisaväljade skaalat. Me kasutame pseudoklassi : mitte soovitud elementide saamiseks, kuid saate täiendavatele väljadele klassid seada ja neile juurde pääseda õdede-kombinaatorite kaudu.

Vähendame välimise konteineri kõrgust ja sisemise mõõtkava:

# af-showreq: kontrollitud ~ .af-vorm .af-välimine: pole (.af-nõutav) (kõrgus: 0px; nähtavus: peidetud;) # af-showreq: kontrollitud ~ .af-vorm .af-välimine: ei (. nõutav) .af-sisemine (teisendus: skaala (0); läbipaistmatus: 0;)

Kinnistu seadmine nähtavus: varjatud garanteerib, et saate klaviatuuri abil teistele väljadele üle minna. Siin ei saa kasutada kuva: puudub, sest üleminek ei toimi.