Jak přidat kontaktní formulář na web (který vám skutečně doručí zprávy)

Aby kontaktní formulář fungoval, vytvořte krátký formulář (jméno, e-mail, zpráva), který odešle data na serverovou trasu. Ta vstup ověří, uloží zprávu do databáze a poté vám přes poskytovatele e-mailu pošle upozornění pomocí tajného API klíče. Proti většině spamu pomůže skryté honeypot pole a omezení počtu požadavků. Zobrazte jasnou zprávu o úspěchu a otestujte formulář od začátku do konce na publikovaném webu. Důležité je ukládat dřív, než odešlete e-mail: pokud e-mail selže, dotaz máte pořád k dispozici.

Vaše možnosti

Pokud váš web už má backend a databázi, což aplikace vytvořené nástroji pro tvorbu aplikací s AI často mají, je poslední možnost nejspolehlivější a dotazy zůstávají na místě, kde je vidíte.

Co dobrý kontaktní formulář obsahuje

• Co nejméně polí. Jméno, e-mail, zpráva. Rozbalovací nabídku předmětu („Prodej“, „Podpora“, „Jiné“) přidejte, jen pokud podle ní budete zprávy směrovat.
• Jasné popisky nad každým polem, ne jen zástupný text, který zmizí.
• Užitečnou validaci: „Zadejte platnou e-mailovou adresu“, zobrazenou u pole.
• Stav úspěchu, který říká, co bude dál: „Děkujeme, odpovíme do jednoho pracovního dne.“
• Poznámku o ochraně osobních údajů, která vysvětluje, jak údaje použijete, a odkazuje na vaše zásady ochrany osobních údajů.
• Záložní kontakt, například e-mail nebo telefon, pro lidi, kteří to tak preferují.

Příklady promptů

Základní formulář:

Přidej na stránku Kontakt formulář se jménem, e-mailem a zprávou (všechna pole povinná, zpráva do 2 000 znaků). Odešli ho na serverovou trasu, která vstup ověří, uloží ho do tabulky contact_messages s časem přijetí a zobrazí zprávu o úspěchu: „Děkujeme, odpovíme do jednoho pracovního dne.“ Chyby polí zobrazuj přímo u nich. Ať dobře funguje na telefonech.

E-mailová upozornění:

Když se uloží kontaktní zpráva, pošli mi upozornění e-mailem na hello@example.com přes Resend s klíčem v RESEND_API_KEY. Jako reply-to nastav e-mail odesílatele, abych mohl odpovědět přímo. Pokud odeslání selže, ponech uloženou zprávu a zaloguj chybu bez vyzrazení klíče.

Ochrana proti spamu:

Přidej do kontaktního formuláře ochranu proti spamu: skryté honeypot pole, které musí zůstat prázdné, limit 5 odeslání na IP adresu za hodinu na serveru a odmítnutí zpráv s více než třemi odkazy. Zprávy zachycené honeypotem tiše zahoď, ale stejně zobraz úspěch.

Schránka:

Přidej stránku pro správu chráněnou heslem, která vypíše kontaktní zprávy od nejnovější, se zaškrtávacím polem „vyřízeno“ a filtrem nevyřízených zpráv.

Krok za krokem

