Kuidas lisada veebisaidile kontaktivorm (mis tegelikult jõuab sinuni)

Toimiva kontaktivormi lisamiseks koosta lühike vorm (nimi, e-post, sõnum), saada see serveri marsruudile, mis kontrollib sisendi, salvestab sõnumi andmebaasi ning saadab seejärel sulle teavituse e-posti teenusepakkuja kaudu salajase API-võtmega. Lisa rämpsposti enamiku peatamiseks peidetud mesiväli ja päringute piirang, näita selget edukuse teadet ning testi tervikuna avaldatud saidil. Oluline on salvestada enne e-posti saatmist: kui e-post ebaõnnestub, on päring sul ikka alles.

Sinu valikud

Kui su saidil on juba taustarakendus ja andmebaas — mida AI-rakendusehitajatega tehtud rakendustel sageli on —, on viimane valik kõige usaldusväärsem ja hoiab päringud kohas, kus neid näed.

Mis hea kontaktivorm sisaldab

• Võimalikult vähe välju. Nimi, e-post, sõnum. Lisa teemade rippmenüü („Müük“, „Tugi“, „Muu“) ainult siis, kui suunad päringuid selle järgi.
• Selged sildid iga välja kohal, mitte ainult kohatäitjad, mis kaovad.
• Abistav valideerimine: „Sisesta korrektne e-posti aadress“, näidatud välja kõrval.
• Edukuse olek, mis ütleb, mis edasi saab: „Aitäh — vastame ühe tööpäeva jooksul.“
• Privaatsusmärge, mis selgitab, kuidas andmeid kasutad, ja viitab su privaatsuspoliitikale.
• Varuvariant, näiteks su e-posti aadress või telefoninumber neile, kes eelistavad seda.

Näidisviibad

Lihtne vorm:

Lisa kontaktivorm kontaktilehele nime, e-posti ja sõnumiga (kõik kohustuslikud, sõnum kuni 2000 tähemärki). Saada see serveri marsruudile, mis kontrollib sisendit, salvestab selle tabelisse contact_messages koos saabumisajaga ning näitab edukuse teadet: „Aitäh, vastame ühe tööpäeva jooksul.“ Näita väljade vigu reakohselt. Tee see hästi toimivaks telefonides.

E-posti teavitused:

Kui kontaktsõnum on salvestatud, saada mulle teavitus aadressile hello@example.com, kasutades Resendit võtmega RESEND_API_KEY. Sea vastusaadressiks saatja e-post, et saaksin otse vastata. Kui saatmine ebaõnnestub, säilita salvestatud sõnum ja logi viga ilma võtit paljastamata.

Rämpsposti kaitse:

Lisa kontaktivormile rämpsposti kaitse: peidetud mesiväli, mis peab jääma tühjaks, piirang 5 saatmist IP kohta tunnis serveris ning keeldu sõnumitest, mis sisaldavad rohkem kui 3 linki. Hülga mesivälja saatmised vaikselt, kuid näita siiski edukuse teadet.

Sisendkast:

Lisa parooliga kaitstud administraatorileht, kus on kontaktsõnumid uusimad esimesena, märkeruut „töödeldud“ ja filter töötlemata sõnumitele.

Samm-sammult

