Formulář vyzkoušíte na počítači a vypadá dokonale. Plná šířka, dva sloupce, spousta místa. Pak zkusíte odeslat test na mobilu a hned vidíte, že je něco špatně. Pole jsou drobná. Klávesnice zakrývá půlku formuláře. Ťuknete do špatného pole. Celé to působí rozbitě.
Polovina vašich návštěvníků používá mobil. Pokud váš formulář není responzivní, přicházíte o polovinu odeslání. Tento článek ukazuje, jak navrhnout formuláře, které fungují na telefonech, tabletech i počítačích.
Mobilní formuláře se liší od formulářů na počítači
Uživatelé mobilů vyplňují formuláře jinak než uživatelé počítačů. Na počítači máte dost místa. Můžete použít vícesloupcové rozvržení. Popisky můžete dát vedle polí. Na mobilu záleží na každém pixelu.
Mobilní klávesnice je obrovská. Když se otevře, zakryje půlku obrazovky. Formulář se posune. Uživatel ztratí přehled. Tlačítko, které bylo vidět, je teď schované za klávesnicí.
Dotykové plochy musí být větší. Klikací oblast 14 krát 14 pixelů funguje s myší bez problémů. Prst potřebuje alespoň 48 krát 48 pixelů, jinak se uživatel netrefí.
Uživatelé mobilů mívají slabé připojení. Každé další načtení formuláře nebo obrázku zabere čas. Rychlost je důležitější než na počítači.
Jednosloupcové rozvržení formuláře
Nejbezpečnější responzivní formulář je jednosloupcový. Jedno pole na řádek, bez ohledu na velikost obrazovky.
Jednosloupcová rozvržení jsou jednoduchá, fungují na všech obrazovkách, nabízejí jednotný zážitek a jsou velmi předvídatelná. Hlavní nevýhodou je, že formuláře vypadají na počítači delší a vyžadují víc posouvání.
Většina formulářů by měla být jednosloupcová. Pokud má váš formulář pět polí, jeden sloupec je na počítači ve skutečnosti kratší než dvousloupcové rozvržení. Uživatel posouvá méně a vidí víc souvislostí.
Jednosloupcové rozvržení vytvoříte pomocí input, textarea, select { display: block; width: 100%; margin-bottom: 1rem; }. Všechno se tak na všech breakpointech poskládá pod sebe.
Dva sloupce na počítači, jeden na mobilu
Pokud chcete na velkých obrazovkách využít vodorovný prostor, použijte mřížku s .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } a media query @media (max-width: 768px) { .form-row { grid-template-columns: 1fr; } }. Na počítači tak vzniknou dva sloupce a na mobilu se pole poskládají do jednoho, takže rozvržení zůstane jednoduché a responzivní.
Seskupujte jen pole, která spolu skutečně souvisejí. Pole "Jméno" a "Příjmení" vedle sebe dávají smysl. Pole "Ulice" a "Země" vedle sebe ne.
Dotykové plochy a návrh pro prsty
Minimální dotyková plocha na mobilu je 44 krát 44 pixelů (podle Applu) nebo 48 krát 48 pixelů (Android). Mějte alespoň 44.
Velikost dotykové plochy platí pro vstupní pole, která musí být dost vysoká, aby se do nich dalo snadno ťuknout (dobrých je 40 až 50 pixelů), pro zaškrtávací a přepínací políčka, která mají ve výchozím stavu 13 krát 13 pixelů a pomocí CSS nebo JavaScriptu je zvětšete alespoň na 44 krát 44, pro tlačítka, která by měla mít alespoň 44 krát 44 pixelů s přidaným odsazením, a pro popisky, které musí mít také 44 krát 44 pixelů, pokud se na ně dá kliknout přes atribut for. Někdy tvoří celou dotykovou plochu popisek a pole dohromady.
Aby byla vstupní pole větší a snadněji se do nich ťukalo, použijte input[type="text"], input[type="email"], textarea { padding: 0.75rem; font-size: 1rem; }. Odsazení pole zvýší a zlepší jeho ovladatelnost.
Práce s klávesnicí
Na mobilu klávesnice prohlížeče zakrývá spodní polovinu obrazovky. Pokud je váš formulář dole na stránce, odesílací tlačítko se schová. Uživatel musí posunout stránku dolů nebo klávesnici zavřít, aby tlačítko viděl.
Držte formulář blízko horní části stránky. Nebo dejte odesílací tlačítko nahoru i dolů. Nezakrývejte klíčová tlačítka klávesnicí.
Důležitý je i typ klávesnice. U pole pro e-mail použijte <input type="email">, aby se zobrazila e-mailová klávesnice s klávesou @. U pole pro telefon použijte <input type="tel">, aby se zobrazila číselná klávesnice. Pro číselný vstup použijte <input type="number">, aby se zobrazila klávesnice s čísly. Správný typ pole nechá prohlížeč, aby klávesnici zvolil sám.
Když uživatel ťukne do pole, prohlížeč ho posune do zorného pole. To je dobře. Pole je vidět, když do něj potřebuje psát. Někdy ale může přeskočit jiný kontext. Vyzkoušejte formulář na skutečném telefonu a uvidíte, jak se chová.
Umístění popisků na mobilu
Na počítači mohou být popisky nad poli, vedle nich nebo uvnitř. Na mobilu je skoro vždy nejlepší nad polem.
Popisek nad polem je jasný. Uživatel nejdřív vidí popisek, potom pole. Na úzké obrazovce popisek vedle pole plýtvá vodorovným místem. Zástupný text uvnitř pole zmizí, jakmile začnete psát.
Osvědčený postup: dávejte popisky nad pole. Vždy.
<label for="email">Email</label>
<input type="email" id="email">
Mezery a odsazení
Responzivní formuláře potřebují na mobilu víc mezer, ne méně. Váš instinkt říká, že máte všechno stlačit, aby se to vešlo na obrazovku. Bojujte proti němu.
Používejte štědré odsazení a okraje: alespoň 1rem (16 pixelů) mezi poli, alespoň 0.75rem (12 pixelů) ze všech stran jako odsazení uvnitř pole a alespoň 1rem (16 pixelů) ze všech stran jako odsazení tlačítka. Štědré mezery usnadňují používání formulářů, snižují počet přehmatů, zlepšují čitelnost a na mobilu má volný prostor větší cenu než místo na obrazovce.
Velikost textu na mobilu
Pro vstupní pole používejte alespoň 16 pixelů. Menší text nutí uživatele přibližovat nebo přimhuřovat oči. 16 pixelů je výchozí hodnota a funguje.
Popisky mohou být menší, kolem 14 pixelů. Vstupní pole by ale měla mít minimálně 16 pixelů.
Některé prohlížeče se po ťuknutí do pole menšího než 16 pixelů automaticky přiblíží, takže formulář nečekaně poskočí. Tomu předejdete pomocí input { font-size: 16px; }.
Časté chyby v responzivních formulářích
Dvousloupcové rozvržení na všech velikostech obrazovky
Na mobilu jsou formuláře stlačené. Pole jsou drobná. Popisky se skládají nešikovně. Na menších breakpointech vždy přejděte na jeden sloupec.
Příliš malé dotykové plochy
Zaškrtávací a přepínací políčka a tlačítka musí mít alespoň 44 krát 44 pixelů. Vyzkoušejte je na skutečném telefonu. Pokud se musíte soustředit, abyste se trefili, je to příliš malé.
Zástupný text jako jediný popisek
Když uživatel začne psát, zástupný text zmizí. Zapomene, k čemu pole slouží. Vždy používejte řádný prvek label. Zástupný text si klidně nechte, ale nespoléhejte se jen na něj.
Formulář dole na dlouhé stránce
Uživatel sjede dolů ke kontaktnímu formuláři, ťukne do pole e-mailu a mobilní klávesnice formulář zakryje. Nevidí, co píše, a nedosáhne na odesílací tlačítko. Dávejte formuláře blízko začátku stránky nebo zajistěte, aby se i s klávesnicí vešly na obrazovku.
Netestování na skutečných mobilech
Váš prohlížeč na počítači má režim mobilního zobrazení. Je užitečný pro rychlou kontrolu. Neukáže ale, jak formulář skutečně funguje na telefonu. Testujte na opravdových zařízeních. Pokud žádné nemáte, půjčte si telefon.
Techniky pro responzivní formuláře
CSS Grid pro flexibilní rozvržení
Použijte .form-group { display: grid; gap: 0.5rem; } a .form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; }. Hodnoty auto-fit a minmax vytvoří rozvržení, které se přizpůsobuje dostupnému místu: pole se na úzké šířce poskládají pod sebe a na široké stojí vedle sebe.
Flexbox pro rozvržení tlačítek
Použijte .form-actions { display: flex; gap: 1rem; flex-wrap: wrap; } a .form-actions button { flex: 1; min-width: 150px; }. Tlačítka stojí na počítači vedle sebe, na mobilu se zalomí do více řádků a každé se roztáhne, aby vyplnilo dostupné místo.
Media queries pro konkrétní breakpointy
Použijte @media (max-width: 480px) { label { display: block; margin-bottom: 0.5rem; } input { width: 100%; } }, abyste na obrazovkách menších než 480 pixelů vynutili jednosloupcové rozvržení.
Jak se formuláře WEMASY přizpůsobí všem velikostem obrazovky
Tvůrce formulářů od WEMASY vytváří responzivní formuláře automaticky. Postavíte je na počítači a mobil je už vyřešený. Na telefonech se formuláře skládají do jednoho sloupce. Dotykové plochy mají velikost vhodnou pro mobil. Popisky a pole mají správné mezery. Žádná práce navíc.
Jak responzivita formulářů funguje, uvidíte ve svém tarifu WEMASY.