Cloudflare TurnstileをWordPressのContact Form 7に導入したメモ
この記事は2025年10月27日時点の画面で解説している。
WordPressの定番メールフォームプラグイン、Contact Form 7を使用しているサイトにスパムメールが大量に来るので対策してくれと言われて、Cloudflare Turnstileを導入した。
Contact Form 7の公式ドキュメントでも解説されているのですが、Cloudflareのウィジェット作成についての解説がなく、生成AI（Claude）に聞く必要があったのでメモ。
Contact Form 7の公式ドキュメント
Cloudflare TurnstileのWidgetを作成し、サイトキーとシークレットキーを発行する手順
まず、Cloudflare dashboardのTurnstileのページを開く。
こういうページが開く。
※画像は作成後なので、作成済みのものが表示されている。
+Add Widgetのボタンを押す。
するとAdd Widget画面に遷移する。
各項目を設定する。
ここがわからなかったので生成AIに聞いた。
Add Widgetの各項目の設定
Widget name
管理上の名称である。任意に設定してよい。
Hostname management
使用するサイトのドメインを入力する。
例：example.com
localhostも追加できるらしい。
Widget mode
ここがとくにわからなかった。
Managed / Non-Interactive / Invisibleから選択するのだが、Contact Form 7に導入する場合「Managed」がよいとのこと。
この項目は、Cloudflare Turnstileの「ロボットではない」にチェックを入れるやつの挙動を設定する項目である。
Managedは疑わしい場合のみチェックボックスが出るモードである。
なお、
- Non-Interactive modeはチェックボックスが出ない
- Invisible modeは非表示で動作するが月100万回の制限があるとのこと。
（この説明は生成AIのClaudeからの受け売りである）
Would you like to opt for pre-clearance for this site?
さらに下にWould you like to opt for pre-clearance for this site?という項目がある。
Contact Form 7で使用する場合、ここはオフでよいとのこと。
ここはPre-Clearanceの設定で、オンにすると「Turnstile widgetがクリアランスクッキー(cf_clearance)を発行し、CloudflareのWAFチャレンジをバイパス」できるようになるらしい。
SPAで使うとよいらしい。
自分はこれについて理解していないが、とにかくオフにした。
以上の設定を行ったのち「Create」を押す。
サイトキーとシークレットキーが発行される
画像のように、サイトキーとシークレットキーが発行される。
このページを閉じないまま次の作業を行う。
Contact Form 7の「インテグレーションのセットアップ」に入力する
Contact Form 7のメニューのインテグレーションを開く。
少し下にスクロールするとTurnstileの項目があるのでインテグレーションのセットアップを押下する。
開いた画面にサイトキーとシークレットキーを入力し変更を保存を押下する。
これで設定が完了である。
Contact Form 7のTurnstileの表示を調整する
WordPressで運用しているサイトのContact Form 7にTurnstileを導入すると、変な場所に表示されたり、位置がずれたりする。
任意の挿入箇所に表示するには、Contact Form 7の公式ドキュメントにある通り、Contact Form 7のメールフォーム設定画面で希望する位置に[turnstile]ショートコードを挿入する。
その他、以下のような記事も参考になる。
Turnstileを中央寄せしたい場合
以下の記事のようにCSSを修正する。
【WordPress】Simple Cloudflare Turnstileを中央揃えにする方法
Turnstileを中央寄せしたら送信ボタンと位置がずれている場合
送信ボタンのほうが送信中のスピナーの画像でずれているので以下の記事を参考にCSSを修正する。
【wordpress】Contact Form 7 の送信ボタンがずれる理由と解決方法
おわりです
WordPressをいじるのは、本当に技術がない人の行為という感じで自分が技術者ではない下々の人間だということを実感して辛い気持ちになるのだが、まあ、人生そんなものかもしれない。
おしまい。
Discussion