วิธีเพิ่มฟอร์มติดต่อในเว็บไซต์ของคุณ (ที่ส่งข้อความถึงคุณจริงๆ)

หากต้องการเพิ่มฟอร์มติดต่อที่ใช้งานได้ ให้สร้างฟอร์มสั้นๆ (ชื่อ อีเมล ข้อความ) ส่งไปยัง server route ที่ตรวจสอบข้อมูล บันทึกข้อความลงฐานข้อมูล แล้วส่งอีเมลแจ้งเตือนถึงคุณผ่านผู้ให้บริการอีเมลด้วย API key ที่เป็นความลับ เพิ่มฟิลด์ honeypot ที่ซ่อนอยู่และการจำกัดอัตราการส่งเพื่อหยุดสแปมส่วนใหญ่ แสดงข้อความสำเร็จที่ชัดเจน และทดสอบตั้งแต่ต้นจนจบบนเว็บที่เผยแพร่แล้ว การบันทึกก่อนส่งอีเมลคือส่วนสำคัญ: หากอีเมลล้มเหลว คุณยังมีข้อความสอบถามนั้นอยู่

ตัวเลือกของคุณ

หากเว็บไซต์ของคุณมี backend และฐานข้อมูลอยู่แล้ว ซึ่งแอปที่สร้างด้วย AI app builder มักมี ตัวเลือกสุดท้ายคือตัวที่เชื่อถือได้ที่สุด และเก็บสอบถามไว้ในที่ที่คุณมองเห็น

ฟอร์มติดต่อที่ดีมีอะไรบ้าง

• ฟิลด์น้อยที่สุดเท่าที่จำเป็น ชื่อ อีเมล ข้อความ เพิ่มตัวเลือกหัวข้อ ("ฝ่ายขาย" "ซัพพอร์ต" "อื่นๆ") เฉพาะเมื่อคุณจะแยกข้อความตามนั้น
• ป้ายกำกับที่ชัดเจน เหนือแต่ละฟิลด์ ไม่ใช่แค่ placeholder ที่หายไปเมื่อพิมพ์
• การตรวจสอบที่เป็นประโยชน์ "กรอกที่อยู่อีเมลที่ถูกต้อง" แสดงข้างฟิลด์
• สถานะสำเร็จ ที่บอกว่าจะเกิดอะไรต่อไป: "ขอบคุณ เราจะตอบกลับภายในหนึ่งวันทำการ"
• หมายเหตุความเป็นส่วนตัว ที่บอกว่าคุณจะใช้รายละเอียดอย่างไร พร้อมลิงก์ไปนโยบายความเป็นส่วนตัวของคุณ
• ทางเลือกสำรอง เช่น อีเมลหรือเบอร์โทรของคุณ สำหรับคนที่ชอบวิธีนั้น

ตัวอย่างพรอมต์

ฟอร์มพื้นฐาน:

เพิ่มฟอร์มติดต่อในหน้าติดต่อ ที่มีชื่อ อีเมล และข้อความ (ทั้งหมดต้องกรอก ข้อความไม่เกิน 2,000 ตัวอักษร) ส่งไปยัง server route ที่ตรวจสอบข้อมูล บันทึกลงตาราง contact_messages พร้อมเวลาที่ได้รับ และแสดงข้อความสำเร็จ: "ขอบคุณ เราจะตอบกลับภายในหนึ่งวันทำการ" แสดงข้อผิดพลาดของแต่ละฟิลด์ตรงนั้น และให้ใช้งานได้ดีบนโทรศัพท์

การแจ้งเตือนทางอีเมล:

เมื่อบันทึกข้อความติดต่อ ให้ส่งอีเมลแจ้งเตือนถึงฉันที่ hello@example.com โดยใช้ Resend กับคีย์ใน RESEND_API_KEY ตั้ง reply-to เป็นอีเมลของผู้ส่งเพื่อให้ฉันตอบกลับได้โดยตรง หากการส่งล้มเหลว ให้เก็บข้อความที่บันทึกไว้และบันทึกข้อผิดพลาดโดยไม่เปิดเผยคีย์

การป้องกันสแปม:

เพิ่มการป้องกันสแปมในฟอร์มติดต่อ: ฟิลด์ honeypot ที่ซ่อนอยู่ซึ่งต้องว่างเปล่า จำกัดการส่งไม่เกิน 5 ครั้งต่อ IP ต่อชั่วโมงบนเซิร์ฟเวอร์ และปฏิเสธข้อความที่มีลิงก์เกิน 3 ลิงก์ ทิ้งการส่ง honeypot อย่างเงียบๆ แต่ยังแสดงว่าสำเร็จ

กล่องข้อความ:

เพิ่มหน้าผู้ดูแลที่มีการป้องกันด้วยรหัสผ่าน แสดงข้อความติดต่อเรียงจากใหม่สุด พร้อมช่องทำเครื่องหมาย "จัดการแล้ว" และตัวกรองสำหรับข้อความที่ยังไม่ได้จัดการ

ทีละขั้นตอน

1. ตัดสินใจว่าข้อความจะไปที่ไหน ใครได้รับการแจ้งเตือน และใครตอบ
2. สร้างฟอร์ม พร้อมฟิลด์ข้างต้น ป้ายกำกับที่เข้าถึงได้ และช่องกรอกที่เหมาะกับมือถือ (ใช้ชนิดอีเมลของ input เพื่อให้โทรศัพท์แสดงคีย์บอร์ดที่ถูกต้อง)
3. สร้าง server route ตรวจว่ามีฟิลด์ที่จำเป็น รูปแบบอีเมล และขีดจำกัดความยาว อย่าเชื่อการตรวจสอบที่ทำในเบราว์เซอร์เพียงอย่างเดียว
4. บันทึกลงฐานข้อมูล ก่อนเป็นอันดับแรก ดู วิธีเพิ่มฐานข้อมูลในแอปของคุณ
5. ตั้งค่าผู้ให้บริการอีเมล สร้างบัญชี ยืนยันโดเมนผู้ส่ง และเก็บ API key เป็น secret วิธีส่งอีเมลจากแอปของคุณ ครอบคลุมการตั้งค่าโดเมนอย่างละเอียด (SPF, DKIM)
6. ส่งการแจ้งเตือน จากเซิร์ฟเวอร์หลังการบันทึก ใช้โดเมนที่ยืนยันแล้วเป็นผู้ส่ง และใช้อีเมลของผู้เข้าชมเป็น reply-to อย่าส่ง "จาก" อีเมลของผู้เข้าชม เพราะมักจะถูกปฏิเสธว่าเป็นการปลอมแปลง
7. ตอบกลับอัตโนมัติไปยังผู้เข้าชมได้ แต่ให้สั้น เพราะการตอบอัตโนมัติไปยังที่อยู่สแปมอาจทำลายชื่อเสียงผู้ส่งของคุณ
8. เพิ่มการป้องกันสแปม: honeypot การจำกัดอัตรา แล้วค่อยใช้ CAPTCHA หากจำเป็น
9. ทดสอบบนเว็บที่เผยแพร่แล้ว: ส่งข้อความ ตรวจฐานข้อมูล ตรวจกล่องจดหมายและโฟลเดอร์สแปม แล้วกดตอบกลับ

การหยุดสแปม

ฟอร์มติดต่อดึงดูดบอทภายในไม่กี่วันหลังเปิดตัว ให้ชั้นการป้องกันเรียงจากน้อยที่สุดไปมากที่สุด:

1. ฟิลด์ honeypot ฟิลด์ที่ซ่อนจากมนุษย์ บอทจะกรอก ไม่กระทบผู้เข้าชมจริง
2. การจำกัดอัตราบนเซิร์ฟเวอร์ จำกัดจำนวนข้อความที่ที่อยู่หนึ่งส่งได้ในช่วงเวลาหนึ่ง
3. กฎเนื้อหา ปฏิเสธข้อความที่ยัดลิงก์ หรือฟิลด์ข้อความที่ว่างเปล่าหรือยาวเกินไปอย่างไร้เหตุผล
4. การตรวจสอบแบบ CAPTCHA เช่น Cloudflare Turnstile หรือ Google reCAPTCHA โทเคนต้องถูกตรวจสอบบนเซิร์ฟเวอร์ของคุณ การตรวจสอบที่ทำงานเฉพาะในเบราว์เซอร์สามารถถูกข้ามได้

