Jak vytvořit nástroj pro tvorbu formulářů

Nástroj pro tvorbu formulářů umožňuje lidem navrhnout si vlastní formuláře — vybrat pole, nastavit pravidla, zveřejnit odkaz — a pak sbírá odpovědi. Pod kapotou jsou tři věci: definice formuláře uložená jako data, vykreslovač, který z definice udělá fungující formulář, a úložiště odpovědí s oznámeními a exportem. Než ho začnete stavět, ověřte, zda ho opravdu potřebujete: pokud potřebujete jen kontaktní nebo přihlašovací formulář, postavte ten formulář přímo a nástroj pro tvorbu přeskočte.

Potřebujete vůbec nástroj pro tvorbu?

Nástroj pro tvorbu je větší projekt než jeden formulář, protože každý typ pole musí fungovat v editoru, ve veřejném formuláři, při validaci, ukládání, oznámeních i exportu.

Co nástroj pro tvorbu formulářů potřebuje

Definice formulářů

Uložte každý formulář jako seznam polí ve strukturovaných datech (JSON ve sloupci Postgres funguje dobře). Pole může vypadat takto:

• id — stabilní ID, které se nikdy nemění, i když se změní popisek
• typ — text, e-mail, číslo, dlouhý text, výběr, zaškrtávací políčko, datum, soubor
• popisek a nápověda
• povinné, min. / max., povolené typy souborů
• možnosti pro pole výběru
• pořadí a volitelně podmínku („zobrazit jen, pokud pole X je Y“)

Editor tento seznam upravuje; veřejný formulář ho čte. V tom je celý trik: žádný nový kód pro každý formulář.

Odpovědi

• Odpovědi — formulář, verze formuláře, čas odeslání, odpovědi navázané na ID pole, stav (nová, přečtená, archivovaná).
• Soubory — nahrané soubory patří do úložiště souborů, s odkazem v odpovědi, nikdy uvnitř řádku databáze.

Stránky

• Seznam formulářů s počtem odpovědí.
• Editor — přidávání, řazení a nastavování polí s živým náhledem vedle.
• Nastavení — potvrzovací zpráva nebo přesměrování, e-maily s oznámeními, data otevření a uzavření, limit odpovědí.
• Veřejný formulář na vlastním odkazu a verze pro vložení na jiné weby.
• Tabulka odpovědí s hledáním, stavem, detailem a exportem do CSV.

Rozhodnutí a kompromisy

Verzování. Někdo přejmenuje „Telefon“ na „Mobilní číslo“ po 200 odpovědích. Pokud se odpovědi ukládají podle ID pole a každá odpověď zaznamená verzi formuláře, staré odpovědi se dál zobrazí správně. Bez toho se vaše data tiše rozhodí.

Validace běží dvakrát. Pole kontrolujte v prohlížeči kvůli rychlé zpětné vazbě a znovu na serveru, protože kdokoli může data poslat přímo na váš endpoint. Rozhoduje kontrola na serveru.

Nahrávání souborů. Přináší náklady na úložiště, limity velikosti, kontroly typů souborů a otázky soukromí (životopisy, doklady, lékařské formuláře). Omezte typy a velikosti a nahrané soubory mějte ve výchozím stavu soukromé, čitelné jen vlastníky formulářů. Viz jak přidat nahrávání souborů do aplikace.

Oznámení. „Pošli mi e-mail, když někdo odešle“ se očekává. Potřebuje poskytovatele e-mailu a API klíč; viz jak posílat e-maily z aplikace.

Spam. Veřejný formulář najdou boti. Použijte honeypot pole (skryté před lidmi, boti ho vyplní), limity počtu požadavků na IP, validaci na serveru a v případě potřeby službu CAPTCHA.

Vkládání. Vložení přes iframe je nejjednodušší a nejbezpečnější způsob, jak dát formulář na cizí web. Vložení skriptem vypadá nativněji, ale je těžší ho postavit a zabezpečit.

Podmíněná logika. „Zobrazit toto pole jen pokud…“ je oblíbené, ale násobí testování. Přidejte ji, až budou základy pevné.

První prompt, který funguje

