Cài đặt và sử dụng reCAPTCHA v2 với Contact Form 7

⌈ Cài đặt và sử dụng reCAPTCHA v2 với Contact Form 7 ⌋

reCAPTCHA v3 Badge

   Từ phiên bản 5.1 trở đi Contact Form 7 không còn hỗ trợ reCAPTCHA v2 nữa mà chuyển qua hỗ trợ reCAPTCHA v3… và cũng ngưng hỗ trợ luôn tag [recaptcha].

   Vấn đề là ở chỗ khi sử dụng reCAPTCHA v3 thì Google sẽ chèn 1 badge vào góc phía dưới bên tay phải của blog (như hình minh họa ở trên) rất xấu và vô duyên. Chưa nói đến việc mình cảm thấy nó làm chậm tốc độ load của blog… có nhiều trang không dùng Contact Form mà badge của reCAPTCHA vẫn hiện ra ?

   Trong bài viết này mình sẽ hướng dẫn các bạn cài đặt và sử dụng reCAPTCHA v2 với Contact Form 7 và sử dụng lại tag [recaptcha].

   Đầu tiên các bạn phải chắc chắn rằng bạn đã cài đặt và đang sử dụng plug-in Contact Form 7. Tiếp tục tìm và cài đặt thêm plug-in ReCaptcha v2 for Contact Form 7

* Lưu ý:

   Vì ReCaptcha v2 for Contact Form 7 là một plug-in bổ trợ cho plugin cho nên nếu sau này bạn không dùng Contact Form 7 nữa mà chuyển sang dùng một plug-in tạo form khác như Ninja Forms, Formidable Form Builder hay Forminator… thì nhớ xóa plugin này đi để cho nhẹ vì không còn tác dụng gì nữa…

   Sau khi kích hoạt plug-in ReCaptcha v2 for Contact Form 7 xong bạn sẻ thấy có thêm mục reCaptcha Version như hình minh họa dưới đây.

– Ở mục Select reCaptcha Usage: nhớ chọn là reCaptcha v2

– Ở mục Select reCaptcha Source: bạn có thể chọn google.com hoặc recaptcha.net đều được … thường thì mình dùng mặc định là google.com trừ khi website của bạn phục vụ khách truy cập ở những quốc gia mà họ block google.com thì mới dùng recaptcha.net. Bấm nút Submit để lưu lại.

ReCaptcha v2 for Contact Form 7

   Bước kế tiếp bạn sẽ phải đăng ký để nhận reCAPTCHA Key từ Google cho website của mình tại đây.

– Ở mục Label bạn có thể đặt tên gì tùy thích không quan trọng.

– Ở mục reCAPTCHA type bạn nhớ chọn là reCAPTCHA v2 (Verify requests with a challenge) … chọn tiếp tùy chọn là “I’m not a robot” Checkbox (Validate requests with the “I’m not a robot” checkbox) như hình minh họa ở dưới.

– Ở mục Domains bạn nhớ nhập đầy đủ tên miền của website của bạn vào ít nhất là 2 mục your-domain.comwww.your-domain.com như hình mình họa phía dưới… lưu ý nếu blog WordPress của bạn chạy trên sub-domain dạng như blog.your-domain.com thì bạn cũng phải nhập vào luôn.

Get reCAPTCHA v2 Key for Contact Form 7

   Bước kế tiếp Google reCAPTCHA sẽ cung cấp cho bạn 2 chuỗi chữ số là Site KeySecret Key như hình minh họa dưới đây…

reCAPTCHA Site Key & Secret Key

Tiếp tục bạn truy cập vào mục Integration của Contact Form 7

– Tìm tới mục reCAPTCHA (Spam protection)
– Chọn nút Setup Integration.

Sau đó nhập 2 chuỗi Site KeySecret Key do Google reCAPTCHA cung cấp vào.

Intergration - reCAPTCHA

– Bấm Save Change

Integration with External API

   Sau khi đã cài đặt và cấu hình thành công bây giờ bạn đã có thể sử dụng tag [recaptcha] khi thiết kế form cho blog của bạn… Lưu ý tag [recaptcha] cũng có một số tham số tùy biến về kích cỡ màu sắc cũng như vị trí hiển thị… các bạn tự tìm hiểu thêm nhé… để tùy biến cho hợp với blog của bạn.

Tag reCAPTCHA

   Kết quả chúng ta sẽ có được ô xác nhận I’m not a robot dùng reCAPTCHA v2 trong form của chúng ta… như hình mình họa sau.

Chúc các bạn thành công…


Copyright © 2022 by Đỗ Huy Tưởng.
All rights reserved.


Đỗ Huy Tưởng

* Nếu có bản án khắc nghiệt nhất dành cho anh :'( vì cái tội dám <3 em anh xin lãnh án tù chung thân bên em suốt đời :P