1. Otsusta, kuhu sõnumid lähevad: kes saab teavitusi ja kes vastab.
2. Ehita vorm eespool nimetatud väljadega, ligipääsetavate siltidega ja mobiilisõbralike sisenditega (kasuta e-posti sisendtüüpi, et telefonid näitaksid õiget klaviatuuri).
3. Loo serveri marsruut. See kontrollib kohustuslikke välju, e-posti vormingut ja pikkuse piire. Ära usalda kunagi ainult brauseri poolset valideerimist.
4. Salvesta esmalt andmebaasi. Vaata kuidas lisada oma rakendusele andmebaas.
5. Seadista e-posti pakkuja. Loo konto, kinnita oma saatedomeen ja hoia API-võti saladusena. Kuidas saata oma rakendusest e-posti käsitleb domeeni seadistamist (SPF, DKIM) üksikasjalikult.
6. Saada teavitus serverist pärast salvestamist. Kasuta saatjana oma kinnitatud domeeni ja külastaja aadressi vastusaadressina — ära saada „saatjana“ külastaja aadressilt, see lükatakse tõenäoliselt tagasi võltsimisena.
7. Võib saata automaatvastuse külastajale, kuid hoia see lühike; automaatvastused rämpsposti aadressidele võivad kahjustada su saatja mainet.
8. Lisa rämpsposti kaitse: mesiväli, päringupiirang, vajadusel CAPTCHA-taoline kontroll.
9. Testi avaldatud saidil: saada vorm, kontrolli andmebaasi, kontrolli oma postkasti ja rämpsposti kausta, vasta sõnumile.

Rämpsposti peatamine

Kontaktivormid meelitavad roboteid ligi mõne päevaga pärast käivitamist. Kihista kaitseid vähem tungivast kuni tungivamani:

1. Mesiväli. Inimestele peidetud väli; robotid täidavad selle. Ei maksa päris külastajatele midagi.
2. Serveripoolne päringupiirang. Piirab, mitu sõnumit üks aadress saab saata ajavahemikus.
3. Sisureeglid. Keeldu sõnumitest, mis on täis linke, või sõnumi väljadest, mis on tühjad või absurdselt pikad.
4. CAPTCHA-taoline kontroll, näiteks Cloudflare Turnstile või Google reCAPTCHA. Token peab olema kontrollitud su serveris; ainult brauseris töötav kontroll võib mööda minna.

Levinud vead

• „Saadetud!“ näitamine, kui midagi ei saadetud. Kasutajaliides ütleb edu enne serveri vastust või sõltumata sellest. Oota alati serveri kinnitust.
• Ainult e-post, ilma andmebaasita. Üks valesti seadistatud võti ja päringud kaovad nädalateks, keegi sellest aru saamata.
• API-võti esirakenduse koodis. Igaüks saab seda kasutada, et saata e-posti sinu nimel.
• Kinnitamata saatedomeen. Teavitused jõuavad rämpsposti või ei jõua kunagi kohale.
• Saatmine külastaja e-posti „saatjana“. Kasuta selle asemel vastusaadressi.
• Pikkuse piirangute puudumine. Robotid kleebivad hiiglaslikke tekstiplokke.
• Live-saidi testimata jätmine. Võtmed ja domeenid erinevad sageli eelvaate ja tootmise vahel.

Kontrollnimekiri

• Lühike vorm nähtavate siltide ja selgete vigadega
• Serveripoolne valideerimine ja pikkuse piirangud
• Iga sõnum salvestatud andmebaasi
• Teavitusmeil saadetud kinnitatud domeenilt, vastusaadress seatud
• E-posti API-võti on hoitud ainult serveri saladustes
• Mesiväli ja päringupiirang on paigas
• Edukuse teade ilmub alles pärast serveri kinnitust
• Privaatsusmärge viitab su privaatsuspoliitikale
• Testitud tervikuna avaldatud saidil, sh rämpsposti kaust

Kontaktivormid Mythexis

Mythexis saad selle kogu ehitada vestlusest. Palu vorm ja andmebaas samas viibas (või kirjuta /database), et esitused püsiksid. Mythexil ei ole sisseehitatud e-posti saatmise toodet, seega teavituste jaoks tood kaasa pakkuja, näiteks Resend, SendGrid või Postmark, lisa selle võti käsuga /secrets või projekti seadetes ning palu agendil saata e-post serverist — vaata E-posti saatmine oma rakendusest. Enne kui sellele toetud, käivita vormi jaoks eelvaates App Testing (/test), seejärel avalda ja testi live-URL-il.

Kontaktivorm on oluline osa enamikust väikeettevõtete veebisaitidest ja maandumislehtedest. Vaata enne käivitamist üle turvakontrollnimekiri.

Küsimused