Form dizayni β bu veb sahifasining eng kritik elementlaridan biri. Form orqali foydalanuvchi siz bilan bog'lanadi, ro'yxatdan o'tadi, sotib oladi, izoh qoldiradi. Yaxshi dizayn qilingan form konversiyani sezilarli oshiradi. Yomon esa β foydalanuvchini quvib chiqaradi. Tadqiqotlarga ko'ra, formalar dizayni konversiya rate'iga 80%'gacha ta'sir qiladi. Form best practice'larini bilish veb dizayner uchun majburiy.
Form maydonlari soni
Kamroq β yaxshiroq. Har maydon foydalanuvchini bir qadam yo'qotadi. Tadqiqot: 11 ta maydon bo'lgan form 4 ta maydonli formaga nisbatan 120% kam konversiya beradi.
Strategiya: faqat zarur ma'lumotlarni so'rash. Ism, email, telefon β odatda yetadi. Manzil, kompaniya, yosh kabi qo'shimcha ma'lumotlarni keyingi bosqichda yoki ixtiyoriy qilish.
Label joylashish
Label β input ustida, ichida yoki yon tomonda. Eng yaxshi yondashuv β label inputning ustida. Foydalanuvchi tezda o'qib tushunadi.
Inline label (input ichida) β joy tejaydi, lekin foydalanuvchi typing boshlagach label yo'qoladi va u nimani yozayotganini esda saqlay olmasligi mumkin.
Float label β modern yondashuv. Boshida label ichida, typing boshlagach yuqoriga ko'tariladi.
Input field dizayn
Input field ko'rinarli va aniq bo'lishi shart. Border ko'rinishi (1-2px), padding katta (12-16px), border-radius modern (5-8px), focus state aniq (rang o'zgaradi, shadow qo'shiladi).
Width yetarli katta β foydalanuvchi typing qulay bo'lishi uchun.
Placeholder ishlatish
Placeholder β input ichidagi vaqtinchalik matn. Foydalanuvchi nima yozish kerakligini ko'rsatish.
Lekin placeholder label'ni almashtirmasin. Label majburiy. Placeholder qo'shimcha hint.
Misol: label \"Email manzil\", placeholder \"ali@misol.uz\".
Required va optional
Required fields aniq belgilangan bo'lishi shart. Klassik yondashuv β \"*\" belgi label yonida. Yangi yondashuv β \"(majburiy)\" yoki \"(ixtiyoriy)\" so'zlari bilan aniq belgilash.
Strategiya: ko'pchilik field required bo'lsa, faqat optional'larni belgilash. Ozchilik required bo'lsa, faqat required'larni belgilash.
Input types
HTML input type'lar β turli ma'lumot uchun mos input. Mobile'da bu juda muhim β to'g'ri klaviatura ko'rsatish.
type=\"email\" β email klaviatura @ belgisi bilan. type=\"tel\" β raqamli klaviatura. type=\"number\" β raqam. type=\"url\" β URL klaviatura. type=\"date\" β date picker.
Autocomplete attribut
autocomplete attribut foydalanuvchi avtomatik to'ldirish imkonini beradi. Bu konversiyani sezilarli oshiradi.
Misol: <input type=\"email\" autocomplete=\"email\">. Brauzer avval saqlangan email avtomatik to'ldiradi.
Boshqa autocomplete qiymatlari: name, given-name, family-name, tel, street-address, postal-code, country.
Inline validation
Form yuborilgandan keyin emas, balki har field uchun real-time validation. Foydalanuvchi typing tugatgach darhol fikrini olishi mumkin.
Strategiya: blur event'da validate (foydalanuvchi field'dan chiqqach). Real-time typing davomida emas β bu o'qish qiyin va asabni buzadi.
Error xabari
Error xabari aniq, do'stona va konstruktiv bo'lishi shart. \"Xato\" β yomon. \"Email noto'g'ri formatda. Misol: ali@misol.uz\" β yaxshi.
Joylashish: error xabari input ostida ko'rsatilsin. Error rangi qizil yoki to'q sariq. Icon bilan kuchaytirish mumkin.
Success state
Field to'g'ri to'ldirilganda yashil belgi yoki check icon. Foydalanuvchi to'g'ri qilayotganini biladi.
Positive feedback β formani to'ldirishni davom ettirishga undash.
Submit tugmasi
Submit tugmasi katta, yorqin va aniq matn bilan. \"Yuborish\" o'rniga \"Bog'laning\", \"Tariflarni ko'ring\", \"Hisob yaratish\".
Loading state: tugma bosilgach, \"Yuborilmoqda...\" matni va spinner. Disabled qilish ikki marta bosishni oldini olish.
Privacy va trust
Form ostida \"Sizning ma'lumotlaringiz xavfsiz\" matni. SSL belgi. Privacy policy link.
Foydalanuvchi ma'lumot yuborishdan oldin ishonchli bo'lishi shart.
Mobile form dizayn
Mobile'da form alohida e'tibor: katta input fields (min 48px height), katta tugmalar, input type to'g'ri (klaviatura), avto-zoom o'chirish (font-size 16px minimum).
One column layout β har field alohida qatorda. Mobile'da ikki column qiyin.
Accessibility
Form accessibility uchun: label har input bilan bog'langan (for/id), aria-label kerak bo'lsa, focus state aniq ko'rinishi, keyboard navigation ishlashi.
Screen reader testing β VoiceOver (Mac), NVDA (Windows), TalkBack (Android).
Form analitika
Form qaerda foydalanuvchini yo'qotayotganini bilish β analitika orqali. Google Analytics 4 form event'lari.
Hotjar form analysis β har field uchun completion rate, drop-off ko'rsatadi. Eng yomon field'larni aniqlash va yaxshilash.
A/B test formalar uchun
Form β A/B test uchun samarali. Test elementlari: maydon soni, label position, button text, button color, validation type.
Kichik o'zgartirish β katta konversiya farq. \"Submit\" β \"Get my free quote\" β 32% konversiya oshish (HubSpot).
Sayt.uz form strategiyasi
Sayt.uz formalarida har ehtimol kam maydon. Login: email + parol. Registratsiya: ism + email + parol. Hosting buyurtma: faqat zaruriy (domen, plan, to'lov).
Inline validation: email format, parol kuchi, mavjud foydalanuvchi tekshiruvi.
Mobile uchun: 16px font-size, input type'lar to'g'ri (email, tel), katta tugmalar, single column layout.
Natija: registratsiya konversiyasi 12% (sanoat 5-8%). Oddiy va aniq form β yaxshi natija.