K vytvoření vlastního vstupního formuláře s volbou oddělení budete postupovat obdobně jako u základního formuláře:
Vytvoříte HTML dokument, přidáte CSS styly a pomocí JavaScript metod zajistíte posílání dat z formuláře a přiřazení klienta do fronty. Následně nahrajete vytvořený formulář na libovolný hosting podporující protokol HTTPS a přidáte odkaz na formulář do administračního rozhraní.
Opět doporučujeme vytvářet vstupní formulář pomocí webové aplikace codepen.io kvůli jednoduchosti a přehlednosti. Začít můžete kliknutím na . Editor kódu, který používáme je propojený s a s malou library , kvůli těžkostem se scrollováním iframe na systémech iOS.
Jak bude formulář vypadat
Přímý odkaz pro vložení tohoto formuláře do administrace aplikace Mluvii:
HTML
Oproti základnímu formuláři se tento formulář skládá ze dvou slidů - klasický formulář s údaji a výběr oddělení. Slidy jsou vytvořeny pomocí library .
První dva div tagy (a na ně napojené css a javascript) slouží k zobrazení vlastních scrollbarů pro lepší user experience na mobilních zařízeních.
CSS Styling
Většina CSS je již zajištěna pomocí Bootstrapu a Swipperu.
JavaScript kód
Informace o zvoleném oddělení je posílaná spolu s dalšími údaji z formuláře ve funkci volané při submitu formuláře jako custom proměnná "department".
Úplné možnosti API formuláře naleznete v obecném návodu na tvorbu výstupního formuláře.
Nahrání formuláře na libovolný hosting
Pokud jste pro tvorbu formuláře využili codepen.io, nejdříve klikněte na tlačítko Save, poté exportujte v .zip formátu.
V případě, že využijete jiný nástroj než codepen.io bude kód formuláře vypadat takto.
Vytvořili jste vstupní formulář pomocí codepen.io. Ten jste exportovali na Váš počítač. Exportované složky jste nahráli do GitHub repozitáře a poté zapnuli GitHub stránky. Tím jste získali odkaz na náš formulář, který vložíte do administračního rozhraní.
Tím máte připravený formulář, nyní je potřeba nahrát formulář na internet, abychom na něj mohli odkazovat z administračního rozhraní. V našem případě využijeme GitHub stránky. Bližší informace naleznete .