WordPressのお問い合わせフォームにContact Form 7を使っていると、スパム対策としてGoogle reCAPTCHAを設定しているケースが多いと思います。
一方で、reCAPTCHAの読み込みによる表示速度への影響や、プライバシー、Google Cloud側の設定を分かりにくいと感じることもあります。
その代替として利用できるのが、Cloudflareの「Turnstile」です。
Contact Form 7はバージョン6.1以降、Turnstileに標準対応しています。別の連携プラグインや自作の検証コードを追加しなくても、サイトキーとシークレットキーを設定するだけで導入できます。
この記事では、Cloudflareでのウィジェット作成からContact Form 7との連携、表示位置の変更、reCAPTCHAから安全に切り替える手順、動作確認までを順番に解説します。
もくじ
Cloudflare Turnstileとは
Cloudflare Turnstileは、Webフォームへの自動投稿を判定するための仕組みです。
訪問者へ画像選択などを何度も求めるのではなく、ブラウザやアクセス状況から複数の情報を確認し、必要な場合だけ操作を求めます。そのため、フォームを利用する人の負担を抑えながら、スパム対策を行えます。
CloudflareのCDNを利用していないサイトでも導入できます。Turnstileだけを単独で利用することが可能です。
Turnstileは無料で利用できる
個人ブログや一般的な企業サイトであれば、Cloudflare TurnstileのFreeプランで利用できます。
Freeプランでは、最大20個のウィジェットを作成でき、1つのウィジェットに最大10個のホスト名を登録できます。通常の問い合わせフォームで利用する範囲なら、無料枠で十分なケースが多いでしょう。
ウィジェットの表示だけでは不十分
Turnstileは、ブラウザ上で発行されたトークンをサーバーからCloudflareへ送り、正しいトークンか確認することで機能します。
画面にウィジェットを表示しただけでは、フォームを保護できません。サーバー側でSiteverify APIによる検証が必要です。
Contact Form 7の標準連携を使う場合は、ウィジェットの表示とサーバー側の検証をContact Form 7が担当します。テーマへ検証用のPHPを書く必要はありません。
reCAPTCHAからTurnstileへ変更するメリット
Turnstileには、次のようなメリットがあります。
- Contact Form 7から標準機能として設定できる
- 追加の連携プラグインが不要
- CloudflareのCDNを使っていなくても導入できる
- 訪問者に画像選択を求める場面が少ない
- 無料で利用できる
- ウィジェットのテーマや大きさを変更できる
Contact Form 7公式でも、reCAPTCHAを使う特別な理由がない場合はTurnstileを推奨しています。
ただし、サイトの運用状況によって最適なスパム対策は異なります。切り替え後もメールの受信状況やTurnstileの分析画面を確認してください。
導入前に確認すること
設定を始める前に、次の3点を確認します。
Contact Form 7を6.1以降へ更新する
Turnstileの標準連携を利用するには、Contact Form 7 6.1以降が必要です。
WordPress管理画面の「プラグイン」→「インストール済みプラグイン」で、Contact Form 7のバージョンを確認してください。
更新前には、WordPress本体・テーマ・プラグイン・データベースのバックアップを取得します。可能であれば、ステージング環境でフォーム送信まで確認してから本番環境を更新します。
Cloudflareアカウントを用意する
Turnstileを利用するにはCloudflareアカウントが必要です。
WebサイトのネームサーバーをCloudflareへ変更する必要はありません。アカウントを作成し、Turnstileのウィジェットだけを利用できます。
現在のreCAPTCHA設定をすぐに削除しない
Turnstileの設定とテスト送信が完了するまでは、既存のreCAPTCHA設定を残しておきます。
先にreCAPTCHAを削除すると、設定作業中にフォームのスパム対策がない状態になる可能性があります。Turnstileが正常に動作することを確認してから、reCAPTCHAを停止します。
1. CloudflareでTurnstileウィジェットを作成する
Cloudflareのダッシュボードへログインし、Turnstileの画面を開きます。
「ウィジェットを追加」から、新しいウィジェットを作成します。
ウィジェット名を入力する
どのサイト・フォームで使っているか分かる名前を付けます。
たとえば、次のような名前です。
webmoyou-contact-form複数サイトを管理する場合は、「サイト名＋用途」の形式にすると後から判別しやすくなります。
ホスト名を登録する
Turnstileを表示するサイトのホスト名を追加します。
example.comhttps://やページのパスは入力しません。
本番環境とステージング環境の両方で利用する場合は、それぞれのホスト名を追加します。Cloudflareは、本番・ステージング・開発環境でウィジェットを分ける運用も推奨しています。
ウィジェットモードを選択する
通常は「Managed」を選択します。
Managedでは、Cloudflareがアクセス状況に合わせて、操作を求めるかどうかを自動的に判断します。
設定内容を確認してウィジェットを作成すると、「サイトキー」と「シークレットキー」が表示されます。
- サイトキー：ブラウザ側で利用する公開情報
- シークレットキー：サーバー側の検証に利用する秘密情報
シークレットキーは、記事・ソースコード・共有資料などに掲載しないでください。
2. Contact Form 7へサイトキーを設定する
WordPress管理画面から「お問い合わせ」→「インテグレーション」を開きます。
Cloudflare Turnstileの項目にある「インテグレーションのセットアップ」をクリックし、Cloudflareで取得した情報を入力します。
- サイトキー
- シークレットキー
入力内容を保存すると、Contact Form 7のすべてのフォームへTurnstileが適用されます。
Cloudflareが表示するクライアント側・サーバー側の実装コードを、テーマへコピーする必要はありません。Contact Form 7が必要な処理を行います。
3. フォーム上の表示を確認する
お問い合わせページを、ログアウト状態またはシークレットウィンドウで開きます。
初期設定では、Turnstileウィジェットがフォーム上部に表示されます。
Turnstileはアクセス状況によって見え方が変わります。チェックボックスが常に表示されるとは限りません。操作不要で確認が完了する場合もあります。
ページを開いたら、ブラウザの開発者ツールにエラーが出ていないかも確認します。
4. [turnstile]タグで表示位置を変更する
Turnstileの標準位置を変更したい場合は、Contact Form 7のフォーム編集画面に[turnstile]タグを追加します。
送信ボタンの直前へ配置する例です。
<div class="form-row">
[acceptance privacy-policy] プライバシーポリシーに同意する
</div>
<div class="form-row form-row--turnstile">
[turnstile]
</div>
[submit "送信する"]コンパクトサイズにする
横幅が狭い場所では、size:compactを指定できます。
[turnstile size:compact]テーマを自動で切り替える
サイトやブラウザの配色に合わせる場合は、theme:autoを指定します。
[turnstile theme:auto]言語を日本語にする
表示言語を日本語へ固定する場合は、language:jaを指定します。
[turnstile language:ja]複数のオプションを組み合わせることもできます。
[turnstile size:compact theme:auto language:ja action:contact]actionには、英数字・ハイフン・アンダースコアを使用します。フォームごとに値を分けると、Cloudflare側の分析で用途を判別しやすくなります。
5. Turnstileの表示をCSSで整える
Turnstileを中央へ配置する例です。
.form-row--turnstile {
display: flex;
justify-content: center;
margin-block: 24px;
}ウィジェットを含むiframeの内部デザインを、サイト側のCSSから自由に変更することはできません。色や大きさは[turnstile]タグのオプションを利用します。
スマートフォンではコンパクト表示が必要になる場合があります。実機またはブラウザのレスポンシブ表示で、横にはみ出していないか確認してください。
6. 正常に送信できるかテストする
設定後は、ウィジェットが見えることだけでなく、サーバー側の検証を含めて確認します。
通常の送信テスト
フォームの必須項目を入力し、実際に送信します。
次の内容を確認してください。
- Contact Form 7で送信完了と表示される
- 管理者宛てメールが届く
- 自動返信メールを設定している場合は返信が届く
- ブラウザのコンソールにエラーが出ていない
- CloudflareのTurnstile分析画面にデータが記録される
入力エラー後の再送信
必須項目を空にするなど、意図的に入力エラーを発生させます。
エラーを修正したあと、再送信できることを確認してください。Turnstileのトークンは1回だけ使用できるため、Ajax送信の失敗後にウィジェットが正しく再生成されることが重要です。
複数フォームを確認する
同じサイトにお問い合わせ・資料請求・採用応募など複数のフォームがある場合は、すべてのフォームを個別にテストします。
Turnstileの設定は全フォームへ適用されますが、テーマやJavaScript、キャッシュ設定の影響はページごとに異なる場合があります。
7. 動作確認後にreCAPTCHAを停止する
Turnstileで正常に送信できることを確認したら、reCAPTCHAを停止します。
WordPress管理画面の「お問い合わせ」→「インテグレーション」を開き、reCAPTCHAの設定を解除します。
次の場所にもreCAPTCHAのコードが残っていないか確認してください。
- テーマの
header.phpやfunctions.php - Google Tag Manager
- ヘッダー・フッターへコードを追加するプラグイン
- キャッシュプラグインの除外・遅延設定
- Content Security Policy
reCAPTCHAのスクリプトが残っていると、不要な通信やJavaScriptが読み込まれ続ける可能性があります。
削除後にキャッシュを消去し、お問い合わせページを再読み込みして、Turnstileだけが動作していることを確認します。
Turnstileが表示されない場合
表示されない場合は、次の項目を確認します。
ホスト名が正しいか
Cloudflareのウィジェットに、実際にアクセスしているホスト名が登録されているか確認します。
www.example.comとexample.comを使い分けているサイトでは、必要なホスト名を登録します。ステージング環境も別のホスト名として扱います。
キーの組み合わせが正しいか
別のウィジェットのサイトキーとシークレットキーを組み合わせていないか確認します。
シークレットキーを再発行した場合は、WordPress側も新しいキーに更新します。
JavaScriptの遅延・結合設定を確認する
キャッシュや高速化プラグインが、TurnstileのJavaScriptを遅延・結合していると、ウィジェットが表示されない場合があります。
一時的にJavaScript最適化を停止し、表示されるか確認します。原因が最適化設定だった場合は、Cloudflare Turnstile関連のスクリプトを遅延・結合の対象から除外します。
Content Security Policyを確認する
CSPを設定しているサイトでは、少なくとも次の接続先を許可する必要があります。
script-src https://challenges.cloudflare.com
frame-src https://challenges.cloudflare.com実際のCSPへ追加するときは、既存のポリシーを上書きしないように注意してください。Cloudflareは、可能であればnonceを使ったCSP3の設定を推奨しています。
送信時にエラーになる場合
トークンの有効期限を確認する
Turnstileのトークンは発行から5分間有効で、1回だけ検証できます。
フォームを長時間開いたままにした場合や、同じトークンで再送信した場合は、timeout-or-duplicateエラーになることがあります。ページを再読み込みし、再度送信を試します。
Contact Form 7を最新版へ更新する
古いバージョンでは、Turnstile連携を利用できない、またはAjax送信後の再表示に問題が起こる可能性があります。
WordPress・Contact Form 7・キャッシュプラグインの互換性を確認し、バックアップ後に更新します。
Turnstileを二重に導入していないか
Contact Form 7の標準連携と、Turnstile対応プラグインを同時に有効化すると、ウィジェットや検証処理が重複する可能性があります。
Contact Form 7 6.1以降では、まず標準のTurnstile連携だけで動作確認してください。
導入後に確認したい運用項目
導入後も、次の項目を定期的に確認します。
- スパムメールの件数
- 正常な問い合わせが拒否されていないか
- Cloudflare Turnstileの分析結果
- サイト表示やフォーム送信のJavaScriptエラー
- Contact Form 7更新後の送信テスト
- シークレットキーの管理状況
本番環境とステージング環境で同じキーを使い回さず、環境ごとにウィジェットを分けると管理しやすくなります。
シークレットキーが外部へ漏れた可能性がある場合は、Cloudflareでキーをローテーションし、WordPress側の設定も更新してください。
まとめ
Contact Form 7 6.1以降では、Cloudflare Turnstileを標準機能として利用できます。
導入の流れは次のとおりです。
- CloudflareでTurnstileウィジェットを作成する
- 利用するホスト名を登録する
- サイトキーとシークレットキーを取得する
- Contact Form 7のインテグレーションへキーを設定する
- フォーム送信とメール受信を確認する
- 正常動作を確認してからreCAPTCHAを停止する
追加の連携プラグインやテーマへの検証コードは基本的に不要です。
設定後は、通常送信だけでなく、入力エラー後の再送信、スマートフォン表示、複数フォーム、キャッシュ有効時の動作まで確認してください。
