A szükséges űrlapmezők kiemelése a CSS3 használatával. A fájlmezők (ZS) Y 2 jelölésű mezőinek kitöltési sorrendje kötelező

4. függelék
Vállalkozó neve: ___________________________________________

Sorsoláson vesz részt az előzetes kiválasztásban:

A RÉSZVÉTELI DOKUMENTUMOK LEÍRÁSA

Szinte minden modern és új weboldal rendelkezik űrlapokkal, amelyeket az oldal újratöltése nélkül ellenőriznek. Az úgynevezett kötelező űrlapmezők. De milyen módszereket használnak az ilyen formák létrehozására?

A közelmúltig a legnépszerűbb módszer a javascript használata volt. A Jquery érvényesítése nagyon hasznos könyvtár. Ez a módszer modern, de ehhez bizonyos készségekre és időre van szükség, hogy beillesztjük az oldal formájába.

Az adventtel html 5 és széles körű beilleszkedését a modern webhelyekbe, leállíthatja a javascript használatát. Ugyanakkor ahhoz, hogy az űrlap mezőjét kötelezővé tegye, csak hozzá kell adnia a szükséges attribútum.

A szükséges attribútummal a böngésző az űrlap benyújtása előtt ellenőrzi, hogy egy adott mező kitöltésre került-e vagy sem. Ha nem, akkor a felhasználót arra utasítják, hogy töltse ki a mezőt, vagy akár az összes űrlapmezőt.

És kevesebb, mint egy percig tart az ilyen mezők létrehozása.

Tegyük fel, hogy van egy kis forma:

Így néz ki a böngészőben:

Most néhány űrlapot kötelezővé teszünk:

Ez minden. Az összes szükséges mezőt kevesebb, mint 1 perc alatt elkészítettük. Ha nem tölti ki a kötelező mezőket, akkor a következő üzeneteket fogjuk látni:

És ami nagyon fontos. Ez az ellenőrzés az összes modern böngészőben működik, és csak a html 5 specifikációnál érvényes. Inicializálatlan esetén - a html kód elején be kell helyeznie a címkét..

Bármely digitális marketingszakértő tudja, hogy a céloldal felhasználói élménye fontos lépés az átalakulás felé. És ebben a folyamatban jelentős szerepet játszik, mivel nemcsak a társaság általános benyomása függ a teljesítményétől, hanem az is, hogy a vonzott felhasználó az oldalon marad-e, vagy eljut-e a versenytárs céloldalához.

Ezért az űrlap kialakítása visszacsatolás különös figyelmet kell fordítania, még akkor is, ha egyszerű, és nem tartalmaz sok kitöltendő mezőt. Ebben a cikkben röviden áttekintjük 15 kritikus pontot a tökéletes kapcsolatfelvételi forma létrehozásában.

És annak érdekében, hogy a beérkezett anyagokat és a gyakorlatot szilárdítsák meg képességeikben, tartalmazzák az összes szükséges műszaki funkcionalitást a sokféle ólomforma létrehozásához.

1. Világos és tömör cím

A cím fő célja, hogy néhány lényeges szót közvetítsen a lényegre, elkerülve a díszes mondatokat és az összetett mondatokat. Ideális esetben a látogatónak egyértelműen és egyértelműen meg kell értenie, mi az a vezető forma, csak annak címe alapján.

Noha egy jó címsor magyarázza az űrlap célját, az informatív leírás tovább motiválhatja azokat a látogatókat, akiknek kétségeik vannak az űrlap kitöltésével. Ez úgy érhető el, ha 2 stratégiai szempontból fontos pontot tartalmaz a szövegbe:

• pontosan mi szükséges a felhasználótól;
• pontosan mit fog kapni a látogató a várt műveletek elvégzése után.

Cím: "Töltse ki az űrlapot, ha katalógust szeretne kapni a gyártótól." Leírás: “Siess! Töltse ki az űrlapot a nap vége előtt és 20% kedvezményt kap. " A teljes nyitóoldal lehetséges.

3. Senki sem szereti kitölteni a hosszú űrlapokat.

Ne terhelje túl az űrlapot több mezővel, hogy feleslegesen kitöltse. Csak azokat használja, amelyek kritikusak a vállalkozása számára. Amikor csak lehetséges, kerülje a kért információk megkettőzését (például "E-mail" és "E-mail megerősítése"). A személyes és személyes adatok (például "Telefonszám", "Cím" vagy "Cég neve") iránti kérelmeket nem szabad visszaélni. Ha ennek ellenére ilyen mezők vannak, tájékoztassa a felhasználót (szövegesen és grafikusan) arról, hogy személyes adatai biztonságosan védettek és nem kerülnek továbbadásra harmadik fél számára.

