Contactform7のスパム防止機構をreCAPTHCAからCloudflare Turnstileに変更する方法

Googleは、メールフォームにつけるスパム防止機構であるreCAPTHAを有償化する計画を進めています。
それに伴い、WordPressのContactform7管理画面ではこのようなアラートが出るようになりました。

そこでcontactform7はCloudflare Turnstileに変更するように推奨されています。

Contactform7はWordPress管理画面から各社のサービスに接続できる

サイドバーの[お問い合わせ]-[インテグレーション]から、各サービスに接続できるようになっています。

まずCloudflare Turnstileにアクセス

インテグレーションのセットアップを行うには以下情報が必要となります。

1. サイトキー
2. シークレットキー

まずはアカウントを発行する為に、Turnstileへ行きましょう。

アカウントを発行

1.[利用開始]ボタンを押します。

2.アカウントを作ります。Googleアカウントがあれば、簡単に発行できます。

管理画面からWEBサイトを登録

ログインすると、はじめはこんな画面が見えます。[ウィジェットを追加]ボタンを押して、管理するWEBサイトを追加します。

ウィジェット名をつけます。そして青い[+ホスト名の追加]を押します。
ここで自分が管理しているWEBサイトのドメインを入力します。(https://などのスキーマは取ります。)

ウィジェット名とホスト名を登録したら、画面右下まで移動して作成を押してください。

ウィジェットが追加されました

ここで[サイトキー]と[シークレットキー]が発行されています。これらのキーはメモ帳などに控えておくと良いでしょう。

下準備はこれで完了です。このあとWordPress管理画面から[インテグレーション]をします。

Contactform7からインテグレーション

管理画面に入り[お問い合わせ]-[インテグレーション]を押します。

ここに[サイトキー]と[シークレットキー]を貼り付けて[変更を保存]してください。

成功するとこのような表示になります。

実際のメールフォームを確認

それでは、実際に設置したメールフォームを確認してみましょう。
CloudFlareのロゴとともに以下写真のようなボックスが現れていれば成功です。

位置変更する場合は・・・

メールフォームの編集画面に入り、任意の場所に以下のショートコードを貼り付けてください。

[turnstile]

これで送信ボタンの直下に現れました。

あとは、[外観]-[カスタマイズ]-[カスタムCSS]に以下のコードを貼り付けてください。

/* Cloudflare Turnstile を中央寄せ */
.cf-turnstile {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 2em;
  margin-bottom: 2em;
}

中央寄せし、上下に2文字ぶんの余白を開けて自然な配置にしました。