Contact Form 7 tích hợp với 3rd party API service

contact form 7

Bạn đã từng làm việc với WordPress và Contact Form 7?

Nếu chưa, xin giải thích đôi chút: WordPress là một công cụ quản trị nội dung mạnh mẽ phát triển ban đầu từ một nền tảng web dùng cho blogger, những người thích viết nhật ký trên mạng. Tuy vậy, bạn phải cài thêm  các phần mở rộng (plugin) nếu muốn có thêm tính năng, cài thêm giao diện (theme) nếu muốn web mình trở nên độc, lạ. WordPress là một nền tảng rất tự do, và… vì thế mà bạn phải tự lo khi có nhiều thứ bạn muốn làm hơn là viết blog.

Ví dụ, bạn hay thấy các trang web có mục Contact Me/Us mời gọi khách ghé qua để lại lời nhắn liên lạc cho chủ nhân website. Trong WordPress, ContactForm7 là một plugin vừa miễn phí, vừa đa dụng, cho khách nhập vào thoải mái từ ô văn bản đến các checkbox rất là nhanh… nếu bạn từng là vọc sĩ với các code HTML. Cái hay của Contact form 7 là cho tạo rất nhiều form tùy mục đích khác nhau.

Sản phẩm bên công ty mình làm là một SasS, cho phép thu thập thông tin người dùng từ nhiều nơi về một database để hỗ trợ quản lý thông tin cho các doanh nghiệp. Cho nên yêu cầu phát sinh là với các khách hàng đã có WordPress, với Contact Form 7 có đặc tính tạo form tùy biến, miễn phí, cần một cách gọn lẹ để kết nối dữ liệu truyền từ Contact Form 7 sang một RESTful API định trước bên mình để lưu trữ dữ liệu khách về sau.

Mặc định thì Contact Form 7 chỉ làm tác vụ nhận thông tin từ người, sau đó gửi vào email do người chủ web chỉ định, không lưu trữ, không tốn bộ nhớ phụ. Vậy phải làm sao?

Tầm sư… WordPress học đạo

Lúc đầu mình nghĩ mấy hướng sau:

  • Cross domain AJAX call: lúc đầu định đánh hướng này, nhưng mà bị lộ token quan trọng trong javascript –> loại
  • Code một cái plugin tự tui hầm bà lằng rồi phải lo quản lý phát triển về sau, chỉ dùng cho mục đích là bắn gói dữ liệu từ nơi này sang chỗ nọ mà không chỉnh sửa nhiều bên trong. –> căng quá
  • Tìm hàng có sẵn, đánh nhanh thắng nhanh (dễ kiểm tra độ khả thi)–> ổn nè

Do vậy nên sau một hồi lục lọi, mình tìm thấy plugin bổ ích sau đây: https://wordpress.org/plugins/forms-3rdparty-integration/

Plugin này có thể tích hợp với Contact Form 7, Gravity Form , vậy là phù hợp nhu cầu của mình (1 cầu nối cho Contact Form7)

Giải pháp của em plugin trên như sau:

  • Ẻm dùng wp_remote_post (click để xem ý tưởng của ẻm) có sẵn trong API của WordPress (ngon!)
  • Ẻm cho dùng hook filter và action để quản lý message trả về từ phía API server (ok, tiện cho khả năng parse mấy cái custom message của server gửi về)

Ban đầu cũng khá là vất vả với em nó, vì tài liệu viết ra khá ít, phải đọc thêm và mò mẫm thêm chút ít trong mã nguồn để có đúng cái cần xài.

Bí kíp luyện rồng… con

Ý tưởng
Data Flow WordPress CF7+Restful API

  • Cài plugin contact form 7, form 3rd parfy ở trên đã nói
  • Tạo form, lưu ý: form này không cần gửi email thông báo làm gì cho chủ tiệm web, nên đặt cờ demo_mode: on vào trong phần Additional settings của form đang tạo.
contactform-7_1

Tắt email notify của contact form 7- wordpress.

  • Mapping form field với API POST params: cài đặt với sự hỗ trợ của plugin form 3rd party như đã nói, trong hình trên là nằm dưới chỗ Add new chỗ menu Contact đó há.

Giải thích sơ: Phần global dành cho admin , setup chế độ nhận debug message qua email

contactform-7-_debugmode

Khai báo nhận debug message của 3rd party integration plugin cho contact form 7 của WordPress.

Phần sau cài đặt các API service sẽ kết nối, thích bao nhiêu cài bấy nhiêu, mỗi form đến mỗi API service cũng được:

Chú ý cái sumission URL là cái url do API server quy định để post data lên đó, nhớ tick Allow hooks để có thể cài đặt hàm callback can thiệp quá trình xử lý data trước khi gửi lên API server và sau khi API server trả kết quả về.

contact-form-7_3rd-form-install

hướng dẫn cài đặt 3rd party plugin 1

Tiếp theo là phần ánh xạ các field từ form sang param của API . với các field đặc biệt như là token, bạn không muốn lỗ thông tin cho người dùng thì thêm ở đây như sau: tick dấu is value đầu dòng, cột form submission field khi đó trở thành value truyền, lúc đó tôi gõ vào token value do API developer cung cấp chẳng hạn, bên 3rd party field vẫn là param truyền, vd: private_token

Hướng dẫn cài đặt 3rd party plugin 2.

Chỗ thú vị từ đây là callback WP action mà plugin cung cấp, ở đây là callback post-processing, nó có format như sau:

add_action(Forms3rdPartyIntegration_service_a0, array(&$this, YOUR_CALLBACK), 10, 2);

  • YOUR_CALLBACK: là function mình sẽ tạo để xử lý dữ liệu từ server trả về
  • Cái chỗ …a0: 0 là id của service vừa tạo, nên nếu bạn tick rồi mà callback chả thấy đâu thì thử save rồi load lại xem có generate id mới cho bạn không nhé.

Trong thư mục của plugin có sẵn 3rd-party folder chứa mấy cái function callback mẫu, các bạn có thể tham khảo thêm, ở đó, nó sẽ tạo 1 PHP class, chủ yếu thì để quản lý cho tiện mấy cái callback tự tui này thôi , vd:

Cơ bản là cái đối số $response là cái body result từ API trả về, bạn muốn parse JSON hay unserialize gì tùy bạn

Đối số $results là một mảng sẽ truyền vào cho contact form 7 xử lý thông báo ra màn hình. có 4 dữ liệu có thể truyền vào:

$results['message'] chứa message trả về trên màn hình hiện kết quả

$results['attach'] chứa message gửi kèm vào email bạn cài đặt trong contact form 7

$results['erros'] chứa mớ errors

$results['success'] = true sẽ xác lập form gửi thành công, báo tín hiệu cho contact form 7

Bonus: Đoạn code bắt error ở trên tui code thực ra sẽ không hoạt động, vì API server bên tui trả về status 400, plugin lại chỉ giới hạn gặp status 200 mới cho hook. Cũng không hay lắm ha. ^^

Phần hook code này, bạn đặt luôn trong functions.php của theme bạn dùng cho lành, không thì code thêm 1 plugin cho dễ quản lý về sau hé.

Chúc thành công!

Nguồn: Blog Phan Nguyễn Hải

SSS Full-stack Engineer

Love Silicon Straits and want to know more about our company culture, working environment or job vacancies?
Find out more at careers.siliconstraits.vn.

Silicon Straits
Be Challenged. Be Inspired. Be Different.




Follow us for more later

or subscribe with