Az alábbiakban 2 kép látható, amely egy hosszú és rövid ólom formáját szemlélteti:

Nem nehéz kitalálni, melyik fenti űrlapot valószínűleg kitölti a céloldal látogatója. A túlnyomó többség nyilvánvalóan zavarban lesz, amikor felismeri, hogy annyi adatot kell szolgáltatni, amelyek nagy része valószínűleg felesleges.

4. Helyezze a szöveges címkéket a bal oldalon a kitöltendő mezők fölé

A felhasználással végzett kutatások azt mutatják, hogy a mezők feletti mezősorok jobban teljesítenek, mint a jobb oldali igazítás vagy a bal oldali mezők elhelyezése a megfelelő mezőkkel szemben. Ha kompaktabbá vagy vizuálisan rövidebbé kell tennie, a címkenevek a mezőkbe helyezhetők, balra igazítva (ebben az esetben helyőrzőkként működnek):

5. Jelentős feliratok a CTA-gombra

• a vezető űrlap tartalmához kapcsolódik és
• mutassa meg, mit fog kapni egy ember a CTA gomb megnyomása után.

6. Helyezze az űrlapot az első képernyőre

A logika egyszerű: ha egy látogató az oldal betöltése után azonnal lát egy űrlapot, akkor nagyobb valószínűséggel figyel rá, ami viszont növelheti az átalakítást. Ha az űrlapot az úgynevezett űrlap alá helyezi, növeli annak valószínűségét, hogy a felhasználó soha nem fogja elérni azt. Még rosszabb, ha az alak az első és a második képernyő kereszteződésén van. Ebben az esetben rendkívül kényelmetlen kitölteni.

7. Segítsen a látogatóknak kitölteni a kapcsolatfelvételi űrlapot

9. A kitöltött mezők kiemelése

A hibaüzenetek mellett tanácsos kiemelni azt a mezőt, amelyet a felhasználó jelenleg észrevehető (de nem piros) színben tölt ki. Ez lehetővé teszi számára, hogy elvonja figyelmét, hogy gyorsan visszatérjen az ólomforma azon részéhez, ahol elhagyta.

Ezenkívül kiegészítheti a fent leírt technikát azáltal, hogy beállítja az automatikus kurzor-elhelyezést, és kiemelte az első kitöltendő mezőben. Egy ilyen apróság nem csak időt takarít meg, hanem finoman ösztönöz téged a konverziós művelet felé:

10. Betűtípus és méret, valamint a háttér színe

Az ideális visszacsatolási forma egyik fontos követelménye az olvashatóság, amelyet úgy lehet elérni, hogy elkerüljük a túl egzotikus betűtípusokat és színeket, amelyek megnehezítik az olvasást (például fehér szöveg világosszürke alapon).

11. A kitöltéshez szükséges és opcionális mezők differenciálása

A szükséges mezők azonosítása a csillaggal (*) történő jelölés legjobb módja:

Az LPgenerator vezető űrlapszerkesztőjében különböző konfigurációkat állíthat be a Név, Vezetéknév, Életkor, E-mail, Dátum és Url mezőkhöz, beleértve a szükséges mező megjelölését (2. opció)

A kötelező mezőket csillagok jelzik. A teljes nyitóoldal lehet

Ez a differenciálás javul, és ennek eredményeként hozzájárul az átváltási arány növeléséhez.

12. Optimalizálja az űrlapját a mobil forgalomhoz

A mobil felhasználók robbanásszerű növekedése félelmetes kihívást jelent a weboldalak és a céloldalak tulajdonosai számára - magas színvonalú UX-t kell biztosítani azok számára, akik mindenféle eszközzel kitöltik az űrlapot. Ezért van értelme űrlapmezőkbe fektetni a növekvő felhasználói kategóriába.

Egyes kitöltési mezőkhöz az adatok kiválasztása szükséges egy hosszú listából lehetséges lehetőségek... A túl sok megnehezítheti a megtalálást szükséges információ és provokálja a látogató távozását az oldalról. Ezért az ólomformák legördülő menüit okosan kell használni. Ha túl sok az adat, akkor az automatikus kitöltési technológiák használhatók alternatívaként.

Leggyakrabban egy hosszú, legördülő menü az űrlapokban magában foglalja a lakóhely országának kiválasztását. Alternatív lehetőség ebben az esetben a felhasználó régiójának automatikus meghatározása az IP-cím használatával

14. Köszönöm az egyéni elemekkel ellátott oldalt az űrlap kitöltése után

Tájékoztassa a felhasználót az űrlap kitöltésének eredményéről az aktiválás megfelelő konfigurálásával. Ha a látogató megadta a nevét, és elérhetőségi adatait hagyja, vegye fel velünk a kapcsolatot névvel, és - a kitűzött marketing céloktól függően - tájékoztassa őt a vele való további interakciójának sorrendjéről, vagy más releváns és hasznos információkról.

