Kontaktní formulář na statický web bez formulářové služby
Statický web formulář sám nepřijme. Možnosti, ochrana proti spamu, opomíjené potvrzení a malá brána, kterou provozujeme pro všechny weby.
- Statický web nemá kód na serveru, takže formulář musí odesílat na backend: formulářovou službu, serverless funkci nebo sdílenou bránu, jako je ta naše.
- Se spamem bojujte ve vrstvách: pole honeypot, kontrola Turnstile na serveru, seznam povolených původů a limity.
- Nejdřív uložit, potom poslat e-mail. Neúspěšné upozornění nesmí nikdy připravit o zprávu.
- Návštěvníkovi pošlete krátké potvrzení, ale až po uložení zprávy, jen ověřeným lidem a s limitem na adresu.
Statický web je složka s HTML, CSS a obrázky, které se servírují tak, jak jsou. Proto je rychlý, levný a těžko se rozbije, a právě proto kontaktní formulář na statickém webu sám o sobě nic nedělá: na serveru není žádný kód, který by zprávu přijal. Formulář musí svá pole poslat někam, kde je uloží a dají vám o nich vědět. Tento článek popisuje tři způsoby, jak to udělat, detaily kolem spamu a potvrzení, které rozhodují o tom, jestli formulář k něčemu je, a co jsme postavili, aby všechny weby KH Group a Flowsmith sdílely jeden backend pro formuláře.
Tři způsoby, jak formulář přijmout
1. Formulářová služba
Atribut action formuláře nasměrujete na hostovaný endpoint a služba vám odeslané zprávy pošle e-mailem. Zabere to pět minut a nepotřebujete žádný kód. Náklady přijdou později: limity počtu odeslání u levnějších tarifů, zprávy vašich návštěvníků uložené na cizích serverech, cizí branding v potvrzovacích e-mailech a další účet pro každý web. Pro jeden osobní web je to často správná volba.
2. Serverless funkce pro každý web
Většina hostingů pro statické weby umí vedle webu spouštět malé funkce, například Cloudflare Pages Functions nebo Worker. Funkce přijme POST, zkontroluje ho a pošle e-mail. Všechno vlastníte a v malém měřítku jsou náklady téměř nulové. Nevýhoda se ukáže u druhého a třetího webu: každý dostane vlastní kopii kontrol proti spamu, odesílání e-mailů i ukládání a kopie se postupně rozcházejí.
3. Jedna brána pro všechny weby
Tohle provozujeme my. Jediný Cloudflare Worker na forms.flowsmith.online přijímá formuláře ze všech webů, které spravujeme. Stránka odesílá na /f/<site>/<form>. Brána požadavek zkontroluje, uloží a upozorní správného člověka. Formulář je definice v databázi (příjemce, povolené původy, povinná pole), ne kód, takže přidat formulář na nový web znamená změnit data. Změna platí okamžitě, bez nového nasazení. API a nástroj pro příkazovou řádku popisuje manuál formulářové brány.
Spam: vrstvy, ne jeden trik
Každý veřejný formulář začne do pár dnů dostávat provoz od botů. Žádné jednotlivé opatření nezastaví všechno, ale čtyři levné vrstvy dohromady propustí jen velmi málo:
- Honeypot. Pole, které je pomocí CSS skryté před lidmi. Lidé ho nechají prázdné, mnoho botů ho vyplní. To naše se jmenuje
company_websitea název musí sedět mezi stránkou a bránou, jinak se skutečné zprávy zahazují. - Cloudflare Turnstile. Ověření, které většina návštěvníků vůbec nevidí, s tokenem ověřeným na serveru. Kontrola jen v prohlížeči nic nedokazuje, protože bot může prohlížeč úplně obejít.
- Seznam povolených původů. Každá definice formuláře uvádí weby, které na něj smějí odesílat (apex i www). Formulář jednoho webu nejde zneužít z jiného.
- Povinná pole kontrolovaná na serveru. Definice určuje, která pole nesmějí chybět. Validace v prohlížeči je zdvořilost vůči návštěvníkovi, ne kontrola.
Nejdřív uložit, potom poslat e-mail
Nejčastěji ztrácejí kontaktní formuláře poptávky potichu: upozornění e-mailem selže, a protože úložištěm byl právě ten e-mail, zpráva je pryč. Nikdo si toho nevšimne, dokud zákazník nezavolá, proč mu nikdo neodpověděl.
Naše brána se řídí jedním pravidlem, které má zapsané ve svém zadání: e-mail nikdy nesmí podmiňovat uložení. Každé odeslání se nejdřív zapíše do databáze Cloudflare D1. Teprve potom odchází upozornění, a když odeslání selže, chyba se zaloguje a zpráva zůstává v databázi i v administraci. Odeslané zprávy jsou vidět v malé administraci chráněné jednorázovým PINem zaslaným e-mailem. Servisní token, který používají skripty, umí spravovat definice formulářů, ale nemůže číst, co lidé napsali.
Testujte to tak, jak to zažije návštěvník: odešlete skutečný formulář ze skutečné stránky a pak zkontrolujte tři místa. Je řádek v databázi? Dorazilo upozornění? Dostal návštěvník, co mu bylo slíbeno? Lekce Akademie Tvoje první automatizace používá stejný návyk: testovat z druhé strany.
Potvrzení, na které se často zapomíná
Z pohledu návštěvníka působí formulář, který řekne „děkujeme“ a pak den mlčí, jako rozbitý. Krátký automatický e-mail, že zpráva dorazila, s kopií toho, co napsal, tu nejistotu odstraní. Zároveň je to část, která se vynechává nejčastěji, a když se udělá nedbale, stane se z formuláře nástroj na posílání e-mailů cizím lidem.
Naše brána posílá potvrzení se třemi pojistkami:
- Až po uložení zprávy. Potvrzení popisuje skutečnost, ne úmysl.
- Jen když prošla kontrola Turnstile. Bez ověřeného člověka žádný odchozí e-mail.
- S limitem. Nejvýš jedno potvrzení na adresu za deset minut a celkem třicet za hodinu. Kdo do vašeho formuláře napíše adresu cizího člověka, nemůže ho použít k zahlcení jeho schránky.
Selhání potvrzení nikdy nezmění odpověď, kterou návštěvník uvidí. Jeho zpráva je uložená tak jako tak.
Funguje bez JavaScriptu
Dobrý formulář funguje, i když se skripty nenačtou. Ten náš je běžný HTML formulář s polem _redirect: bez JavaScriptu ho prohlížeč odešle a brána odpoví přesměrováním na děkovací stránku. S JavaScriptem ho malý skript odešle na pozadí a výsledek zobrazí přímo na místě. Obojí obsluhuje tentýž endpoint.
Formulář jde na stránku vložit ještě druhým způsobem: jako dynamický embed, tedy jeden zástupný prvek a skript, který načte veřejnou definici formuláře a vykreslí pole ve stylu a jazyce dané stránky. Když někdo formulář v administraci změní, každá stránka, která ho vkládá, se aktualizuje sama. Statický snippet je lepší, když formulář musí fungovat bez JavaScriptu. Embed je lepší, když se formulář často mění. Obojí ukazuje návod krok za krokem.
Která možnost se hodí vám
| Situace | Rozumná volba |
|---|---|
| Jeden osobní web, pár zpráv měsíčně | Formulářová služba, případně jedna funkce, pokud už nějakou používáte |
| Firemní web, kde poptávky znamenají tržby | Vlastní funkce nebo brána, nejdřív ukládání, potvrzení s limity |
| Několik webů, které spravuje tentýž tým | Jedna sdílená brána s definicemi formulářů jako daty |
| Poptávky pokračují do AI třídění nebo psaní návrhů | Brána, která ukládá strukturovaná data, v nichž jde hledat |
Pokud si chcete postavit vlastní, manuál Cloudflare Workers (zatím anglicky) popisuje jednotlivé součásti: route, binding D1 a secrets. Co se s poptávkou děje, když dorazí, je samostatná otázka, kterou řeší článek Správa obchodní schránky s AI.
Časté otázky
Může mít statický web kontaktní formulář?
Ano, ale formulář musí odesílat data něčemu, co spouští kód: formulářové službě, serverless funkci nebo malé bráně. Statická stránka obsahuje jen HTML; přijímající strana zprávu uloží a pošle upozornění.
Funguje formulář bez JavaScriptu?
Může. Obyčejný HTML formulář, který odesílá na endpoint a nechá se přesměrovat na děkovací stránku, funguje i s vypnutým JavaScriptem. JavaScript pak jen zlepšuje dojem, například tím, že zobrazí výsledek bez znovunačtení stránky.
Stačí proti spamu honeypot?
Sám ne. Skryté pole honeypot levně zastaví nejjednodušší boty, ale potřebujete i ověření typu Cloudflare Turnstile kontrolované na serveru a limity na všechno, co automaticky posílá e-maily.
Kam ukládat odeslané formuláře?
Někam, co vlastníte a v čem můžete hledat, a to dřív, než odejde jakýkoli e-mail. Každé odeslání nejdřív zapisujeme do databáze; když upozornění e-mailem selže, zpráva je pořád v bezpečí.
Napsáno z našich produkčních systémů. Koncept vznikl s pomocí AI, text zkontroloval Kamil Hrbáček.
Chcete to mít ve firmě?
Flowsmith navrhuje a provozuje takové automatizace pro malé a střední týmy — a vše, co odchází ven, schvaluje člověk.
