フォロー

📝【団長のデバッグ道場🔥 vol.17】Contact Form 7 で「reCAPTCHA 警告→送信不可」を撃破せよ！

by

「お問い合わせフォームが送れない！
“reCAPTCHA verification failed. Please try again.” の赤い警告が出る…」
これは Contact Form 7 × reCAPTCHA で頻発する実務トラブルだ。
諸君、原因は 1 つではない。だがチェックポイントさえ押さえれば即解決できる！

🧩 症状再現：送信ボタンを押すとエラーバナー

  • フォーム読み込み時に Browser Console に grecaptcha not defined
  • 送信後すぐ赤枠エラー
  • ネットワークタブで /wp-json/contact-form-7/v1/contact-forms/xxx/feedback が status: failed

🔍 主な原因 3 パターン

  1. v2キー・v3キー混在
    CF7 v5.1+ は reCAPTCHA v3 専用。
    旧 v2 キーを貼り続けると JS がエラー。
  2. wp_head / wp_footer がテーマに無い
    スクリプトが出力されず grecaptcha が未定義。
  3. パフォーマンス系プラグインの遅延読み込み
    Autoptimize / LiteSpeed Cache で recaptcha/api.js が defer されると、CF7 JS が先に実行→エラー。

🛠️ 解決ステップ：実践フローチャート

  1. CF7 → インテグレーション → reCAPTCHA キーを確認
    ▶︎ Site Key / Secret Key とも v3 用 か？
  2. テーマの header.php に 、
    footer.php に があるか？
  3. キャッシュ・最適化プラグインで
    「recaptcha」 を除外ワードに設定
  4. テスト環境で define('WP_DEBUG', true); → Console&Network 確認

📝 正常動作サンプル：テーマ側最低構成

<!-- header.php -->
<!DOCTYPE html>
>

</head>
<body >

<!-- page-contact.php 内 -->


<!-- footer.php -->

</body>
</html>

これでページを表示し、HTML ソース下部に

<script src="https://www.google.com/recaptcha/api.js?render=xxxxxxxx"></script>

が出力されていれば OK！

💡 プラグインで楽する派？

reCaptcha v3 for CF7 や Bogo（作者同じ）を導入すると、
キャッシュ除外や多言語対応サポートが強化。
テーマ改修が難しい場合はプラグインで包むのも手だ。

🧠 まとめ

  • v2キーを残したままは NG。必ず v3 に統一。
  • wp_head/wp_footer の欠落は読み込み失敗の元凶。
  • 高速化プラグインの JS遅延 が reCAPTCHA を殺す。

🔥 団長のエール

フォームが動かぬと嘆く前に、
キーの世代・フックの有無・遅延読み込み――この3点を点検せよ！
細部を制する者こそ、ユーザー体験を守り抜く守護者だ。
戦え、エンジニア諸君！！🔥

コメントする