Nastavení designu formulářů

V tomto článku najdete způsob a návod jak si přizpůsobit barvy a vzhled různých uživatelských prvků ve svých formulářích tak, aby co nejlépe odpovídaly designu vašeho webu. Nastavit si můžete jak barvy, ohraničení, textů a ikon. Tak také styly a vzhled vysvětlujících infohlášek.

Styl barev a ohraničení

1. Verze vzhledu (1.) nastavuje podobu ikon a jejich umístění v formuláři. Styl ohraničení (2.) ovlivňuje jak se má kolonka formuláře zvýraznit. Můžete také nastavit Styl loaderu (3.), který se zobrazuje v případě složitějších validací či dotahování dat. Na výběr máte ze tří možností vzhledu. Zároveň můžete upravit jeho barvy skrz položky Barva ikonky (4.) a Barva pozadí (5.) to skrz nastavení hexadecimálního kódu či pomocí palety barev. 
   
2. Můžete také nastavit rozdílné barvy pro úspěšný stav. A to dokonce jaká bude Barva ikonky (1.), Barvu pozadí (2.) nebo jaká má být Barva ohraničení (3.) a nebo zda se má vůbec Používat ohraničení (4.). 
   
3. Nastavit můžete také unikátní podobu pro výstražný stav validací. Stejně jako pro úspěšný stav, můžete upravit jaká má být Barva ikonky (1.), Barva pozadí (2.), Barva ohraničení (3.) i zdali se má být viditelné (4.). 
   
4. Stejné nastavení vám umožnuje upravit i chybně vyhodnocené položky formuláře. Barva ikonky (1.), Barva pozadí (2.), Barva ohraničení (3.) i zobrazení ohraničení pro chybné validace (4.).  
   
5. Další nastavitelnou barvou je Informační stav. Pro ten si můžete také nastavit položky pro Barva ikonky (1.), Barva pozadí (2.), Barva ohraničení (3.) i zobrazení ohraničení pro chybné validace (4.). 
   
6. Foxentry automaticky přidává do kolonky ikonku na rychlé mazání textu. Tímto nastavením můžete ovlivnit, zda se mají mazat jednotlivě, nebo i zda má docházet k mazání i souvisejících kolonek (1.). Barva ikonky (2.) vám dává možnost upravit její vzhled a Hover efekt ikonky (3.) ovlivňuje její změnu při najetí na ikonku. Barva pozadí (4.) a Hover efekt pozadí (5.) vám dává možnost upravit i pozadí ikony. 
   

Styl infohlášek

1. První sekce vám umožňuje nastavit typ zobrazení hlášky, to nastavíte v položce Verze vzhledu  (1.). K nastavení jejich vzhledu slouží i sekce Ikonky (2.). Pro nastavení křížku pro vypínání infohlášek slouží sekce (3.) i (4.). Zobrazení stínů pod infohláškami můžete vypnout díky Používat stíny (5.). 
   
2. Nastavení vzhledu výstražných zpráv můžete nastavit skrz Barva ikonky (1.), její pozadí v sekci Barva pozadí (2.). Barva textu (3.) má na starosti barvu textu, v našem náhledu je to text: "Jste si jistí?". V naší aplikaci můžete nastavit i samotnou barvu pozadí celé hlášky (4.). 
   
3. Stejné nastavení vám umožnuje upravit i chybové zprávy, Barva ikonky (1.), Barva pozadí (2.), Barva textu (3.) i barvu samotné hlášky (4.). 
   
4. Informační zprávy obsahuji doporučení či návrhy ke změnám, které může uživatel využít. Barva textu (1.), Barvu odkazu (2.), i samotné hlášky (3.). 
   
5. Poslední nastavení je se týká překrývání. Občas se stává, že je např. ikonka viditelná i v momentě, kdy ji překrývá nějaký webový prvek (menu, hlavička, apod). Díky tomuto nastavení si chování můžete upravit, tak aby nejvíce odpovídalo vašim potřebám. Z-idex je hodnota pořadí prvku - čím je hodnota vyšší, tím bude prvek více v popředí. Pořadí ikonky nastavíte v kolonce (1.). Z-index buttonu pro mazání (2.) pořadí loaderu nastavíte v Z-index loaderu (3.) a pořadí samotných infohlášek v Z-index infohlášek (4.). Všechny změny je poté potřeba potvrdit stisknutím tlačítka Uložit (5.).