Cách Thiết Lập SendGrid Cho Biểu Mẫu Liên Hệ

Tại Sao Cần SendGrid?

Khi ai đó điền biểu mẫu liên hệ, trang web cần một cách để gửi email — một email cho bạn (thông báo) và một email cho khách hàng (xác nhận). SendGrid là dịch vụ gửi email xử lý việc này một cách đáng tin cậy.

Gói miễn phí: 100 email mỗi ngày, quá đủ cho hầu hết biểu mẫu liên hệ doanh nghiệp nhỏ.

Chỉ cần nếu bạn đã chọn tính năng Biểu Mẫu Liên Hệ trong SiteKit. Nếu trang web không có biểu mẫu liên hệ, bạn có thể bỏ qua hướng dẫn này.

Bước 1: Tạo Tài Khoản SendGrid

Truy cập sendgrid.com và nhấn Start for Free
Điền thông tin và tạo tài khoản
Xác minh địa chỉ email

Bước 2: Xác Minh Tên Miền Gửi

Đây là bước quan trọng nhất. Nếu không xác minh tên miền, email sẽ vào thư mục spam.

Trong SendGrid, vào Settings > Sender Authentication
Nhấn Authenticate Your Domain
Chọn nhà cung cấp DNS. Nếu tên miền trên Cloudflare, chọn Cloudflare
Nhập tên miền (ví dụ yourbusiness.com)
SendGrid sẽ cung cấp 3 bản ghi CNAME cần thêm

Thêm Bản Ghi DNS

Vào bảng điều khiển Cloudflare > tên miền của bạn > DNS:

Thêm từng bản ghi CNAME mà SendGrid cung cấp
Đồng thời thêm các bản ghi TXT sau:

Bản ghi SPF:

Type: TXT
Name: @
Value: v=spf1 include:sendgrid.net ~all

Bản ghi DMARC:

Type: TXT
Name: _dmarc
Value: v=DMARC1; p=none; rua=mailto:your-email@yourdomain.com

Tại sao cần nhiều bản ghi DNS như vậy? SPF cho máy chủ email biết rằng SendGrid được phép gửi email thay mặt tên miền của bạn. DKIM (các bản ghi CNAME) thêm chữ ký số. DMARC kết nối chúng lại với nhau. Nếu thiếu những bản ghi này, email sẽ bị đánh dấu là spam hoặc bị từ chối hoàn toàn.

Quay lại SendGrid và nhấn Verify. Thường mất vài phút để các thay đổi DNS được cập nhật.

Bước 3: Tạo API Key

Trong SendGrid, vào Settings > API Keys
Nhấn Create API Key
Đặt tên (ví dụ “Contact Form”)
Chọn Full Access (hoặc tối thiểu quyền Mail Send)
Nhấn Create & View
Sao chép API key ngay lập tức — bạn sẽ không thể xem lại nó

Bước 4: Thêm Biến Môi Trường

Trong bảng điều khiển Cloudflare Pages:

Vào dự án Pages > Settings > Environment variables
Thêm các biến sau cho môi trường Production:

Biến	Giá trị	Ví dụ
`SENDGRID_API_KEY`	API key từ Bước 3	`SG.xxxxx...`
`CONTACT_EMAIL`	Nơi nhận email từ biểu mẫu	`info@yourbusiness.com`
`FROM_EMAIL`	Địa chỉ “người gửi” trên email	`noreply@yourbusiness.com`

Nhấn Save
Kích hoạt triển khai mới (đẩy một commit hoặc nhấn Retry deployment trong Cloudflare)

Bước 5: Kiểm Tra Biểu Mẫu Liên Hệ

Truy cập trang web đang hoạt động
Điền biểu mẫu liên hệ bằng email của bạn
Gửi biểu mẫu
Kiểm tra hộp thư đến:
- Thông báo doanh nghiệp — sẽ đến tại CONTACT_EMAIL của bạn
- Xác nhận cho khách hàng — sẽ đến tại email bạn đã nhập trong biểu mẫu

Kiểm tra cả thư mục spam. Nếu email rơi vào spam, có thể các bản ghi DNS chưa được cập nhật hoàn toàn. Đợi một giờ rồi thử lại.

Khắc Phục Sự Cố

Email không đến

Kiểm tra lại biến môi trường SENDGRID_API_KEY trong Cloudflare
Đảm bảo xác minh tên miền trong SendGrid hiển thị đã xác minh
Kiểm tra nhật ký hàm Cloudflare Pages để tìm lỗi (trong bảng điều khiển dưới dự án > Functions)

Email vào spam

Xác minh tất cả bản ghi DNS đã được thiết lập (SPF, DKIM, DMARC)
Dùng địa chỉ “người gửi” thực trên tên miền đã xác minh (không phải địa chỉ gmail.com)
Thay đổi DNS có thể mất đến 48 giờ để cập nhật hoàn toàn

Biểu mẫu hoạt động trên máy nhưng không hoạt động trên production

Có thể chưa thiết lập biến môi trường. Kiểm tra Cloudflare Pages > Settings > Environment variables
CORS có thể chặn yêu cầu. Kiểm tra tên miền có khớp với các nguồn được phép trong functions/api/contact.js không