Ako pridať kontaktný formulár na váš web (ktorý sa k vám skutočne dostane)

Ak chcete pridať kontaktný formulár, ktorý funguje, vytvorte krátky formulár (meno, e-mail, správa), odošlite ho na serverovú trasu, ktorá overí vstup, uloží správu do databázy a potom vám cez poskytovateľa e-mailov pošle upozornenie pomocou tajného API kľúča. Pridajte skryté pole honeypot a obmedzenie počtu požiadaviek, aby ste zastavili väčšinu spamu, zobrazte jasnú správu o úspechu a otestujte to od začiatku do konca na zverejnenom webe. Dôležité je ukladať skôr, než sa pošle e-mail: ak e-mail niekedy zlyhá, dopyt stále máte.

Vaše možnosti

Ak už váš web má backend a databázu — čo aplikácie vytvorené nástrojmi na tvorbu s AI často majú — posledná možnosť je najspoľahlivejšia a drží dopyty tam, kde ich vidíte.

Čo obsahuje dobrý kontaktný formulár

• Čo najmenej polí. Meno, e-mail, správa. Rozbaľovací zoznam predmetu ("Predaj", "Podpora", "Iné") pridajte len vtedy, ak podľa neho budete smerovať správy.
• Jasné popisky nad každým poľom, nie len zástupný text, ktorý zmizne.
• Užitočné overenie: "Zadajte platnú e-mailovú adresu", zobrazené pri poli.
• Stav úspechu, ktorý povie, čo bude nasledovať: "Ďakujeme — odpovieme do jedného pracovného dňa."
• Poznámku o súkromí, ktorá hovorí, ako použijete údaje, a odkaz na vaše zásady ochrany osobných údajov.
• Náhradný kontakt, napríklad e-mailovú adresu alebo telefón pre ľudí, ktorí ho uprednostňujú.

Príklady promptov

Základný formulár:

Pridaj kontaktný formulár na stránku Kontakt s menom, e-mailom a správou (všetko povinné, správa do 2 000 znakov). Odošli ho na serverovú trasu, ktorá overí vstup, uloží ho do tabuľky contact_messages s časom prijatia a zobrazí správu o úspechu: "Ďakujeme, odpovieme do jedného pracovného dňa." Chyby polí zobrazuj priamo pri poliach. Nech dobre funguje na telefónoch.

E-mailové upozornenia:

Keď sa správa z kontaktu uloží, pošli mi upozornenie na e-mail hello@example.com cez Resend s kľúčom v RESEND_API_KEY. Nastav reply-to na e-mail odosielateľa, aby som mohol odpovedať priamo. Ak odoslanie zlyhá, ponechaj uloženú správu a zaloguj chybu bez vyzradenia kľúča.

Ochrana pred spamom:

Pridaj ochranu pred spamom do kontaktného formulára: skryté pole honeypot, ktoré musí zostať prázdne, limit 5 odoslaní na IP adresu za hodinu na serveri a odmietni správy s viac ako 3 odkazmi. Honeypot odoslania potichu zahoď, ale stále zobraz úspech.

Schránka:

Pridaj administračnú stránku chránenú heslom so zoznamom kontaktných správ od najnovšej, s políčkom "vybavené" a filtrom nevybavených správ.

Krok za krokom

