Hogyan adj kapcsolatfelvételi űrlapot a weboldaladhoz (ami tényleg eljut hozzád)

Egy működő kapcsolatfelvételi űrlaphoz építs egy rövid űrlapot (név, e-mail, üzenet), amely egy szerveroldali útvonalra küldi az adatokat. Az útvonal ellenőrzi a bemenetet, elmenti az üzenetet egy adatbázisba, majd egy e-mail-szolgáltatón keresztül, titkos API-kulccsal értesítést küld neked. Adj hozzá rejtett csapdamezőt (honeypot) és sebességkorlátozást a legtöbb spam megállításához, mutass egyértelmű sikeres üzenetet, és teszteld végig az élesített oldalon. A mentés e-mail előtt a fontos rész: ha az e-mail valaha meghiúsul, akkor is megvan az érdeklődés.

A lehetőségeid

Ha az oldalad már rendelkezik backenddel és adatbázissal – ami az AI-alkalmazásépítőkkel készült appoknál gyakran így van –, az utolsó lehetőség a legmegbízhatóbb, és az érdeklődők ott maradnak, ahol látod őket.

Mit tartalmaz egy jó kapcsolatfelvételi űrlap

• Minél kevesebb mező. Név, e-mail, üzenet. Adj hozzá egy tárgy-legördülőt („Értékesítés”, „Támogatás”, „Egyéb”) csak akkor, ha szerint irányítasz.
• Világos címkék minden mező fölött, ne csak olyan helyőrző szöveg, amely eltűnik.
• Hasznos validáció: „Adj meg egy érvényes e-mail-címet”, a mező mellett megjelenítve.
• Sikeres állapot, amely elmondja, mi történik ezután: „Köszönjük – egy munkanapon belül válaszolunk.”
• Adatvédelmi megjegyzés, amely elmondja, hogyan használod az adatokat, és linkel az adatvédelmi szabályzatodhoz.
• Tartalék elérhetőség, például az e-mail-cím vagy telefonszám azoknak, akik ezt részesítik előnyben.

Példa promptok

Az alap űrlap:

Adj hozzá kapcsolatfelvételi űrlapot a Kapcsolat oldalon névvel, e-mail-lel és üzenettel (mindegyik kötelező, az üzenet legfeljebb 2000 karakter). A beküldés egy szerveroldali útvonalra menjen, amely ellenőrzi a bemenetet, elmenti a contact_messages táblába a beérkezés idejével, és sikeres üzenetet mutat: „Köszönjük, egy munkanapon belül válaszolunk.” A mezőhibákat soron belül jelenítsd meg. Legyen jól használható telefonon.

E-mail-értesítések:

Amikor egy kapcsolatfelvételi üzenet mentésre kerül, küldj nekem értesítő e-mailt a hello@example.com címre a Resenddel, a kulcs a RESEND_API_KEY-ben. Állítsd a válasz címzettjét (reply-to) a feladó e-mail-címére, hogy közvetlenül válaszolhassak. Ha a küldés meghiúsul, tartsd meg a mentett üzenetet, és naplózd a hibát a kulcs felfedése nélkül.

Spamvédelem:

Adj spamvédelmet a kapcsolatfelvételi űrlaphoz: egy rejtett csapdamező, amelynek üresnek kell maradnia, egy szerveroldali korlát IP-címenként óránként 5 beküldésre, és utasíts el minden üzenetet, amely 3-nál több linket tartalmaz. A csapdamezős beküldéseket csendben dobd el, de a sikeres üzenetet mutasd meg.

Egy postafiók:

Adj hozzá jelszóval védett admin oldalt, amely a kapcsolatfelvételi üzeneteket listázza, a legújabbak elöl, „kezelve” jelölőnégyzettel és a nem kezelt üzenetekre szűrővel.

Lépésről lépésre

