How to set up Cloudflare Turnstile for Contact Form7!

Contact Form7のスパム防止でreCAPTCHA Enterpriseを設定している方は多いと思います。
googleはreCAPTCHA Enterpriseという有料サービスへの移行を進めている為、contact form7より、無料で使えるCloudflare Turnstileへの移行を進める案内が出ています。

今回は、Cloudflare Turnstileのキーの発行方法を詳しく解説していきます！

Cloudflare Turnstileウィジェットを追加するとどうなるか？

Cloudflare Turnstileウィジェットの設定をすると、添付のようなウィジェットが追加され、ウェブサイトが人間である訪問者を識別し、ボットによるスパムや不正アクセスを防ぐための、画像選択などのパズルを必要としないです。無料で使える点もとても良いです。

Cloudflare Turnstileでアカウント開設

まずはCloudflare Turnstile公式サイトへアクセスをして、アカウントを作成します。

https://dash.cloudflare.com

Cloudflare Turnstileでアカウントを作成したら自動ログインされるので、日本語に変更しましょう！

Cloudflare Turnstileでウィジェットの追加

contact form7のCloudflare設定マニュアルに、Cloudflare Turnstileでウィジェットを追加してサイトキーとシークレットキーを発行してくださいとあります。

Cloudflare から発行されるサイトキーとシークレットキーが必要になります。まだ Cloudflare のアカウントをお持ちでない場合はまずアカウントを作成してください。あなたのサイト用にウィジェットを新規作成するか既存のウィジェットを選択し、サイトキーとシークレットキーをコピーします。クライアントサイドとサーバーサイドのインテグレーションコードについては無視して結構です (その辺は Contact Form 7 がうまいことやってくれます)。

Cloudflare Turnstileでのウィジェットの追加方法ですが

• 左サイドバーのTurnstileをクリック
• ウィジェットを追加ボタンをクリック

 Cloudflare Turnstileでウィジェット名・ホスト名を追加

• ウィジェット名を追加します。ドメインを入れておくとわかりやすいと思います
• 次に、ホスト名の追加ボタンをクリック
• ホスト名にもドメインを入れて追加ボタンをクリック

 

追加したホスト名にチェックを入れ、追加ボタンをクリックします

下部の設定はデフォルトのままで【作成】ボタンをクリックします。

Cloudflareのサイトキーとシークレットキーが発行される

このように、Cloudflareでサイトキーとシークレットキーが発行されます。

 contact form7にCloudflareのサイトキーをシークレットキーを登録

• Contact Us
• Integration
• Turnstileのインテグレーションのセットアップボタンをクリック

先ほど発行されたCloudflare Turnstileのサイトキー、シークレットキーを追加したら設定完了です！

contact form7のreCAPTCHAのインテグレーションを削除

contact form7のスパム防止をreCAPTCHAからCloudflareへ移行した場合は、reCAPTCHAのインテグレーションは削除をしましょう。

• Contact Us
• Integration
• reCAPTCHAのインテグレーションのセットアップをクリック

キーを削除してください。

Cloudflare Turnstileを設定すると、ウィジェットが自動で最初に追加される

お問い合わせフォームに、ロボットではない事を自動で認証するCloudflare Turnstileウィジェットがお問合せの先頭に自動で追加されます。

 Turnstileウィジェットの表示位置を移動

Shortcodes[turnstile] を追加する事で、ウィジェットの位置を変更する事が出来ます。
送信ボタンの直前が良いと思います。

こんな形で、送信ボタンの直前にショートコードを追加しました。