1. Rozhodnite, kam správy idú: kto dostáva upozornenia a kto odpovedá.
2. Vytvorte formulár s uvedenými poľami, prístupnými popiskami a vstupmi vhodnými pre mobil (použite typ vstupu e-mail, aby telefóny ukázali správnu klávesnicu).
3. Vytvorte serverovú trasu. Skontroluje povinné polia, formát e-mailu a limity dĺžky. Nikdy nedôverujte overeniu len v prehliadači.
4. Najprv uložte do databázy. Pozrite si ako pridať databázu do aplikácie.
5. Nastavte poskytovateľa e-mailov. Vytvorte účet, overte svoju odosielaciu doménu a API kľúč uložte ako tajomstvo. Ako posielať e-maily z aplikácie podrobne rozoberá nastavenie domény (SPF, DKIM).
6. Pošlite upozornenie zo servera po uložení. Ako odosielateľa použite overenú doménu a ako reply-to e-mail návštevníka — neposielajte "od" e-mailovej adresy návštevníka, lebo to pravdepodobne skončí ako podvrh.
7. Voliteľne pošlite automatickú odpoveď návštevníkovi, ale udržte ju krátku; automatické odpovede na spamové adresy môžu uškodiť vašej reputácii odosielateľa.
8. Pridajte ochranu pred spamom: honeypot, obmedzenie počtu požiadaviek, potom kontrolu typu CAPTCHA, ak je potrebná.
9. Otestujte na zverejnenom webe: odošlite správu, skontrolujte databázu, schránku aj priečinok so spamom, kliknite na odpovedať.

Zastavenie spamu

Kontaktné formuláre priťahujú roboty už v priebehu dní od spustenia. Obranu skladajte od najmenej po najviac rušivú:

1. Pole honeypot. Pole skryté pred ľuďmi; roboty ho vyplnia. Skutočným návštevníkom nič nestojí.
2. Obmedzenie počtu požiadaviek na serveri. Obmedzí, koľko správ môže jedna adresa odoslať v danom čase.
3. Pravidlá obsahu. Odmietnite správy plné odkazov alebo správy s prázdnym alebo absurdne dlhým poľom správy.
4. Kontrola typu CAPTCHA, napríklad Cloudflare Turnstile alebo Google reCAPTCHA. Token musí byť overený na vašom serveri; kontrola, ktorá beží len v prehliadači, sa dá obísť.

Bežné chyby

• Zobrazenie "Odoslané!", keď nič neodišlo. Rozhranie zobrazí úspech skôr alebo bez ohľadu na odpoveď servera. Vždy počkajte na server.
• Len e-mail, bez databázy. Jeden zle nastavený kľúč a dopyty zmiznú na týždne bez toho, aby si to niekto všimol.
• API kľúč vo frontende. Ktokoľvek ho môže použiť na odosielanie e-mailov za vás.
• Neoverená odosielacia doména. Upozornenia končia v spame alebo nikdy nedorazia.
• Odosielanie "od" e-mailu návštevníka. Namiesto toho použite reply-to.
• Žiadne limity dĺžky. Roboty vkladajú obrovské bloky textu.
• Nikdy netestovať živý web. Kľúče a domény sa často líšia medzi náhľadom a produkciou.

Kontrolný zoznam

• Krátky formulár s viditeľnými popiskami a jasnými chybami
• Overenie na serveri a limity dĺžky
• Každá správa uložená do databázy
• Upozornenie na e-mail odoslané z overenej domény, s nastaveným reply-to
• API kľúč e-mailu uložený len ako tajomstvo na serveri
• Honeypot a obmedzenie počtu požiadaviek sú zapnuté
• Správa o úspechu sa zobrazí až po potvrdení servera
• Poznámka o súkromí odkazuje na vaše zásady ochrany osobných údajov
• Otestované od začiatku do konca na zverejnenom webe vrátane priečinka so spamom

Kontaktné formuláre v Mythex

V Mythex môžete celé riešenie vytvoriť z chatu. Požiadajte o formulár a databázu v rovnakom prompte (alebo napíšte /database), aby sa odoslania ukladali. Mythex nemá vstavaný produkt na odosielanie e-mailov, takže na upozornenia si priniesete poskytovateľa ako Resend, SendGrid alebo Postmark, pridáte jeho kľúč cez /secrets alebo nastavenia projektu a požiadate agenta, aby odosielal zo servera — pozrite si Odosielanie e-mailov z aplikácie. Skôr než sa na to spoľahnete, spustite testovanie aplikácie (/test) na formulári v náhľade, potom zverejnite a otestujte na živej URL.

Kontaktný formulár je kľúčovou súčasťou väčšiny webov pre malé firmy a vstupných stránok. Pred spustením si prejdite kontrolný zoznam bezpečnosti.

Otázky