Cách Xử Lý Form Submissions của Webflow Mà Không Cần Custom Backend

Form liên hệ trên Webflow trông rất chuyên nghiệp ngay từ đầu, nhưng Webflow chỉ gửi email thông báo cho bạn khi có dữ liệu được submit - nó không lưu trữ dữ liệu vào cơ sở dữ liệu, không kết nối với CRM, và không kích hoạt bất kỳ logic tùy chỉnh nào. Nếu bạn cần nhiều hơn một email thông báo đơn giản, bạn cần định tuyến các form submission của Webflow qua một dịch vụ bên ngoài. Tin tốt là bạn hoàn toàn có thể làm điều này mà không cần viết một dòng code backend nào.

Webflow cung cấp gì theo mặc định

Trình xử lý form tích hợp sẵn của Webflow làm được ba việc: gửi email thông báo cho chủ trang web, hiển thị thông báo thành công, và ghi lại các submission trong bảng điều khiển Webflow (trên các gói trả phí). Điều này đủ dùng cho form liên hệ cơ bản trên các trang nhỏ, nhưng sẽ nhanh chóng không đáp ứng được khi bạn cần bất kỳ điều nào sau đây:

• Tự động phản hồi đến người vừa điền form
• Chuyển tiếp submission đến hộp thư của một nhóm cụ thể hoặc CRM
• Logic có điều kiện (ví dụ: phân loại lead theo sản phẩm quan tâm)
• Lọc spam nâng cao hơn so với honeypot cơ bản của Webflow
• Nhật ký giao nhận đáng tin cậy với timestamp và cơ chế thử lại

Không có tính năng nào trong số này được hỗ trợ sẵn. Bạn cần một lớp xử lý bên ngoài, và có ba cách thực tế để thêm vào.

Tích hợp sẵn có - Zapier và Make

Webflow có tích hợp trực tiếp với Zapier và Make (trước đây là Integromat). Khi có một form submission mới, trigger sẽ kích hoạt và bạn có thể nối chuỗi bất kỳ hành động nào: thêm hàng vào Google Sheets, tạo liên hệ trong HubSpot, gửi tin nhắn Slack, và nhiều hơn nữa.

Đây là hướng không cần code mà hầu hết các designer chọn đầu tiên. Các bước thiết lập như sau:

1. Trong Webflow, vào Cài đặt dự án > Tích hợp và kết nối tài khoản Zapier của bạn.
2. Trong Zapier, tạo một Zap mới với trigger Webflow - New Form Submission .
3. Chọn form cụ thể theo tên.
4. Thêm bước hành động (Gmail, Slack, Airtable, v.v.).
5. Kiểm tra bằng một submission thực tế rồi bật Zap lên.

Make có giá rẻ hơn cho các quy trình phức tạp, nhưng cả hai nền tảng đều tạo ra một điểm phụ thuộc: nếu Zapier hoặc Make gặp sự cố, hoặc tài khoản của bạn chạm giới hạn, các submission sẽ thất bại trong im lặng hoặc bị xếp hàng chờ.

Sử dụng Webflow Webhook

Webflow webhook là một cách tiếp cận trực tiếp hơn. Webflow sẽ gửi một HTTP POST đến URL bạn chỉ định mỗi khi có form được submit. Bạn kiểm soát endpoint nhận dữ liệu, vì vậy bạn có thể xử lý payload theo bất kỳ cách nào.

Để thiết lập:

1. Vào Cài đặt dự án > Tích hợp > Webhooks trong Webflow.
2. Nhấn Thêm Webhook , chọn trigger Form Submission .
3. Dán URL endpoint của dịch vụ nhận vào.
4. Lưu lại và kiểm tra bằng một submission thực tế.

Payload mà Webflow gửi đi là một đối tượng JSON chứa tất cả giá trị các trường, tên form và metadata của trang. Một payload điển hình trông như sau:

{
  "name": "Contact Form",
  "site": "my-webflow-site",
  "data": {
    "Name": "Jane Smith",
    "Email": "[email protected]",
    "Message": "Hi, I'd like a quote."
  },
  "submittedAt": "2024-11-15T10:22:00Z"
}

Vấn đề ở đây là: bạn cần có thứ gì đó để nhận webhook đó. Các lựa chọn bao gồm một Cloudflare Worker nhỏ, một quy trình Pipedream, hoặc một backend form chuyên dụng. Tự viết receiver chính là vấn đề "backend tùy chỉnh" mà bài viết này đang cố giúp bạn tránh. Đó là lý do tại sao các dịch vụ form-to-email trở thành giải pháp gọn gàng nhất.

Thay thế endpoint của form bằng dịch vụ form chuyên dụng