15. Használjon egy egyszerű captcha-t

Bár a captcha meglehetősen hatékony intézkedés a spam ellen, emlékeztetni kell arra, hogy ha a felhasználó nem adta meg helyesen az első alkalommal, nagy valószínűséggel megtagadja az űrlap kitöltését. Az ilyen bosszantó félreértések elkerülése érdekében használjon egyszerű captchas szoftvert, és módosítsa a bevitelre kért biztonsági kódot.

Használhat egy egyszerű jelölőnégyzetet is, melyben elegendő jelölni a jelölőnégyzetet, jelezve, hogy a céloldal látogatója valós személy, nem pedig robot:

Példa egy „I`m not robot” feliratú jelölőnégyzetre, amelyet úgy aktiválnak, hogy megjelöli a négyzetet a dedikált négyzet mezőben

Következtetés

A tökéletes céloldal élményének megteremtése gyakran a tökéletes ólomforma megtervezéséhez vezet, amelynek a következő tulajdonságokkal rendelkezik:

• célja gyorsan és egyértelműen megérthető a címben és a leírásban;
• könnyű kitölteni;
• releváns és egy adott célközönséghez van célzva.

Idealitás ez az eset nem elsősorban a lenyűgöző kialakítást jelenti, hanem ennek a céloldal-elemnek a képességét, hogy "kapcsolatot létesítsen" a nyitóoldal látogatójával. Mindezek mellett a hatékony kapcsolatfelvételi űrlap olyan felszólításokat is tartalmaz, amelyek a felhasználó számára szükségesek a megelőzésre ápolott cél - magaddal kapcsolatos információk jelentése.

Ebben az oktatóanyagban szép kis hatást hozunk létre az űrlap kötelező mezőihez. A legtöbb webes űrlapot minimális tervezéssel tervezték, csak a felhasználói adatok gyűjtésére. Gondolj arra, hogy hány látogató feladta az űrlapot, mert sok mezőt tartalmazott. De vannak olyan formák is, amelyek kiegészítő információkat kérnek az opcionális mezőkben, amelyeket a látogató meg akar adni. Például megrendelőlapok vagy osztályozási nyomtatványok.

Az ötlet az, hogy csak a szükséges mezőket emelje ki. Ez általában egy kicsi * vagy hasonló szimbólum használatával valósítható meg. De megyünk előre, és hozzáadunk egy interaktív hatást a kívánt mezők jobb megjelenítéséhez.

Az ötlet megvalósításához a címkéket és az űrlapmezőket két részre csomagoljuk, amelyek lehetővé teszik a különböző effektusok alkalmazását. A külső tartálynak további osztálya lesz, ha a mező kötelező ( af-köteles):

Nézzük meg a második bemutató stílusát, amely a méretezést használja az opcionális mezők elrejtéséhez. Csökkentjük a másik tartály magasságát, mivel a belső tartály lecsökken.

Adjon hozzá egy átmenetet a külső tartályhoz, határozza meg a rögzített magasságot, és állítsa be a kiálló részek elrejtését, hogy elrejtsék a tartalmat, ha a magasság csökken.

Af-külső (túlcsordulás: rejtett; magasság: 70 képpont; doboz-árnyék: 0 1 képpont 0 # f5f5f5 beillesztés; átmenet: mind a 0,5 s lineáris;)

A belső tartály esetében állítsa az átmeneti közepet „középső tetejére”, hogy megnézze, hogyan csökken a magasság. A skálát kezdetben 1-re állítják (nem szükséges beállítani):

Af-belső (párnázás: 15 képpontos 20 képpontos, 15 képpontos 20 képpontos; transzformáció-origó: középső felső; transzformáció: méretarány (1); átmenet: mind a 0,5-es lineáris;)

Az űrlap tetején található egy gomb (jelölőnégyzet) azonosítóval af-showreq... A gomb megnyomása megváltoztatja a további mezők skáláját. Az álnevet használjuk : nem hogy megszerezze a kívánt elemeket, de osztályokat állíthat be további mezőkhöz, és testvéri kombinátorokon keresztül érheti el őket.

Csökkentse a külső tartály magasságát és a belső méretét:

# af-showreq: ellenőrzött ~ .af-form .af-külső: nem (.af-szükséges) (magasság: 0px; láthatóság: rejtett;) # af-showreq: ellenőrzött ~ .af-form .af-külső: nem (. kötelező) .af-belső (transzformáció: skála (0); átlátszóság: 0;)

Tulajdonság beállítása láthatóság: rejtett garantálja, hogy a billentyűzet segítségével válthat más mezőkre. Itt nem használható kijelző: nincs, mert az átmenet nem fog működni.