How to set up Cloudflare Turnstile for Contact Form7!

I think many people are setting up reCAPTCHA Enterprise to prevent spam in Contact Form7.
As Google is moving towards a paid service called reCAPTCHA Enterprise, contact form7 has posted information on how to move to the free Cloudflare Turnstile service.

This time, we will explain in detail how to issue a Cloudflare Turnstile key!

What happens when you add the Cloudflare Turnstile widget?

Setting up the Cloudflare Turnstile widget adds a widget like the one attached, allowing your website to identify human visitors and prevent spam and unauthorized access by bots, eliminating the need for puzzles like image selection. It's also great that it's free to use.

We also explain it in a video!

Open an account with Cloudflare Turnstile

First, go to the Cloudflare Turnstile official website and create an account.

https://dash.cloudflare.com

Once you create an account with Cloudflare Turnstile, you will be automatically logged in, so change the language to Japanese!

Adding widgets with Cloudflare Turnstile

The Cloudflare configuration manual on contact form7 says to add a widget with Cloudflare Turnstile and issue a site key and secret key.

You will need a site key and secret key issued by Cloudflare. If you don't have a Cloudflare account yet, create one first. Create a new widget for your site or select an existing one, and copy the site key and secret key. You can ignore the client-side and server-side integration code (Contact Form 7 will handle that for you).

How to add a widget to Cloudflare Turnstile

• Click Turnstile on the left sidebar
• Click the Add Widget button

 Add widget name and hostname in Cloudflare Turnstile

• Add the widget name. It's easier to understand if you include the domain.
• Then click the Add Hostname button
• Enter the domain in the host name and click the Add button.

 

Check the host name you added and click the Add button

Leave the bottom settings as default and click the Create button.

Cloudflare site key and secret key will be issued

This will generate a site key and secret key for you at Cloudflare.

 Register Cloudflare site key and secret key in contact form7

• Contact Us
• Integration
• Click the Turnstile integration setup button

Once you add the Cloudflare Turnstile site key and secret key that you just issued, the setup is complete!

Removed reCAPTCHA integration for contact form7

If you have migrated your Contact Form 7 spam protection from reCAPTCHA to Cloudflare, you should remove the reCAPTCHA integration.

• Contact Us
• Integration
• Click Set up reCAPTCHA integration

Please delete the key.

When you set up Cloudflare Turnstile, the widget is automatically added first.

The Cloudflare Turnstile widget, which automatically verifies that you are not a robot, will be automatically added to the top of your inquiry form.

 Move the display position of the Turnstile widget

Shortcodes[turnstile] You can change the position of the widget by adding
I think it would be best to put it just before the submit button.

I added a shortcode just before the submit button like this: