Cách thêm biểu mẫu liên hệ vào website (để bạn thực sự nhận được tin)

Để thêm một biểu mẫu liên hệ hoạt động tốt, hãy xây một biểu mẫu ngắn (tên, email, nội dung), gửi nó đến một route trên máy chủ để kiểm tra dữ liệu đầu vào, lưu tin nhắn vào cơ sở dữ liệu, rồi gửi email thông báo cho bạn qua một nhà cung cấp email bằng một API key bí mật. Thêm một trường honeypot ẩn và giới hạn tần suất để chặn phần lớn spam, hiển thị thông báo thành công rõ ràng, và kiểm thử đầu cuối trên website đã xuất bản. Lưu trước khi gửi email là phần quan trọng: nếu email bị lỗi, bạn vẫn còn yêu cầu liên hệ.

Các lựa chọn của bạn

Nếu website của bạn đã có backend và cơ sở dữ liệu — điều mà các app xây bằng công cụ tạo app AI thường có — lựa chọn cuối cùng là đáng tin cậy nhất và giữ các yêu cầu liên hệ ở nơi bạn có thể thấy.

Một biểu mẫu liên hệ tốt có những gì

• Càng ít trường càng tốt. Tên, email, nội dung. Thêm danh sách chủ đề ("Bán hàng", "Hỗ trợ", "Khác") chỉ khi bạn định phân loại theo đó.
• Nhãn rõ ràng phía trên mỗi trường, không chỉ là chữ gợi ý sẽ biến mất.
• Kiểm tra dữ liệu hữu ích: "Nhập địa chỉ email hợp lệ", hiển thị ngay cạnh trường.
• Trạng thái thành công nói rõ điều gì xảy ra tiếp theo: "Cảm ơn — chúng tôi sẽ trả lời trong một ngày làm việc."
• Ghi chú quyền riêng tư cho biết bạn sẽ dùng thông tin như thế nào, liên kết đến chính sách bảo mật của bạn.
• Phương án dự phòng như địa chỉ email hoặc số điện thoại cho những ai thích cách đó hơn.

Ví dụ prompt

Biểu mẫu cơ bản:

Thêm một biểu mẫu liên hệ trên trang Contact với tên, email và nội dung (tất cả bắt buộc, nội dung tối đa 2.000 ký tự). Gửi đến một route trên máy chủ để kiểm tra dữ liệu đầu vào, lưu vào bảng contact_messages kèm thời gian nhận, và hiển thị thông báo thành công: "Cảm ơn, chúng tôi sẽ trả lời trong một ngày làm việc." Hiển thị lỗi từng trường ngay trong biểu mẫu. Đảm bảo hoạt động tốt trên điện thoại.

Thông báo email:

Khi một tin nhắn liên hệ được lưu, gửi cho tôi email thông báo đến hello@example.com bằng Resend, với key trong RESEND_API_KEY. Đặt reply-to là email của người gửi để tôi có thể trả lời trực tiếp. Nếu gửi thất bại, giữ tin nhắn đã lưu và ghi log lỗi mà không để lộ key.

Chống spam:

Thêm bảo vệ spam cho biểu mẫu liên hệ: một trường honeypot ẩn phải để trống, giới hạn 5 lần gửi mỗi IP mỗi giờ trên máy chủ, và từ chối tin nhắn có hơn 3 liên kết. Âm thầm bỏ các lần gửi honeypot nhưng vẫn hiển thị thông báo thành công.

Hộp thư:

Thêm một trang quản trị có mật khẩu liệt kê các tin nhắn liên hệ, mới nhất trước, có ô "đã xử lý" và bộ lọc cho các tin chưa xử lý.

Từng bước

