Kako dodati kontaktni obrazec na spletno stran (ki vas res doseže)

Da dodate kontaktni obrazec, ki deluje, zgradite kratek obrazec (ime, e-pošta, sporočilo), ga pošljite na strežniško pot, ki preveri vnos, shrani sporočilo v bazo podatkov in nato z ponudnikom e-pošte in skrivnim API ključem pošlje obvestilo na vaš naslov. Dodajte skrito polje past (honeypot) in omejitev hitrosti, da ustavite večino neželene pošte, prikažite jasno sporočilo o uspehu in preizkusite celoten tok na objavljeni strani. Pomembno je shranjevanje pred pošiljanjem e-pošte: če e-pošta kdaj odpove, povpraševanje imate še vedno.

Vaše možnosti

Če ima vaša stran že zaledje in bazo podatkov — kar pogosto imajo aplikacije, zgrajene z graditelji z umetno inteligenco —, je zadnja možnost najzanesljivejša in ohranja povpraševanja tam, kjer jih lahko vidite.

Kaj vsebuje dober kontaktni obrazec

• Čim manj polj. Ime, e-pošta, sporočilo. Spustni meni za zadevo (»Prodaja«, »Podpora«, »Drugo«) dodajte samo, če po njem usmerjate sporočila.
• Jasne oznake nad vsakim poljem, ne le besedilo namig, ki izgine.
• Koristno preverjanje: »Vnesite veljaven e-poštni naslov«, prikazano ob polju.
• Stanje uspeha, ki pove, kaj sledi: »Hvala — odgovorimo v enem delovnem dnevu.«
• Opomba o zasebnosti, ki pove, kako boste uporabili podatke, povezana z vašo politiko zasebnosti.
• Rezerva, na primer vaš e-poštni naslov ali telefonska številka za ljudi, ki to raje uporabijo.

Primeri pozivov

Osnovni obrazec:

Dodaj kontaktni obrazec na strani Stik s polji ime, e-pošta in sporočilo (vsa obvezna, sporočilo do 2.000 znakov). Pošlji ga na strežniško pot, ki preveri vnos, ga shrani v tabelo contact_messages s časom prejema in prikaže sporočilo o uspehu: »Hvala, odgovorili bomo v enem delovnem dnevu.« Napake polj prikaži sproti. Naj dobro deluje na telefonih.

E-poštna obvestila:

Ko je sporočilo stika shranjeno, mi pošlji obvestilo na e-pošto hello@example.com prek Resend s ključem v RESEND_API_KEY. Nastavi reply-to na e-pošto pošiljatelja, da lahko neposredno odgovorim. Če pošiljanje ne uspe, ohrani shranjeno sporočilo in zabeleži napako, ne da bi razkril ključ.

Zaščita pred neželeno pošto:

Dodaj zaščito pred neželeno pošto v kontaktni obrazec: skrito polje past, ki mora ostati prazno, omejitev 5 oddaj na IP na uro na strežniku in zavrni sporočila z več kot tremi povezavami. Oddaje s pastjo tiho zavrzi, a vseeno pokaži uspeh.

Nabiralnik:

Dodaj stran za skrbnike, zaščiteno z geslom, ki prikazuje sporočila stika od najnovejšega, s potrditveno ploščico »obdelano« in filtrom za neobdelana sporočila.

Korak za korakom

1. Odločite, kam gredo sporočila: kdo prejme obvestila in kdo odgovarja.
2. Zgradite obrazec z zgoraj navedenimi polji, dostopnimi oznakami in vnosnimi polji, prilagojenimi telefonom (uporabite vrsto vnosa e-pošta, da telefoni pokažejo pravilno tipkovnico).
3. Ustvarite strežniško pot. Preveri obvezna polja, obliko e-pošte in omejitve dolžine. Nikoli ne zaupajte preverjanju samo v brskalniku.
4. Najprej shranite v bazo podatkov. Glejte kako dodati bazo podatkov v svojo aplikacijo.
5. Nastavite ponudnika e-pošte. Ustvarite račun, preverite svojo pošiljateljsko domeno in API ključ shranite kot skrivnost. Kako pošiljati e-pošto iz svoje aplikacije podrobno pokriva nastavitev domene (SPF, DKIM).
6. Pošljite obvestilo s strežnika po shranjevanju. Za pošiljatelja uporabite svojo preverjeno domeno, za reply-to pa naslov obiskovalca — ne pošiljajte »od« naslova obiskovalca, saj bo verjetno zavrnjeno kot ponarejanje.
7. Po želji samodejno odgovorite obiskovalcu, vendar naj bo odgovor kratek; samodejni odgovori na naslove neželene pošte lahko škodijo ugledu vašega pošiljanja.
8. Dodajte zaščito pred neželeno pošto: past, omejitev hitrosti, nato preverjanje v slogu CAPTCHA, če je potrebno.
9. Preizkusite na objavljeni strani: oddajte obrazec, preverite bazo podatkov, nabiralnik in mapo neželene pošte, kliknite odgovori.