1. Döntsd el, hová mennek az üzenetek: ki kapja az értesítéseket, és ki válaszol.
2. Építsd meg az űrlapot a fenti mezőkkel, akadálymentes címkékkel és telefonbarát beviteli mezőkkel (használd az e-mail beviteli típust, hogy a telefonok a megfelelő billentyűzetet mutassák).
3. Hozd létre a szerveroldali útvonalat. Ellenőrzi a kötelező mezőket, az e-mail formátumát és a hosszkorlátokat. Soha ne bízz csak a böngészőoldali validációban.
4. Előbb mentsd az adatbázisba. Lásd hogyan adj adatbázist az appodhoz.
5. Állíts be e-mail-szolgáltatót. Hozz létre fiókot, ellenőrizd a küldő domainedet, és tárold az API-kulcsot titokként. A hogyan küldj e-maileket az appodból részletesen tárgyalja a domainbeállítást (SPF, DKIM).
6. Küldd el az értesítést a szerverről a mentés után. Küldőként a saját, ellenőrzött domainedet használd, a látogató címét pedig reply-to-ként – ne „feladóként” a látogató címét, mert az valószínűleg hamisításként lesz visszautasítva.
7. Opcionálisan automatikus választ küldhetsz a látogatónak, de tartsd rövidnek; a spamcímeknek küldött automatikus válaszok ronthatják a küldő hírnevedet.
8. Adj hozzá spamvédelmet: csapdamező, sebességkorlátozás, majd szükség esetén CAPTCHA-jellegű ellenőrzés.
9. Teszteld az élesített oldalon: küldj be egy üzenetet, nézd meg az adatbázist, az e-mail-fiókodat és a spam-mappát, kattints a válaszra.

A spam megállítása

A kapcsolatfelvételi űrlapokat a botok napokon belül megtalálják, amint élesbe kerülnek. Rétegezd a védelmet a legkevésbé tolakodótól a legtolakodóbb felé:

1. Csapdamező. Egy mező, amely embereknek rejtett; a botok kitöltik. Nem kerül semmibe a valódi látogatóknak.
2. Szerveroldali sebességkorlátozás. Korlátozza, hány üzenetet küldhet egy cím egy időszak alatt.
3. Tartalmi szabályok. Utasíts el üzeneteket, amelyek tele vannak linkekkel, vagy amelyek üzenetmezője üres vagy abszurd hosszú.
4. CAPTCHA-jellegű ellenőrzés, például Cloudflare Turnstile vagy Google reCAPTCHA. A tokent a szerveren kell ellenőrizni; egy csak a böngészőben futó ellenőrzés megkerülhető.

Gyakori hibák

• „Elküldve!” megjelenítése, amikor semmi nem ment el. A felület a szerver válasza előtt vagy attól függetlenül sikert mutat. Mindig várd meg a szervert.
• Csak e-mail, adatbázis nélkül. Egyetlen rosszul beállított kulcs miatt az érdeklődések hetekig eltűnnek anélkül, hogy bárki észrevenné.
• API-kulcs a front-end kódban. Bárki használhatja, hogy a nevedben küldjön e-mailt.
• Nem ellenőrzött küldő domain. Az értesítések a spamben landolnak, vagy soha nem érkeznek meg.
• Küldés a látogató e-mail-címéről „feladóként”. Használj helyette reply-to-t.
• Nincsenek hosszkorlátok. A botok hatalmas szövegblokkokat illesztenek be.
• Az élesített oldal sosem tesztelve. A kulcsok és domainek gyakran eltérnek az előnézet és az éles környezet között.

Ellenőrzőlista

• Rövid űrlap látható címkékkel és világos hibaüzenetekkel
• Szerveroldali validáció és hosszkorlátok
• Minden üzenet mentésre kerül az adatbázisba
• Az értesítő e-mail ellenőrzött domainről megy, reply-to beállítással
• Az e-mail API-kulcs csak szerveroldali titokként van tárolva
• Csapdamező és sebességkorlátozás működik
• A sikeres üzenet csak akkor jelenik meg, amikor a szerver megerősíti
• Az adatvédelmi megjegyzés linkel az adatvédelmi szabályzatra
• Végig tesztelve az élesített oldalon, a spam-mappát is beleértve

Kapcsolatfelvételi űrlapok a Mythexben

A Mythexben az egészet chatből építheted meg. Kérd az űrlapot és az adatbázist ugyanabban a promptban (vagy írd be a /database parancsot), hogy a beküldések megmaradjanak. A Mythexnek nincs beépített e-mail-küldő terméke, ezért az értesítésekhez hozz egy szolgáltatót, például a Resend, SendGrid vagy Postmark, add hozzá a kulcsát a /secrets paranccsal vagy a projektbeállításokban, és kérd az ügynöktől, hogy szerverről küldjön – lásd E-mail küldése az appodból. Mielőtt megbízol benne, futtasd az alkalmazás-tesztelést (/test) az űrlapon az előnézetben, majd publikálj, és teszteld az élő URL-en.

A kapcsolatfelvételi űrlap a legtöbb kisvállalkozói weboldal és landing oldal kulcsfontosságú része. Indulás előtt nézd át a biztonsági ellenőrzőlistát.

Kérdések