CSS3 yordamida kerakli shakl maydonlarini ajratib ko'rsatish. Fayl maydonlarini to'ldirish tartibi (ZS) Y 2 belgilangan maydonlar talab qilinadi.

4-ilova
Pudratchining nomi: ______________________________________________________

Ishtirok etadi oldindan tanlash lot bo'yicha:

ISHTIROKCHI HUJJATLARI RO'YXATI

Deyarli barcha zamonaviy va yangi saytlarda sahifani qayta yuklamasdan to'ldirilishi tekshiriladigan shakllar mavjud. Majburiy shakl maydonlari deb ataladi. Ammo bunday shakllarni yaratish uchun qanday usullar qo'llaniladi?

Yaqin vaqtgacha eng mashhur usul JavaScript-dan foydalanish edi. Juda qulay kutubxona bu jQuery tekshiruvidir. Bu usul zamonaviy, lekin uni saytdagi shaklga integratsiya qilish uchun biroz mahorat va vaqt talab etiladi.

Kelishi bilan html 5 va uning zamonaviy veb-saytlarga keng integratsiyalashuvi tufayli siz javascriptdan foydalanishni rad qilishingiz mumkin. Bundan tashqari, formadagi maydonni majburiy qilish uchun siz faqat qo'shishingiz kerak zarur atribut.

Kerakli atribut bilan brauzer shaklni yuborishdan oldin ma'lum bir maydon to'ldirilgan yoki to'ldirilganligini tekshiradi. Agar yo'q bo'lsa, foydalanuvchiga maydonni yoki hatto shaklning barcha maydonlarini to'ldirish buyuriladi.

Va bunday maydonlarni yaratish uchun bir daqiqadan ko'proq vaqt kerak bo'lmaydi.

Shunday qilib, kichik bir shakl bor deylik:

Bu brauzerda shunday ko'rinadi:

Endi biz formadagi ba'zi maydonlarni majburiy qilamiz:

Ana xolos. Biz 1 daqiqadan kamroq vaqt ichida barcha maydonlarni majburiy qilib qo'ydik. Agar biz kerakli maydonlarni to'ldirmasak, biz quyidagi xabarlarni ko'ramiz:

Va muhimi. Bu tekshirish barcha zamonaviy brauzerlarda va faqat html 5 spetsifikatsiyasi uchun ishlaydi.Tinitilmaganlar uchun html kodining boshiga teg qo'yish kerak..

Har qanday internet sotuvchisi ochilish sahifasi bilan o'zaro aloqada bo'lgan foydalanuvchi tajribasi konvertatsiya qilish uchun muhim qadam ekanligini biladi. Va bu jarayonda u muhim rol o'ynaydi, chunki kompaniyaning umumiy taassurotlari nafaqat uning ishlashiga, balki jalb qilingan foydalanuvchi sahifada qolishi yoki raqibning ochilish sahifasiga o'tishiga bog'liq.

Shu sababli, shaklni ishlab chiqish fikr-mulohaza oddiy va to'ldirish uchun ko'p maydonlarni o'z ichiga olmasa ham, alohida e'tibor berishingiz kerak. Ushbu maqolada biz mukammal aloqa shaklini yaratish uchun muhim bo'lgan 15 nuqtani qisqacha ko'rib chiqamiz.

Va olingan materialni birlashtirish va o'z mahoratingizni mashq qilish uchun u turli xil qo'rg'oshin shakllarini yaratish uchun barcha kerakli texnik funktsiyalarni o'z ichiga oladi.

1. Aniq va qisqa sarlavha

Sarlavhaning asosiy maqsadi gulli iboralar va murakkab jumlalardan qochib, bir necha so'z bilan mohiyatni etkazishdir. Ideal holda, tashrif buyuruvchi sarlavhasiga qarab, asosiy shakl nima uchun ekanligini aniq va aniq tushunishi kerak.

Yaxshi sarlavha etakchi shaklning maqsadini tushuntirsa-da, ma'lumotli tavsif uni to'ldirishga ikkilanayotgan tashrif buyuruvchilarni yanada rag'batlantirishi mumkin. Bunga matnga ikkita strategik muhim nuqtani kiritish orqali erishish mumkin:

• foydalanuvchidan aniq nima talab qilinadi;
• mehmon undan kutilgan harakatlarni bajargandan so'ng aniq nimani oladi.

