[WordPress] reCAPTCHAの代替え TurnstileとContact Form 7の連携

Google reCAPTCHAの利用で2025年末以降、課金が発生する可能性が出てくるようです。

reCAPTCHAは、PageSpeed Insightsでは、いろいろ指摘されるのでアクセス数制限もなく、軽いTurnstileに切り替えました。（商用も無料）

Contact Form 7も推奨しているので連携する方法についてシェアします。

あわせて読みたい

Contact Formに関する投稿一覧へ

アカウントの作成

Cloudflareのアカウントを作成します。お好みの登録方法でどうそ。ここは普通の流れでスムーズだと思います。

アカウント作成はこちら

Cloudflare Turnstile – CAPTCHAに代わる無料の認証手段 Cloudflare Turnstileは、CAPTCHAに代わる無料認証手段で、ウェブ訪問者がCAPTCHAのない快適なユーザー体験を可能にします。

※ 英語になってしまったら、右上のリストの中から「日本語」を選択してください。

1：[ウィジェットを追加]

2：ウィジェット名は自分が分かれば良いので、なんでも良いです。
3：[ホスト名の追加]をクリックすると、入力欄が表示されるので、4：URLをhttps等は無しで”cocotiie.com”の様に入力します。入力はこれだけ。

デフォルトのまま[作成]

サイトキーとシークレットキーが貰えました。これをプラグインに登録します。

Contact Form 7との連携

Contact Form 7のインテグレーションの、Turnstile[インテグレーションのセットアップ]をクリック

先ほど入手したキーをコピペ

Contact Form 7のフォームの確認

デフォルトの位置は左上です。

CAPTCHAの位置を変える

位置を変えたい場合は、[turnstile]をフォームに追記します。
[turnstile size:compact]で高さのある小さ目の物にする事が出来ます。

中央にする

左寄りを中央にするには、CSSで調整します。

.wpcf7-turnstile{
display: flex;
justify-content: center;
}