1. Quyết định tin nhắn sẽ đi đâu: ai nhận thông báo, và ai trả lời.
2. Xây biểu mẫu với các trường ở trên, nhãn có thể truy cập và ô nhập thân thiện với điện thoại (dùng kiểu nhập email để điện thoại hiển thị đúng bàn phím).
3. Tạo route trên máy chủ. Nó kiểm tra các trường bắt buộc, định dạng email và giới hạn độ dài. Đừng bao giờ tin vào kiểm tra chỉ có ở trình duyệt.
4. Lưu vào cơ sở dữ liệu trước. Xem cách thêm cơ sở dữ liệu vào app.
5. Thiết lập nhà cung cấp email. Tạo tài khoản, xác minh tên miền gửi, và lưu API key như một bí mật. Cách gửi email từ app trình bày chi tiết về thiết lập tên miền (SPF, DKIM).
6. Gửi thông báo từ máy chủ sau khi lưu. Dùng tên miền đã xác minh làm người gửi và email của khách làm reply-to — đừng gửi "từ" địa chỉ của khách, vì rất có thể nó sẽ bị từ chối như giả mạo.
7. Tùy chọn tự động trả lời khách, nhưng giữ thật ngắn; tự động trả lời cho địa chỉ spam có thể làm hại uy tín người gửi của bạn.
8. Thêm bảo vệ spam: honeypot, giới hạn tần suất, rồi một kiểm tra kiểu CAPTCHA nếu cần.
9. Kiểm thử trên website đã xuất bản: gửi thử, kiểm tra cơ sở dữ liệu, kiểm tra hộp thư và thư rác, bấm trả lời.

Chặn spam

Biểu mẫu liên hệ thu hút bot chỉ vài ngày sau khi ra mắt. Hãy xếp lớp phòng thủ từ nhẹ nhất đến can thiệp nhiều nhất:

1. Trường honeypot. Một trường ẩn với người thật; bot sẽ điền vào. Không tốn gì với khách thật.
2. Giới hạn tần suất trên máy chủ. Giới hạn số tin một địa chỉ có thể gửi trong một khoảng thời gian.
3. Quy tắc nội dung. Từ chối tin nhắn chứa nhiều liên kết, hoặc trường nội dung trống hay dài bất thường.
4. Kiểm tra kiểu CAPTCHA, như Cloudflare Turnstile hoặc Google reCAPTCHA. Token phải được xác minh trên máy chủ của bạn; một kiểm tra chỉ chạy trong trình duyệt có thể bị bỏ qua.

Những lỗi thường gặp

• Hiển thị "Đã gửi!" khi thực tế chưa gửi gì. Giao diện báo thành công trước hoặc bất kể phản hồi của máy chủ. Hãy luôn đợi xác nhận từ máy chủ.
• Chỉ có email, không có cơ sở dữ liệu. Một key cấu hình sai và yêu cầu liên hệ biến mất hàng tuần mà không ai nhận ra.
• API key trong mã phía giao diện. Bất kỳ ai cũng có thể dùng nó để gửi email với danh nghĩa bạn.
• Tên miền gửi chưa xác minh. Thông báo rơi vào thư rác hoặc không bao giờ đến.
• Gửi "từ" email của khách. Hãy dùng reply-to.
• Không có giới hạn độ dài. Bot dán những khối văn bản khổng lồ.
• Không bao giờ thử trên website thật. Key và tên miền thường khác nhau giữa bản xem trước và production.

Danh sách kiểm tra

• Biểu mẫu ngắn, có nhãn rõ ràng và lỗi dễ hiểu
• Kiểm tra dữ liệu và giới hạn độ dài trên máy chủ
• Mọi tin nhắn đều được lưu vào cơ sở dữ liệu
• Email thông báo gửi từ tên miền đã xác minh, có đặt reply-to
• API key email chỉ lưu trong bí mật phía máy chủ
• Đã có honeypot và giới hạn tần suất
• Thông báo thành công chỉ hiện sau khi máy chủ xác nhận
• Ghi chú quyền riêng tư liên kết đến chính sách bảo mật
• Đã kiểm thử đầu cuối trên website đã xuất bản, kể cả thư rác

Biểu mẫu liên hệ trong Mythex

Trong Mythex, bạn có thể xây toàn bộ từ chat. Hãy yêu cầu biểu mẫu và cơ sở dữ liệu trong cùng một prompt (hoặc gõ /database) để các lần gửi được lưu lại. Mythex chưa có sản phẩm gửi email tích hợp sẵn, nên với thông báo bạn mang theo một nhà cung cấp như Resend, SendGrid hoặc Postmark, thêm key bằng /secrets hoặc cài đặt dự án, và yêu cầu agent gửi từ máy chủ — xem Gửi email từ app. Trước khi dựa vào nó, hãy chạy App Testing (/test) với biểu mẫu trong Preview, rồi xuất bản và kiểm thử trên URL thật.

Biểu mẫu liên hệ là một phần quan trọng của hầu hết website doanh nghiệp nhỏ và trang đích. Kiểm tra danh sách bảo mật trước khi ra mắt.

Câu hỏi thường gặp