Vytvoř webovou aplikaci pro tvorbu formulářů pro můj tým. Přihlášení uživatelé vytvářejí formuláře v editoru s živým náhledem. Typy polí: krátký text, dlouhý text, e-mail, číslo, datum, výběr jedné možnosti, zaškrtávací políčka a nahrávání souborů. Každé pole má stabilní ID, popisek, text nápovědy, příznak povinnosti a pravidla specifická pro typ (min/max, možnosti, povolené typy souborů a limit velikosti 10 MB). Ukládejte definici formuláře jako JSON s číslem verze, které se zvýší při každém publikování. Každý formulář dostane veřejný odkaz a kód pro vložení jako iframe. Odeslání validujte na serveru proti publikované verzi, ukládejte odpovědi podle ID pole spolu s verzí formuláře a nahrané soubory dejte do soukromého úložiště. Přidejte skryté honeypot pole a limit požadavků na IP. Vlastníci formulářů vidí tabulku odpovědí se stavem (nová, přečtená, archivovaná), detailní pohled a export do CSV. Vše ukládejte do databáze. Podmíněnou logiku a e-mailová oznámení nechte na později.

Kroky stavby

1. Editor a definice. Postavte formulář se všemi typy polí a s agentem si prohlédněte uloženou JSON definici. Je čistá a stabilní?
2. Veřejný formulář. Vyplňte ho na telefonu. Zkontrolujte zprávy validace a potvrzovací obrazovku.
3. Validace na serveru. Nechte agenta poslat odeslání, které poruší pravidla, rovnou na server a obejde stránku. Mělo by být odmítnuto.
4. Verzování. Po několika odpovědích přejmenujte a přeřaďte pole. Staré odpovědi by měly dál ukazovat správné hodnoty.
5. Nahrávání. Zkuste soubor příliš velký a jeden špatného typu. Ověřte, že cizí člověk nemůže otevřít nahraný soubor uhodnutím odkazu.
6. Tabulka odpovědí a export. Zkontrolujte export do CSV s čárkami, zalomeními řádků a diakritikou v odpovědích.
7. Oznámení, vkládání, logika. Přidávejte je postupně, jedno po druhém.

Časté chyby

• Ukládání odpovědí podle popisku. Popisky se mění. Používejte stabilní ID polí.
• Validace jen v prohlížeči. Je to pohodlí, ne ochrana.
• Veřejně dostupné nahrané soubory. Formuláře často sbírají dokumenty, které lidé nechtějí zveřejnit.
• Žádná ochrana proti spamu. Veřejný formulář se může během několika dní zaplnit nesmyslnými odesláními.
• Stavět nástroj pro tvorbu kvůli jednomu formuláři. Postavte prostě ten formulář.
• Neomezené odpovědi u veřejného produktu. Pokud zákazníci vytvářejí formuláře, nastavte limity podle tarifu, jinak si jeden populární formulář zvedne účet za hosting.

Kdy je lepší hotový produkt

Hostované nástroje pro formuláře jsou výborné a pro většinu potřeb levné. Už vyřešily vkládání, spam, platby, integrace a přístupnost napříč desítkami typů polí. Pokud váš tým potřebuje jen formuláře, použijte jeden z nich — viz alternativy k Typeform a alternativy ke Google Forms.

Vlastní řešení se vyplatí, když mají odpovědi žít vedle vašich vlastních dat (napojení na CRM nebo klientský portál, který provozujete), když potřebujete po odeslání pracovní postupy, které nástroje neumějí, když je umístění nebo vlastnictví dat požadavkem, nebo když jsou formuláře funkcí produktu, který prodáváte.

Stavba s Mythex

V Mythexu popíšete nástroj pro tvorbu v chatu a v živém náhledu otestujete editor a veřejný formulář vedle sebe. Mythex přidá dedikovanou databázi pro definice formulářů a odpovědi a automaticky zapne úložiště souborů, když vaše aplikace potřebuje nahrávání (na tarifu Free omezeno na 1 GB). Oznámení e-mailem jdou přes poskytovatele, kterého připojíte vlastním klíčem. Aplikaci publikujte na odkaz mythex.ai, nebo na vlastní doménu v tarifu Pro, a odkazy na veřejné formuláře budou fungovat odtud.

Otázky