1. Rozhodněte, kam zprávy půjdou: kdo dostává upozornění a kdo odpovídá.
2. Vytvořte formulář s výše uvedenými poli, přístupnými popisky a vstupy vhodnými pro mobily (použijte typ vstupu e-mail, aby se na telefonu zobrazila správná klávesnice).
3. Vytvořte serverovou trasu. Kontroluje povinná pole, formát e-mailu a délkové limity. Nikdy nespoléhejte jen na validaci v prohlížeči.
4. Nejdřív uložte do databáze. Viz jak přidat databázi do vaší aplikace.
5. Nastavte poskytovatele e-mailu. Vytvořte účet, ověřte odesílací doménu a API klíč uložte jako tajný údaj. Jak odesílat e-maily z vaší aplikace podrobně popisuje nastavení domény (SPF, DKIM).
6. Odešlete upozornění ze serveru až po uložení. Jako odesílatele použijte ověřenou doménu a jako reply-to adresu návštěvníka. Neposílejte zprávu „od“ adresy návštěvníka, protože ji pravděpodobně odmítnou jako podvrh.
7. Volitelně nastavte automatickou odpověď návštěvníkovi, ale udržte ji krátkou. Automatické odpovědi na spamové adresy mohou poškodit vaši reputaci odesílatele.
8. Přidejte ochranu proti spamu: honeypot, omezení počtu požadavků a poté podle potřeby kontrolu typu CAPTCHA.
9. Otestujte na publikovaném webu: odešlete zprávu, zkontrolujte databázi, zkontrolujte doručenou poštu i spam a klikněte na odpověď.

Zastavení spamu

Kontaktní formuláře přitahují boty během několika dní od spuštění. Obranu vrstvěte od nejméně k nejvíce rušivé:

1. Honeypot pole. Pole skryté před lidmi; boty ho vyplní. Skutečným návštěvníkům nic nestojí.
2. Omezení požadavků na serveru. Omezuje, kolik zpráv může jedna adresa odeslat v daném období.
3. Obsahová pravidla. Odmítejte zprávy plné odkazů nebo s prázdným či absurdně dlouhým textem.
4. Kontrola typu CAPTCHA, například Cloudflare Turnstile nebo Google reCAPTCHA. Token musí být ověřen na vašem serveru; kontrolu, která běží jen v prohlížeči, lze obejít.

Časté chyby

• Zobrazení „Odesláno!“, i když nic odesláno nebylo. Rozhraní hlásí úspěch dřív, než server odpoví, nebo bez ohledu na odpověď. Vždy počkejte na odpověď serveru.
• Jen e-mail bez databáze. Jeden špatně nastavený klíč a dotazy mizí týdny, aniž si toho kdo všimne.
• API klíč ve frontendovém kódu. Kdokoli ho může použít k odesílání e-mailů jménem vaší firmy.
• Neověřená odesílací doména. Upozornění končí ve spamu nebo nedorazí.
• Odesílání „od“ e-mailu návštěvníka. Místo toho použijte reply-to.
• Žádné délkové limity. Boti vkládají obrovské bloky textu.
• Nikdy netestovaný živý web. Klíče a domény se často liší mezi náhledem a produkcí.

Kontrolní seznam

• Krátký formulář s viditelnými popisky a jasnými chybami
• Validace na serveru a délkové limity
• Každá zpráva uložena do databáze
• Upozornění odeslané z ověřené domény s nastaveným reply-to
• Klíč e-mailové služby uložen jen v serverových tajných údajích
• Honeypot a omezení počtu požadavků nastavené
• Zpráva o úspěchu se zobrazí až po potvrzení serverem
• Poznámka o ochraně osobních údajů odkazuje na vaše zásady ochrany osobních údajů
• Otestováno od začátku do konce na publikovaném webu, včetně spamu

Kontaktní formuláře v Mythexu

V Mythexu můžete celé řešení vytvořit přímo v chatu. Požádejte o formulář a databázi ve stejném promptu (nebo napište /database), aby se odeslané zprávy ukládaly. Mythex nemá vestavěný produkt pro odesílání e-mailů, takže pro upozornění použijete poskytovatele jako Resend, SendGrid nebo Postmark, jeho klíč přidáte přes /secrets nebo v nastavení projektu a agenta požádáte, aby odesílal ze serveru. Viz Odesílání e-mailů z vaší aplikace. Než na formulář spolehnete, spusťte v Náhledu testování aplikace (/test) a poté publikujte a otestujte na živé adrese.

Kontaktní formulář je klíčovou součástí většiny webů pro malé firmy a vstupních stránek. Před spuštěním si projděte kontrolní seznam zabezpečení.

Otázky