Kích hoạt Cloudflare Turnstile trong Contact Form 7 chống spam

Cloudflare Turnstile là giải pháp xác thực không dùng CAPTCHA giúp bảo vệ website WordPress khỏi spam một cách nhẹ nhàng, thân thiện người dùng. Với bản phát hành Contact Form 7 v6.1 (26/06/2025), bạn có thể tích hợp trực tiếp Turnstile mà không cần plugin bên ngoài.

Trong bài viết này, mình sẽ hướng dẫn bạn cách kích hoạt Cloudflare Turnstile trong Contact Form 7 chống spam – chi tiết từng bước, đơn giản, dễ làm.

>> Tham khảo: Tạo hiệu ứng popup cho Contact Form 7

Cloudflare Turnstile là gì?

Turnstile là giải pháp thay thế CAPTCHA thông minh của Cloudflare. Turnstile xác thực người dùng không cần hình ảnh hoặc câu hỏi khó chịu như reCAPTCHA. Nó hoạt động mượt mà, nhẹ nhàng và hoàn toàn miễn phí, không yêu cầu người dùng phải chọn đèn giao thông hay xe buýt  😅

Note: Contact Form 7 v6.1 (26/06/2025) khuyên dùng Cloudflare Turnstile cho người dùng Contact Form 7

Lý do nên dùng Turnstile thay vì reCAPTCHA

• Không gây khó chịu cho người dùng.
• Tải nhanh, không ảnh hưởng Core Web Vitals.
• Bảo mật cao, tích hợp sâu với hạ tầng Cloudflare.
• Miễn phí 100% – không giới hạn số lần xác thực.

Yêu cầu trước khi tích hợp

• WordPress 6.7 trở lên
• Đã cài đặt plugin Contact Form 7 phiên bản >= 6.1
• Có tài khoản Cloudflare (miễn phí)

Kích hoạt Cloudflare Turnstile trong Contact Form 7

Phiên bản Contact Form 7 v6.1 đã chính thức giới thiệu khả năng tích hợp trực tiếp với Cloudflare Turnstile, giúp quá trình cài đặt trở nên đơn giản hơn rất nhiều. Sau đây là các bước tiến hành kích hoạt:

Bước 1: Lấy Site Key và Secret Key từ Cloudflare

1. Đăng nhập Cloudflare

Truy cập: https://dash.cloudflare.com/

2. Truy cập Turnstile

Đi đến mục Turnstile (từ thanh menu bên trái) > Nhấn “Add widget”.

• Widget name: Tên tiện ích cho các trang web của bạn

3. Add Hostnames

• Chọn domain website bạn muốn tích hợp Turnstile (có thể chọn nhiều website – hoặc chọn 1 trước rồi thêm sau vẫn được)

• Widget Mode: chọn Managed (tự động hiển thị khi cần để nâng cao bảo mật).
• Nhấn Create.

👉 Sau khi tạo xong, bạn sẽ nhận được:

• Site Key: 0x4AAAAAABimV3_6WbCxxxx
• Secret Key: 0x4AAAAAABimV1yacgBCfAkMRHiU--xxxx

Bước 2: Tích hợp Turnstile vào Contact Form 7

• Từ Dashboard WordPress: Form liên hệ > Tích hợp

• Dán Site Key và Secret Key đã lấy từ Cloudflare vào
• Nhấn Lưu thay đổi.

Bước 3: Hoàn tất

Sau khi hoàn thành các bước trên, tất cả các biểu mẫu liên hệ của bạn được tạo bằng Contact Form 7 sẽ tự động có widget Turnstile và được bảo vệ khỏi các cuộc tấn công của bot.

Kiểm soát việc hiển thị Turnstile trong Contact Form 7

Theo mặc định, tiện ích Turnstile được đặt ở đầu biểu mẫu. Nếu bạn muốn di chuyển nó, hãy chèn [turnstile] vào nội dung form ở vị trí mong muốn

Thay đổi vị trí hiển thị Turnstile

Ví dụ: Bạn muốn chuyển vị trí Turnstile về cuối form:

<label> Tên của bạn (bắt buộc)
[text* your-name] </label>
<label> Email của bạn (bắt buộc)
[email* your-email] </label>
[turnstile] <label> Chủ đề
[text your-subject] </label>
<label> Tin nhắn của bạn
[textarea your-message] </label>
[submit "Gửi"]

Thay đổi kích thước hiển thị Turnstile

Bạn có thể thay đổi kích thước của widget Turnstile bằng cách thêm tùy chọn size vào nội dung form. Cloudflare Turnstile hỗ trợ các kích thước sau:

• Normal (Mặc định): Rộng 300px, Cao 65px
• Compact (Nhỏ gọn): Rộng 150px, Cao 140px
• Flexible (Linh hoạt): Rộng 100% (tối thiểu 300px), Cao 65px

Để sử dụng các kích thước này, bạn chỉ cần thêm size:compact hoặc size:flexible vào thẻ [turnstile].

• Ví dụ với kích thước Compact (nhỏ gọn):

<label> Tên của bạn (bắt buộc)
[text* your-name] </label>
<label> Email của bạn (bắt buộc)
[email* your-email] </label>
[turnstile size:compact] <label> Chủ đề
[text your-subject] </label>
<label> Tin nhắn của bạn
[textarea your-message] </label>
[turnstile size:flexible]
[submit "Gửi"]

• Ví dụ với kích thước Flexible (Linh hoạt) – 100%:

 <label> Tên của bạn (bắt buộc)
<label> Tên của bạn (bắt buộc)
[text* your-name] </label>
<label> Email của bạn (bắt buộc)
[email* your-email] </label>
[turnstile] <label> Chủ đề
[text your-subject] </label>
<div class="col-md-12">
<label> Tin nhắn của bạn
[textarea your-message] </label>
[turnstile size:compact]
</div>
[submit "Gửi"]

• Kết quả:

Khi bạn xem biểu mẫu liên hệ trên website của mình, widget Cloudflare Turnstile sẽ tự động điều chỉnh chiều rộng để chiếm 100% không gian có sẵn của phần tử chứa nó (ví dụ: một div hoặc p mà nó nằm trong), đảm bảo nó hiển thị liền mạch và phù hợp trên nhiều kích thước màn hình khác nhau, đặc biệt là trên thiết bị di động. Chiều cao của widget sẽ vẫn cố định là 65px.

Kết luận

Tích hợp Cloudflare Turnstile vào Contact Form 7 là một bước đơn giản nhưng hiệu quả để bảo vệ website của bạn khỏi spam. Đây là bước tiến lớn so với các giải pháp xác thực truyền thống.

Chúc các bạn thành công !!! nếu có câu hỏi hãy để lại comment bên dưới