Sarlavha: "Ishlab chiqaruvchidan narxlar ko'rsatilgan katalogni olish uchun shaklni to'ldiring." Tavsif: “Shoshiling! Shaklni kun oxirigacha to‘ldiring va 20% chegirmaga ega bo‘ling”. To'liq ochilish sahifasi mumkin.

3. Hech kim uzun shakllarni to'ldirishni yoqtirmaydi.

Etakchi shaklni keraksiz to'ldirish uchun ko'plab maydonlar bilan ortiqcha yuklamasligingiz kerak. Faqat biznesingiz uchun muhim bo'lganlardan foydalaning. Iloji bo'lsa, so'ralgan ma'lumotlarni takrorlashdan saqlaning (masalan, "Elektron pochta" va "Elektron pochtani tasdiqlash"). Shaxsiy va shaxsiy ma'lumotlar so'rovlari (masalan, "telefon raqami", "manzil" yoki "kompaniya nomi") ortiqcha ishlatilmasligi kerak. Agar bunday maydonlar hali ham mavjud bo'lsa, foydalanuvchiga uning shaxsiy ma'lumotlari xavfsiz tarzda himoyalanganligi va uchinchi shaxsga o'tkazilmasligi haqida xabar bering (matn va grafik).

Quyida uzun va qisqa qo'rg'oshin shaklini ko'rsatadigan 2 ta rasm mavjud:

Yuqoridagi shakllardan qaysi biri ochilish sahifasiga tashrif buyuruvchi tomonidan osonroq to'ldirilishini taxmin qilish oson. Ko'pchilik juda ko'p ma'lumotlarni taqdim etish zaruratidan xijolat bo'ladi, ularning aksariyati keraksiz bo'lishi mumkin.

4. To'ldiriladigan yuqoridagi chapdagi maydonlarga matn teglarini joylashtiring