Ustavljanje neželene pošte

Kontaktni obrazci privabijo robote v nekaj dneh po objavi. Obrambe slojite od najmanj do najbolj vsiljivih:

1. Skrito polje past (honeypot). Polje, skrito pred ljudmi; roboti ga izpolnijo. Pravim obiskovalcem nič ne stane.
2. Omejitev hitrosti na strežniku. Omeji, koliko sporočil lahko en naslov pošlje v določenem obdobju.
3. Pravila vsebine. Zavrni sporočila, nabasana s povezavami, ali s praznim ali nesmiselno dolgim poljem za sporočilo.
4. Preverjanje v slogu CAPTCHA, na primer Cloudflare Turnstile ali Google reCAPTCHA. Žeton mora biti preverjen na vašem strežniku; preverjanje, ki teče samo v brskalniku, je mogoče preskočiti.

Pogoste napake

• Prikaz »Poslano!«, ko ničesar ni bilo poslano. Uporabniški vmesnik pokaže uspeh pred odgovorom strežnika ali ne glede nanj. Vedno počakajte na strežnik.
• Samo e-pošta, brez baze podatkov. En napačno nastavljen ključ in povpraševanja tedne izginjajo, ne da bi to kdo opazil.
• API ključ v kodi na strani odjemalca. Kdorkoli ga lahko uporabi za pošiljanje e-pošte v vašem imenu.
• Nepreverjena pošiljateljska domena. Obvestila končajo v neželeni pošti ali sploh ne prispejo.
• Pošiljanje »od« naslova obiskovalca. Namesto tega uporabite reply-to.
• Brez omejitev dolžine. Roboti prilepijo ogromne bloke besedila.
• Nikoli ne preizkusite žive strani. Ključi in domene se pogosto razlikujejo med predogledom in produkcijo.

Kontrolni seznam

• Kratek obrazec z vidnimi oznakami in jasnimi napakami
• Preverjanje na strežniku in omejitve dolžine
• Vsako sporočilo shranjeno v bazo podatkov
• Obvestilo poslano z preverjene domene, z nastavljenim reply-to
• API ključ e-pošte shranjen samo med skrivnostmi na strežniku
• Past in omejitev hitrosti nastavljeni
• Sporočilo o uspehu se prikaže šele, ko strežnik potrdi
• Opomba o zasebnosti povezana s politiko zasebnosti
• Preizkušeno od začetka do konca na objavljeni strani, vključno z mapo neželene pošte

Kontaktni obrazci v Mythexu

V Mythexu lahko celoten sistem zgradite iz klepeta. Zahtevajte obrazec in bazo podatkov v istem pozivu (ali vtipkajte /database), da se oddaje ohranijo. Mythex nima vgrajenega izdelka za pošiljanje e-pošte, zato za obvestila uporabite ponudnika, kot so Resend, SendGrid ali Postmark, njegov ključ dodajte prek /secrets ali nastavitev projekta in zahtevajte, da agent pošilja s strežnika — glejte Pošiljanje e-pošte iz svoje aplikacije. Preden se na to zanesete, zaženite App Testing (/test) na obrazcu v predogledu, nato objavite in preizkusite na živem naslovu URL.

Kontaktni obrazec je ključni del večine spletnih strani za mala podjetja in pristajalnih strani. Pred izdajo preverite kontrolni seznam varnosti.

Vprašanja