PR トラブル解決 プラグイン活用

Contact Form 7でreCAPTCHAエラーが出るときの原因と解決方法【AFFINGER対応】

KAZU

2017年からAFFINGERを使い続け、複数の有料テーマも試してきたサイト運営者。

THE AFFINGERでは、AFFINGERのデザイン、表示設定、カスタマイズを中心に、実際の運営で使える情報を発信。

裏側ではAIと融合した運営にも取り組み、AIエージェントを使った検証・改善・サイト制作の自動化も進めている。

お問い合わせフォームを設置したときに必須なのが「スパム対策」。

特にContact Form 7(CF7)では、Googleの reCAPTCHA を使うのが一般的です。

ところが導入した途端に、「送信できない」「エラーが出る」「バッジが表示されない」といったトラブルに悩む方も少なくありません。

私自身も最初は「なんで動かないんだろう?」と焦ったことがあります。

この記事では、初心者でも解決できるように reCAPTCHAでよくあるエラーと、その解決方法を分かりやすく解説します。

Contact Form 7のreCAPTCHAの基本

reCAPTCHAには「v2」と「v3」の2種類があります。

  • v2:「私はロボットではありません」のチェックボックスを使うタイプ
  • v3:ユーザーが操作せず自動判定されるタイプ(バッジが右下に表示される)

現在のCF7では v3の利用が推奨 されています。

ただし、この設定を間違えたり、キーを正しく入れなかったりすると、送信できない・表示されないといったエラーにつながります。

よくあるエラーと原因

「送信できませんでした」と表示される

  • Googleで取得した サイトキー/シークレットキーが間違っている
  • v2のキーをv3に入力しているなど、バージョンの不一致

多くの場合は、キーを再発行して正しく入力し直すだけで解決します。

reCAPTCHAバッジが表示されない

  • キャッシュ系プラグインやブラウザのキャッシュが原因で読み込まれていない
  • テーマや他プラグインと競合している

まずはキャッシュ削除、それでもダメなら他プラグインを一時停止して原因を切り分けます。

v2を選んでしまった

最近のCF7はv3が基本。

v2のまま使うと動作不良が起きることがあります。

Google reCAPTCHAの管理画面で v3で新しく登録し直す 必要があります。

解決方法ステップ(初心者向け)

ステップ1:
キーを再発行して正しく入力

  1. Google reCAPTCHA管理画面 にアクセス
  2. サイトを「v3」で登録
  3. 発行された「サイトキー」と「シークレットキー」をコピー
  4. WordPress管理画面 →「お問い合わせ」→「インテグレーション」
  5. reCAPTCHA欄にそれぞれ貼り付けて保存

ステップ2:
v3に切り替える

もしv2を使っていた場合は、新しくv3で登録し直しましょう。

CF7はv3で安定動作するので、これだけでエラーが解消されるケースも多いです。

ステップ3:
キャッシュを削除する

  • ブラウザを「スーパーリロード(Ctrl+Shift+R)」
  • キャッシュ系プラグイン(WP Fastest Cacheなど)を使っている場合はキャッシュを削除

これでバッジが表示されるようになることが多いです。

ステップ4:
プラグイン競合を切り分ける

  • 他のプラグインを一時停止してフォームを確認
  • 問題が解消するなら、そのプラグインとの相性が原因

一つずつオン/オフして原因を特定してください。

AFFINGERでの注意点

AFFINGERを使う場合、デザイン調整でついついやってしまうのが バッジを消してしまうこと

  • CSSで display:none; を指定すると、Googleの規約違反になります
  • バッジが目立ちすぎて気になる場合は「位置変更」で対応しましょう

例:右下から左下に移動させるCSS

.grecaptcha-badge {
left: 10px !important;
right: auto !important;
}

バッジは残したまま位置を調整するのが正解です。

まとめ

この記事のまとめです。

  • reCAPTCHAはスパム対策に必須だが、エラーが出やすいポイントでもある
  • 多くの原因は「キー設定の間違い」「キャッシュ」「プラグイン競合」
  • AFFINGERユーザーはデザイン調整時にバッジを消さないよう注意!

もし他にも困ったことがあれば以下の記事も参考にしてください。

参考
参考

    その他のAFFINGERトラブルでお困りの方へ

    AFFINGERを使っていると他にも様々なトラブルに遭遇することがありますよね。

    • サイドバーが崩れた
    • 記事が真っ白になった
    • カスタマイザーの設定が反映されない
    • プラグインとの相性問題
    • デザインが突然おかしくなった

    など、「これどうしたらいいの?」と困っていることがあれば、お気軽にご相談ください。

    この記事で紹介した方法を試した上で、それでも解決しない場合は一緒に原因を探りましょう。

    お問い合わせはこちら

    ※スクリーンショットや、試した内容を添えていただけるとスムーズです。
    ※返信までお時間をいただく場合がございますのでご了承ください。

    • この記事を書いた人
    • 最新記事

    KAZU

    2017年からAFFINGERを使い続け、複数の有料テーマも試してきたサイト運営者。

    THE AFFINGERでは、AFFINGERのデザイン、表示設定、カスタマイズを中心に、実際の運営で使える情報を発信。

    裏側ではAIと融合した運営にも取り組み、AIエージェントを使った検証・改善・サイト制作の自動化も進めている。

    -トラブル解決, プラグイン活用
    -, ,