dan foydalangan holda olib borilgan tadqiqotlar shuni ko'rsatadiki, maydonlar ustida joylashgan maydon sarlavhalari ularni mos keladigan maydonlarning o'ng tomoniga yoki chap tomoniga joylashtirishdan ko'ra yaxshiroq ishlaydi. Shaklni yanada ixcham yoki vizual ravishda qisqartirish kerak bo'lsa, yorliq nomlari maydonlar ichiga, chapga tekislangan holda joylashtirilishi mumkin (bu holda ular to'ldiruvchi sifatida ishlaydi):

5. CTA tugmasidagi mazmunli sarlavhalar

• etakchi shakli mazmuni bilan bog'liq va
• CTA tugmasini bosgandan so'ng odam nima olishini ko'rsating.

6. Shaklni birinchi ekranga joylashtiring

Bu erda mantiq oddiy: agar tashrif buyuruvchi sahifani yuklagandan so'ng darhol etakchi shaklni ko'rsa, u unga ko'proq e'tibor beradi, bu esa o'z navbatida konversiyani oshirishi mumkin. Shaklni deb atalmishning ostiga qo'yish orqali siz foydalanuvchi unga hech qachon erisha olmasligi ehtimolini oshirasiz. Agar forma birinchi va ikkinchi ekranlar kesishgan joyda joylashgan bo'lsa, bundan ham yomoni. Bunday holda, to'ldirish juda noqulay.

7. Tashrif buyuruvchilarga aloqa formasini to‘ldirishda yordam bering

9. To'ldiriladigan maydonlarni ajratib ko'rsatish

Xato xabarlariga qo'shimcha ravishda, foydalanuvchi to'ldiradigan maydonni sezilarli (lekin qizil emas) rang bilan ajratib ko'rsatish tavsiya etiladi. bu daqiqa. Bu unga chalg'igan taqdirda, u to'xtatilgan etakchi shaklining qismiga tezda qaytishga imkon beradi.

Bunga qo'shimcha ravishda, siz kursorni avtomatik joylashtirish va to'ldiriladigan birinchi maydonda ta'kidlashni o'rnatish orqali yuqorida tavsiflangan texnikani to'ldirishingiz mumkin. Bu kichik tafsilot nafaqat vaqtni tejaydi, balki konversiya harakatini bemalol rag'batlantiradi:

10. Shrift uslubi va hajmi, shuningdek, fon rangi

Ideal fikr-mulohaza shaklining muhim talablaridan biri uning o'qilishidir, bunga o'qishni qiyinlashtiradigan juda ekzotik shriftlar va rang sxemalaridan foydalanishdan qochish orqali erishish mumkin (masalan, ochiq kulrang fonda oq matn).

11. Majburiy va ixtiyoriy to'ldiriladigan maydonlarni farqlash

Majburiy maydonlarni aniqlashning eng yaxshi usuli ularni yulduzcha (*) bilan belgilashdir:

LPgenerator-ning etakchi shakl muharririda siz Ism, Familiya, Yosh, Elektron pochta, Sana va Url maydonlari uchun turli xil konfiguratsiyalarni o'rnatishingiz mumkin, shu jumladan maydonni kerak bo'lganda belgilashingiz mumkin (variant № 2)

Majburiy maydonlar yulduzcha bilan belgilangan. Butun ochilish sahifasi bo'lishi mumkin

Bu farq yaxshilanadi va natijada yuqori konversiya stavkalariga yordam beradi.

12. Shaklingizni mobil trafik uchun optimallashtiring

Foydalanuvchilarning tez o'sishi mobil qurilmalar veb-saytlar va ochilish sahifalari egalari uchun turli xil qurilmalardan foydalangan holda etakchi shaklni to'ldirganlar uchun yuqori sifatli UX bilan ta'minlash qiyin vazifani qo'yadi. Shu sababli, ushbu o'sib borayotgan foydalanuvchilar toifasi uchun shakl maydonlariga sarmoya kiritish mantiqan.

Ba'zi maydonlar uzoq ro'yxatdan ma'lumotlarni tanlashni talab qiladi mumkin bo'lgan variantlar. Agar ular juda ko'p bo'lsa, topish qiyin bo'lishi mumkin zarur ma'lumotlar va tashrif buyuruvchining sahifani tark etishiga sabab bo'ladi. Shuning uchun, qo'rg'oshin shakllaridagi ochiladigan menyulardan oqilona foydalanish kerak. Agar ma'lumotlar juda ko'p bo'lsa, muqobil ravishda avtomatik yakunlash texnologiyalaridan foydalanish mumkin.

Ko'pincha, shakllardagi uzoq ochiladigan menyu sizning yashash joyingizni tanlashingizni talab qiladi. Bu holda muqobil variant IP-manzil yordamida foydalanuvchi hududini avtomatik aniqlash bo'lishi mumkin

14. Etakchi shaklni to'ldirgandan so'ng shaxsiylashtirish elementlari bilan rahmat sahifasi

Tegishli faollashtirishni sozlash orqali foydalanuvchiga shaklni to'ldirish natijalari haqida xabar bering. Agar tashrif buyuruvchi kontakt ma'lumotlarini qoldirayotganda o'z ismini kiritgan bo'lsa, ularga ism bilan murojaat qiling va marketing maqsadlaringizga qarab, ular bilan qanday munosabatda bo'lishingizni yoki boshqa tegishli va foydali ma'lumotlarni ayting.

15. Oddiy captcha dan foydalaning

Captcha spamga qarshi juda samarali chora bo'lsa-da, agar foydalanuvchi uni birinchi marta to'g'ri kirita olmasa, u sizning shaklingizni butunlay to'ldirishdan bosh tortishi ehtimoli yuqori ekanligini yodda tutishingiz kerak. Bunday zerikarli tushunmovchiliklarning oldini olish uchun oddiy captchalar va kirish uchun so'ralgan xavfsizlik kodini o'zgartirish qobiliyatidan foydalaning.

Shuningdek, siz oddiy katakchadan foydalanishingiz mumkin, unda siz ochilish sahifasiga tashrif buyuruvchi robot emas, balki haqiqiy shaxs ekanligini ko'rsatish uchun katakchani belgilashingiz kerak:

Buning uchun ajratilgan kvadrat katakchani belgilash orqali faollashtirilgan "Men robot emasman" yozuvi bo'lgan katakchaga misol.

Xulosa

Mukammal ochilish sahifasi tajribasini yaratish ko'pincha quyidagi xususiyatlarga ega bo'lgan mukammal etakchi shaklni loyihalashdan iborat:

• uning maqsadini sarlavha va tavsifdan tez va aniq tushunish mumkin;
• to'ldirish oson;
• u tegishli va muayyan maqsadli auditoriyaga qaratilgan.

Ideal Ushbu holatda Bu, birinchi navbatda, ajoyib dizaynni anglatmaydi, balki ushbu ochilish sahifasi elementining ochilish sahifasiga tashrif buyuruvchi bilan "aloqaga kirishi" qobiliyatini anglatadi. Bundan tashqari, samarali aloqa formasida foydalanuvchi oldini olish uchun zarur bo'lgan maslahatlar mavjud qadrli maqsad- o'zingiz haqingizda ma'lumot berish.

Ushbu qo'llanmada biz shakldagi kerakli maydonlar uchun kichik ko'zni qamashtiruvchi effekt yaratamiz. Aksariyat veb-shakllar minimal tarzda ishlab chiqilgan, faqat foydalanuvchi ma'lumotlarini yig'ish uchun. Qanchalik tashrif buyuruvchilar shaklni to'ldirishdan voz kechganini o'ylab ko'ring, chunki unda juda ko'p maydonlar mavjud. Ammo tashrif buyuruvchi ixtiyoriy sohalarda taqdim etishi kerak bo'lgan qo'shimcha ma'lumotlarni so'raydigan ko'plab shakllar ham mavjud. Masalan, buyurtma shakllari yoki tasniflash shakllari.

Maqsad faqat kerakli maydonlarni ajratib ko'rsatishdir. Ushbu muammo odatda kichik * yoki shunga o'xshash belgini o'rnatish orqali hal qilinadi. Ammo biz oldinga boramiz va kerakli maydonlarni vizual ravishda yaxshiroq ta'kidlash uchun interaktiv effekt qo'shamiz.

G'oyani amalga oshirish uchun yorliqlarni va shakl maydonlarini ikkita div elementiga o'rab olamiz, bu bizga turli effektlarni qo'llash imkonini beradi. Agar maydon kerak bo'lsa, tashqi konteyner qo'shimcha sinfga ega bo'ladi ( af - talab qilinadi):

Keling, ixtiyoriy maydonlarni yashirish uchun masshtablashdan foydalanadigan ikkinchi demo misolining uslubini ko'rib chiqaylik. Biz boshqa idishning balandligini ichki qismi pastga tushganda kamaytiramiz.

Keling, tashqi idish uchun o'tish joyini qo'shamiz, belgilangan balandlikni aniqlaymiz va balandlik pasayganda tarkibni yashirish uchun chiqadigan terini o'rnatamiz.

Af-tashqi (toshib ketish: yashirin; balandlik: 70px; quti soyasi: 0 1px 0 #f5f5f5 inset; oʻtish: hammasi 0,5s chiziqli; )

Ichki idish uchun balandlikni pasaytirish jarayonini ko'rishimiz uchun o'tish markazini "markazning tepasiga" o'rnating. Dastlab shkala 1 ga o'rnatiladi (uni o'rnatish shart emas):

Af-ichki ( to'ldirish: 15px 20px 15px 20px; transform-kelib chiqishi: markazning tepasi; transform: masshtab(1); o'tish: hammasi 0,5s chiziqli; )

Shaklning yuqori qismida identifikatorli tugma (tasdiqlash qutisi) mavjud af-showreq. Tugmani bosganingizda, qo'shimcha maydonlar shkalasi o'zgaradi. Biz psevdo sinfdan foydalanamiz :yo'q kerakli elementlarni olish uchun, lekin siz qo'shimcha maydonlar uchun sinflarni o'rnatishingiz va ularga nisbiy kombinatorlar orqali kirishingiz mumkin.

Keling, tashqi idishning balandligini va ichki idishning masshtabini kamaytiraylik:

#af-showreq:checked ~ .af-form .af-outer:not(.af-talab) (balandlik: 0px; ko'rish: yashirin; ) #af-showreq:checked ~ .af-form .af-tashqi:yo'q (.af-kerak).af-ichki ( transform: shkala(0); noaniqlik: 0; )

Mulkni sozlash ko'rinish: yashirin klaviatura yordamida boshqa maydonlarga o'tishni kafolatlaydi. Bu yerda foydalanish mumkin emas ko'rsatish: yo'q, chunki o'tish ishlamaydi.