Tích hợp Contact Form 7 về NEXTfunnel

Các bước kết nối Contact Form 7:

1. Cài đặt plugin hỗ trợ webhook https://wordpress.org/plugins/cf7-to-zapier/

2. Tạo form trong contact form 7

3. Cài đặt các trường dữ liệu

   1. Cấu hình các trường dữ liệu mặc định

   2. Cấu hình các trường dữ liệu tùy chỉnh

4. Cài đặt URL nhận dữ liệu từ Form

5. Thử nghiệm kết nối.

Hướng dẫn chi tiết:

Bước 1: Cài đặt plugin hỗ trợ cho Contact Form 7

• Vào phần quản lý plugin trên trang web wordpress của bạn.

• Cài đặt plugin mới.

• Tìm kiếm plugin tên "CF7 to Webhook" hoặc tải tại link https://wordpress.org/plugins/cf7-to-zapier/

• Cài đặt và kích hoạt plugin CF7 to Webhook

Bước 2: Tạo Form trên contact form 7

• Bạn truy cập menu "Form liên hệ" (Contact form). Tạo 1 form mới.

Xóa hết các trường dữ liệu mẫu hệ thống tự tạo mới, chỉ cần giữ lại nội dung [submit "Gửi"]

Bước 3: Cài đặt các trường dữ liệu muốn kết nối

Thêm các trường dữ liệu bạn muốn sử dụng vào Contact Form 7, bạn chọn thêm các trường dữ liệu mong muốn như: Văn bản ngắn, email, url, số điện thoại, ngày,...

Hệ thống hiển thị ra cài đặt, bạn chú ý tới trường Field name, nội dung nhập trong ô này phải đồng nhất với trường dữ liệu vào hệ thống NEXTfunnel tương ứng với mục 3.1 và mục 3.2

3.1. Các ID (trường dữ liệu) mặc định của NEXTfunnel:

Sử dụng các mã tại cột Trường dữ liệu mặc định dưới đây để nhận data từ Webcake.

Lưu ý: Các trường dữ liệu mặc định buộc phải trùng khớp với hệ thống NEXTfunnel, nếu dư bất kỳ một trường nào đó, dữ liệu sẽ không thể gửi thành công.

3.2. Các trường dữ liệu tùy chỉnh mà bạn tạo trong Settings => Cusom Fields:

Để đưa dữ liệu vào trường dữ liệu tùy chỉnh, bạn vào mục Settings => Custom Fields và sao chép trường tùy chỉnh muốn kết nối

• Dán vào cấu hình form và xóa bỏ 2 dấu ngoặc {{ }}. Ví dụ với trường {{ contact.ref }}, thay dấu chấm (.) bằng dấu gạch chân ( _ ) kết quả sẽ là "contact_ref":

Customfields mặc định:

Một số lưu ý:

• Với trường dữ liệu tùy chỉnh chứa ngày tháng năm, bạn cần cấu hình trên contact form 7 theo định dạng: "Ngày/Tháng/Năm" hoặc "Ngày-Tháng-Năm", ví dụ định dạng: "26/08/2024", "26-08-2024"

• API không tương thích với trường dữ liệu file upload. Nếu có file upload, sử dụng tính năng gán link đính kèm.

Bước 4: Cấu hình URL nhận dữ liệu từ Contact Form 7

• Sau khi cấu hình các trường dữ liệu, bạn chuyển sang tab Webhook trong contact form:

• Tùy chỉnh lại URL dưới đây:

https://public-api.nextfunnel.vn/webhook/contact-form-7?apikey=Mã-API-Của-Bạn&workflow=workflow-id-bạn-muốn-thêm&tag=tag-bạn-muốn-thêm

Trong đó:

• apikey (bắt buộc) là mã mà NEXTfunnel cung cấp riêng cho mỗi khách hàng (vui lòng liên hệ bộ phận hỗ trợ để nhận apikey)

• workflow (tùy chọn) là workflow automation mà bạn muốn thêm khách hàng vào ngay khi điền form.

• tag (tùy chọn, chỉ có thể thêm 1 tag) là thẻ bạn muốn thêm vào để phân loại khách hàng hoặc để kích hoạt Workflow Automation.

Cách lấy Workflow ID: Bạn click vào workflow mà bạn muốn thêm khách hàng vào, và sao chép id trên đường dẫn của trình duyệt.

• 3 Ví dụ đây sẽ là link hoàn chỉnh sau khi thêm apikey, workflow, tag:

  • Link sau sẽ thêm khách hàng vào Workflow và gắn tag cho khách hàng. https://public-api.nextfunnel.vn/webhook/contact-form-7?apikey=abcxyz&workflow=bb63ad9f-1c86-4127-80fb-75edb85172ee&tag=tag-test

  • Link sau sẽ thêm khách hàng vào Workflow và KHÔNG gắn tag cho khách hàng. https://public-api.nextfunnel.vn/webhook/contact-form-7?apikey=abcxyz&workflow=bb63ad9f-1c86-4127-80fb-75edb85172ee

  • Link sau sẽ chỉ gắn tag cho khách hàng. https://public-api.nextfunnel.vn/webhook/contact-form-7?apikey=abcxyz&tag=tag-test

• Tiếp theo bạn tích chọn mục Send to Webhook, link đã tùy chỉnh mã APIKEY vào ô Webhook URL

• Đối với form có yêu cầu đính kèm file tài liệu, chúng ta chọn tính năng gửi link file tài liệu và đưa link file tài liệu vào Trường tùy chỉnh.

Bước 4: Thử nghiệm

• Bạn lưu lại cấu hình của Form bạn đã cài đặt.

• Gán form vào trang web liên hệ và điền nội dung mẫu để thử nghiệm.

Mọi vấn đề về liên kết, vui lòng liên hệ bộ phận hỗ trợ. Trân trọng!