Týdny jste ladili barvy, písma a mezery na webu. Pak jste vložili formulář, který vypadá, jako by pocházel z úplně jiného webu. Jiné písmo, jiná barva tlačítka, jiný styl ohraničení. Návštěvníci si nesouladu všimnou, i když nedokážou pojmenovat, co jim nesedí.
Styl formuláře je způsob, jak tu mezeru zavřít. Zahrnuje všechno vizuální: velikost polí, písmo popisků, barvy tlačítek, zaoblení rohů, mezery mezi prvky i to, jak se formulář chová na různých obrazovkách. Když to uděláte dobře, formulář působí na webu přirozeně. Když ne, klesne počet dokončených formulářů.
Tady je návod, jak formuláře stylovat pomocí vizuálních nástrojů a CSS a na co se zaměřit, aby byl dopad největší.
Co je styl formuláře?
Styl formuláře je soubor vizuálních rozhodnutí, která se použijí na prvky webového formuláře. Patří sem typografie popisků a textu v polích, barvy polí a tlačítek, mezery mezi skupinami polí, styl ohraničení, stavy při zaměření a vzhled chybových hlášek.
Stylovat lze každý prvek formuláře: textová pole, rozbalovací nabídky, zaškrtávací a přepínací políčka, oblasti pro nahrání souboru i odesílací tlačítka. Jednotný styl všech těchto prvků dělá formulář soudržný a profesionální.
Styl formuláře je oddělený od jeho struktury. Můžete mít dobře uspořádaný formulář s hrozným stylem, nebo krásně nastylovaný formulář se zmatenou posloupností polí. Důležité jsou obojí, ale styl je to, co návštěvníci posuzují během první vteřiny.
Možnosti stylování bez kódu
Většina tvůrců formulářů obsahuje vizuální editor stylu, který umožňuje upravit vzhled bez CSS. Barvy, písma, zaoblení rohů a styly tlačítek vybíráte v panelu nastavení. Změny se zobrazují hned.
Začněte tím, že formulář přizpůsobíte stávajícímu designu webu. Použijte stejnou rodinu písma, hlavní barvu pro odesílací tlačítko a stejné zaoblení rohů, jaké mají jiné prvky na webu, třeba karty nebo tlačítka.
Tvůrce formulářů od WEMASY nabízí ovládání stylu přímo v tvůrci webů, takže formuláře automaticky přebírají nastavení designu vašeho webu. Pokud konkrétní formulář potřebuje jiný vzhled, upravte ho odtud.
Úpravy pomocí CSS pro pokročilé ovládání
Když vizuální editor nestačí, CSS vám dává plnou kontrolu nad každým detailem. Vlastní CSS cílí na konkrétní prvky formuláře pomocí tříd nebo ID, které tvůrce formulářů vygeneruje.
Běžné úpravy pomocí CSS zahrnují změnu výšky a odsazení polí, stylování stavu při zaměření barevným světélkujícím ohraničením, úpravu barvy zástupného textu, vlastní vzhled zaškrtávacích a přepínacích políček a efekty po najetí myší na odesílací tlačítko.
Pokud používáte vlastní CSS, ponechte si zálohu výchozích stylů. Přepsání stylů se může rozbít, když tvůrce formulářů změní strukturu svého HTML. Zapište si, které styly jste změnili a proč, aby vás budoucí aktualizace nezaskočily.
Osvědčené postupy pro styl formulářů
Sladěte formulář s webem, ne s trendem. Zaoblená pole a tlačítka s přechodem vypadají moderně, ale jen když sedí k vašemu stávajícímu designu. Web advokátní kanceláře s hravým, barevným stylem formuláře působí rušivě.
Odesílací tlačítko musí vyniknout. Mělo by být vizuálně nejvýraznějším prvkem formuláře. Použijte hlavní barvu značky, na mobilu ho natáhněte na celou šířku a dejte mu dost odsazení, aby se do něj snadno ťukalo.
Popisky nechte viditelné. Zástupný text popisky nenahrazuje. Nastylované popisky nad každým polem zlepšují přístupnost a snižují počet chyb. Pokud používáte plovoucí popisky, vyzkoušejte, že zůstanou čitelné, když je pole zaměřené a vyplněné.
Chybové stavy stylujte jasně. Červené ohraničení, červený text nebo ikona vedle neplatných polí pomáhají návštěvníkům rychle opravit chyby. Nenápadný styl chyb se přehlédne a návštěvníci formulář frustrovaně opustí.
Testujte na mobilu. Formulář, který na počítači vypadá vypiplaně, se může na telefonu rozbít, pokud šířky polí, velikosti písma nebo umístění tlačítek nejsou responzivní. Stylujte s mobilem jako hlavním plátnem, ne jako dodatečnou myšlenkou.
Časté chyby ve stylu formulářů
Nejčastější chybou je výchozí styl tvůrce formulářů bez jakýchkoli úprav. Výchozí styly jsou navržené jako obecné, takže málokdy odpovídají vaší značce. Strávte deset minut v nastavení stylu a formulář hned vypadá profesionálněji.
Škodí i přehnané stylování. Nadměrné stíny, animace a dekorativní prvky odvádějí pozornost od účelu formuláře. Návštěvníci sem přišli odeslat informace, ne obdivovat designové ozdoby. Čisté a jasné vítězí nad vychytralým a přeplněným.
Ignorování stavů při zaměření způsobuje problémy s přístupností. Návštěvníci, kteří se pohybují klávesnicí, potřebují u každého pole viditelný ukazatel zaměření. Výchozí obrys prohlížeče odstraňte jen tehdy, když ho nahradíte vlastním stylem zaměření.
Styl formuláře je nejrychlejší způsob, jak zlepšit, jak návštěvníci vaše formuláře vnímají. Sladěte formulář se značkou, zvýrazněte odesílací tlačítko a vyzkoušejte ho na všech velikostech obrazovky. Vizuální propracovanost ukazuje, že vaše firma dbá na detaily.
Časté otázky
Musím umět CSS, abych mohl stylovat formuláře?
Ne. Moderní tvůrci formulářů obsahují vizuální editory stylu, které zvládnou barvy, písma, mezery i design tlačítek bez kódu. CSS je k dispozici, když potřebujete kontrolu na úrovni pixelů, ale většina firem dosáhne profesionálního výsledku jen vizuálním nastavením.
Naruší vlastní CSS funkčnost mého formuláře?
CSS mění jen vzhled a neovlivňuje, jak formulář sbírá a odesílá data. Riziko je vizuální: příliš razantní CSS může skrýt pole, rozbít rozvržení na mobilu nebo zneviditelnit chybové hlášky. Po každé změně CSS formulář otestujte na více velikostech obrazovky.
Jak formulář sladím se značkou svého webu?
Převezměte barvy značky, rodinu písma a zaoblení rohů ze stávajících stylů svého webu. Použijte je na pole formuláře, popisky a odesílací tlačítko. Tvůrce webů od WEMASY použije na formuláře nastavení designu celého webu automaticky, takže máte jednotný výchozí bod.
Mají mít pole formuláře ohraničení, nebo bez něj?
Funguje obojí, pokud je provedení jednotné. Pole s ohraničením jsou bezpečnější výchozí volba, protože jasně ukazují, kam psát. Pole bez ohraničení s čárou jen dole vypadají moderně, ale návštěvníky mohou zmást, kde pole začínají. Vyberte jeden styl a použijte ho u každého pole.
Jak styl formuláře ovlivňuje konverzi?
Profesionálně vypadající formulář buduje důvěru a podporuje dokončení. Nesladěný nebo zastaralý design formuláře vyvolává pochybnosti, jestli je odeslání bezpečné a jestli někdo odpoví. Samotný styl špatnou strukturu formuláře nezachrání, ale špatný styl může dobře postavený formulář podkopat.
Mohu na jednom webu použít různé styly pro různé formuláře?
Můžete, ale základní prvky držte jednotné. Stejné písmo, barva tlačítka a styl polí by se měly objevit ve všech formulářích. Pro konkrétní použití můžete upravit text odesílacího tlačítka nebo šířku formuláře, ale vizuální jazyk by měl působit jako jedna značka.