Thay vì dùng trình xử lý form của Webflow, bạn có thể trỏ thuộc tính action của form sang một dịch vụ form bên thứ ba. Dịch vụ đó sẽ nhận POST, xác thực dữ liệu, lọc spam và gửi email kết quả cho bạn. Phía bạn không cần backend nào cả.

Quy trình trong Webflow như sau:

1. Trong Webflow Designer, chọn phần tử form của bạn.
2. Trong bảng Cài đặt Form , đặt trường Action thành URL endpoint của dịch vụ form (ví dụ: https://sendform.net/!your-form-id ).
3. Đặt Method thành POST .
4. Đảm bảo mỗi input có thuộc tính name - Webflow mặc định đã thiết lập sẵn.
5. Xuất bản trang và kiểm tra một submission.

Cách tiếp cận này bỏ qua hoàn toàn trình xử lý form của Webflow. Submission đi thẳng từ trình duyệt của người dùng đến dịch vụ form. Bạn nhận được email, dịch vụ xử lý việc thử lại và lọc spam, còn Webflow chỉ đóng vai trò là lớp giao diện.

Cách này cũng hoạt động tương tự cho bất kỳ trang tĩnh hoặc trang no-code nào. Nếu bạn đang host trên GitHub Pages hoặc Cloudflare Pages, bài viết về host trang web tĩnh miễn phí với form liên hệ hoạt động đầy đủ cũng áp dụng đúng cách tiếp cận này.

Sendform so với các lựa chọn thay thế

Có nhiều dịch vụ form tương thích với Webflow. Dưới đây là so sánh các lựa chọn chính theo những tiêu chí thực sự quan trọng khi thiết lập form liên hệ:

Sendform nổi bật vì một số lý do cụ thể ngoài những gì bảng so sánh có thể hiển thị:

• Thiết lập không ma sát: Bạn nhận được URL endpoint của form mà không cần tạo tài khoản trước. Dán vào trường Action của Webflow là xong.
• Không lưu trữ submission theo mặc định: Sendform gửi dữ liệu qua email và không giữ lại trên máy chủ của họ - đây là mặc định đúng đắn cho việc tuân thủ GDPR. Các đối thủ như Formspree lưu trữ toàn bộ submission trong bảng điều khiển của họ, nghĩa là dữ liệu người dùng của bạn nằm trên máy chủ bên thứ ba vô thời hạn.
• Thân thiện với developer nhưng cũng dùng được không cần code: Khác với Zapier, không có quy trình nào cần bảo trì. Khác với Netlify Forms, nó không bị ràng buộc với nhà cung cấp hosting cụ thể - hoạt động với Webflow, GitHub Pages, hoặc bất kỳ host nào khác.
• Gói miễn phí thực sự minh bạch: Không có rào cản kiểu "nâng cấp để mở khóa chuyển hướng" mà các dịch vụ khác dùng để đẩy bạn lên gói trả phí.

Nên chọn phương án nào?

Câu trả lời đúng phụ thuộc vào những gì bạn thực sự cần sau khi form được submit:

• Chỉ cần thông báo qua email: Dùng Sendform. Dán URL endpoint vào trường Action của Webflow, xong trong hai phút.
• Email kết hợp đồng bộ CRM hoặc bảng tính: Dùng Sendform để gửi email và tùy chọn thêm một bước Zapier được kích hoạt bởi email đến, hoặc dùng webhook output của Sendform nếu gói của bạn hỗ trợ.
• Tự động hóa nhiều bước phức tạp: Webflow webhook kết hợp Make hoặc Zapier phù hợp ở đây, nhưng hãy tính toán ngân sách cho gói trả phí.
• Bạn đang dùng Netlify: Netlify Forms ổn cho các trường hợp đơn giản, nhưng bạn sẽ nhanh chóng chạm ngưỡng 100 submission/tháng trên bất kỳ trang nào có lưu lượng truy cập.

Đối với phần lớn các form liên hệ Webflow - một form với các trường tên, email và tin nhắn cần đến hộp thư của bạn một cách đáng tin cậy - Sendform là con đường nhanh nhất và gọn gàng nhất. Không cần backend, không cần theo dõi giới hạn tác vụ hàng tháng, và không có dữ liệu submission nằm trong bảng điều khiển bên thứ ba mà bạn quên xóa đi.

Xử lý form liên hệ Webflow mà không cần viết backend

Sendform cung cấp cho bạn một endpoint form sẵn sàng để dán trực tiếp vào trường Action của Webflow - các submission từ form Webflow của bạn đến hộp thư ngay lập tức, kèm theo lọc spam và cài đặt mặc định thân thiện với GDPR.

Dùng thử Sendform miễn phí →