ความผิดพลาดที่พบบ่อย

• แสดง "ส่งแล้ว!" ทั้งที่ไม่ได้ส่งอะไร UI แสดงว่าสำเร็จก่อนหรือไม่ว่าการตอบกลับของเซิร์ฟเวอร์จะเป็นอย่างไร ให้รอผลจากเซิร์ฟเวอร์เสมอ
• มีแต่อีเมล ไม่มีฐานข้อมูล คีย์ที่ตั้งค่าผิดเพียงตัวเดียวทำให้สอบถามหายไปหลายสัปดาห์โดยไม่มีใครสังเกต
• API key อยู่ในโค้ดฝั่งหน้าบ้าน ใครก็ใช้มันส่งอีเมลในนามคุณได้
• โดเมนผู้ส่งที่ยังไม่ได้รับการยืนยัน การแจ้งเตือนไปอยู่ในสแปมหรือไม่ถึงเลย
• ส่ง "จาก" อีเมลของผู้เข้าชม ให้ใช้ reply-to แทน
• ไม่มีขีดจำกัดความยาว บอทวางข้อความยาวๆ จำนวนมาก
• ไม่เคยทดสอบบนเว็บจริง คีย์และโดเมนมักต่างกันระหว่างพรีวิวกับโปรดักชัน

เช็กลิสต์

• ฟอร์มสั้นพร้อมป้ายกำกับที่มองเห็นและข้อผิดพลาดที่ชัดเจน
• การตรวจสอบฝั่งเซิร์ฟเวอร์และขีดจำกัดความยาว
• ทุกข้อความถูกบันทึกลงฐานข้อมูล
• อีเมลแจ้งเตือนส่งจากโดเมนที่ยืนยันแล้ว พร้อมตั้ง reply-to
• API key ของอีเมลเก็บไว้เฉพาะใน secret ฝั่งเซิร์ฟเวอร์
• มี honeypot และการจำกัดอัตรา
• ข้อความสำเร็จปรากฏเมื่อเซิร์ฟเวอร์ยืนยันเท่านั้น
• หมายเหตุความเป็นส่วนตัวลิงก์ไปนโยบายความเป็นส่วนตัวของคุณ
• ทดสอบตั้งแต่ต้นจนจบบนเว็บที่เผยแพร่แล้ว รวมถึงโฟลเดอร์สแปม

ฟอร์มติดต่อใน Mythex

ใน Mythex คุณสร้างทั้งหมดนี้จากแชทได้ ขอฟอร์มและฐานข้อมูลในพรอมต์เดียวกัน (หรือพิมพ์ /database) เพื่อให้ข้อมูลที่ส่งมาคงอยู่ Mythex ไม่มีผลิตภัณฑ์ส่งอีเมลในตัว ดังนั้นสำหรับการแจ้งเตือน คุณนำผู้ให้บริการ เช่น Resend, SendGrid หรือ Postmark มาเพิ่มคีย์ด้วย /secrets หรือการตั้งค่าโปรเจกต์ แล้วขอให้เอเจนต์ส่งจากเซิร์ฟเวอร์ ดู ส่งอีเมลจากแอปของคุณ ก่อนพึ่งพาฟอร์ม ให้รัน App Testing (/test) กับฟอร์มในพรีวิว แล้วเผยแพร่และทดสอบบน URL จริง

ฟอร์มติดต่อเป็นส่วนสำคัญของ เว็บไซต์ธุรกิจขนาดเล็ก ส่วนใหญ่และ หน้าลงจอด ตรวจ เช็กลิสต์ความปลอดภัย ก่อนเปิดตัว

คำถาม