BLOGブログ

reCAPTCHAをフォームのあるページだけで読み込む方法|Contact Form 7で起きやすい3つの落とし穴

竹節 大輝 /

Web制作・ホームページ制作

WordPress のお問い合わせフォームで、スパム対策として reCAPTCHA(リキャプチャ)を使っているサイトは多いと思います。Contact Form 7 に reCAPTCHA v3 を設定すると、フォームのないページも含めて、サイトのすべてのページ でスクリプトが読み込まれ、画面の右下にバッジが表示されます。

「フォームのないページでは読み込みたくない」「右下のバッジが、ほかのボタンと重なる」。そんなときは、フォームのあるページだけで読み込むようにできます。ただし、やり方をまちがえると、フォームが送信できなくなる ことがあります。

この記事では、読み込むページを絞るコードと、Cruwの自社サイトで実際に起きた落とし穴を紹介します。

追記(2026年10月14日):その後、Cruwの自社サイトは、判定の精度を優先して「全ページで読み込み、バッジをCSSで隠して、フォームの送信ボタンの下に案内文を出す」方式に切り替えました。やり方は、記事の後半の「Cruwが最終的に選んだ方法」で紹介しています。

結論:「読み込むページ」を決めて、それ以外で外す

ポイントは次の3つです。

  1. 「読み込むページ」を先に決め、それ以外のすべてのページで外す:「外すページ」を決める書き方だと、もれが出やすい
  2. フォームを増やしたら、読み込まれているかを確かめる:読み込まれていないと、送信がすべてスパム扱いになる
  3. 絞ることの注意点も知っておく:Google は、多くのページで読み込むことをすすめている

読み込むページを絞るコード

テーマの functions.php に、次のように書きます。Cruwの自社サイトで使っていたコードを、わかりやすく短くしたものです。

add_action( 'wp_enqueue_scripts', function () {
    // テンプレートでフォームを出しているページでは、読み込む
    if ( is_page( array( 'contact', 'estimate', 'recruit' ) ) ) {
        return;
    }

    // 本文に Contact Form 7 のショートコードがある投稿・固定ページでも、読み込む
    if ( is_singular() ) {
        $post = get_post();
        if ( $post && has_shortcode( $post->post_content, 'contact-form-7' ) ) {
            return;
        }
    }

    // それ以外(一覧・検索結果・404 を含む)では、reCAPTCHA を外す
    wp_deregister_script( 'google-recaptcha' );
    wp_deregister_script( 'wpcf7-recaptcha' );
}, 100 );
  • is_page() の中には、フォームのあるページのスラッグ(URLの名前)を書きます
  • google-recaptcha と wpcf7-recaptcha は、Contact Form 7 が reCAPTCHA を読み込むときに使っている名前です
  • 最後の 100 は、Contact Form 7 が読み込みを登録したあと(Contact Form 7 は 20)に実行するための指定です

読み込まれているかを確かめる方法

ページを開き、ブラウザの「ページのソースを表示」で recaptcha/api.js を検索します。

  • 見つかる → そのページでは reCAPTCHA が読み込まれています
  • 見つからない → 読み込まれていません

確かめるページは、次の3種類です。

種類例あるべき状態
フォームのあるページお問い合わせ、お見積もり、採用読み込まれている
フォームのない個別のページトップページ、会社概要、ブログの記事読み込まれていない
一覧などのページブログの一覧、カテゴリー、検索結果、404読み込まれていない

3つ目の「一覧などのページ」は、見落としやすいところです。理由は、次の落とし穴2で紹介します。

落とし穴1:フォームを増やしたら、送信がすべてスパム扱いになった

Cruwでは、2026年9月にシステム開発用のお見積もりフォームを新しく作ったところ、テスト送信がすべて「メッセージの送信に失敗しました」になりました。

原因は、新しいページが「読み込むページ」に入っていなかったことです。reCAPTCHA が読み込まれないと、Contact Form 7 は送信を確かめられず、スパムと判定します。

見落とした理由は2つありました。

  • 新しいページでは、フォームを本文ではなく、テンプレート(PHPのファイル)の中で表示していた。そのため「本文にショートコードがあるか」の判定に当てはまらなかった
  • スラッグの一覧に、新しいページを追加していなかった

テンプレートの中でフォームを表示しているページは、スラッグの一覧に追加する。これを忘れないことが大切です。原因の見分け方は、Contact Form 7で「メッセージの送信に失敗しました」と出る原因と対処法でくわしく紹介しています。

落とし穴2:一覧・検索結果・404 のページで、外れていなかった

この記事を書くために、自社サイトの各ページを確かめたところ、もう1つ見つかりました。ブログの一覧、カテゴリー、検索結果、404 のページで、reCAPTCHA が読み込まれたままになっていたのです。

以前のコードは、次のように始まっていました。

add_action( 'wp_enqueue_scripts', function () {
    // 個別のページでなければ、何もしない
    if ( ! is_singular() ) {
        return;
    }

    // (このあとで、ショートコードがなければ外す)
}, 100 );

「本文にショートコードがあるか」を調べられるのは、投稿や固定ページなどの個別のページだけです。そこで、個別のページ以外では、何もせずに処理を終えていました。その結果、一覧などのページでは、reCAPTCHA が外れないまま残っていました。

これは、「外すページ」を決める書き方 をしていたために起きたもれです。最初に紹介したコードのように、「読み込むページ」を先に決めて、それ以外をすべて外す書き方にすると、もれが起きません。

フォームは正常に送信できるため、表示を確かめないかぎり気づきにくい点です。上の表の3種類のページを、一度確かめてみてください。

落とし穴3:キャッシュや高速化のプラグインと組み合わせたとき

ページのキャッシュや、CSS・JavaScript をまとめるプラグインを使っている場合は、コードを変えたあとにキャッシュを消してから確かめます。古いページが残っていると、変更が反映されていないように見えます。

また、JavaScript を遅らせて読み込む設定にしている場合は、reCAPTCHA の準備が終わる前に送信されて、スパムと判定される可能性もあります。コードを変えたあとは、表示だけでなく、実際にテスト送信をして、受信メールと自動返信メールが届くこと まで確かめましょう。

絞る前に知っておきたいこと

Google は、多くのページで読み込むことをすすめている

reCAPTCHA v3 は、サイトを見ている人の動きから、0.0〜1.0 の点数を付けます。Google の案内では、サイトでの動きを多く見られるほど判定がよくなるため、フォームだけでなく、ほかのページでも読み込むことがすすめられています(reCAPTCHA v3 のドキュメント、英語)。

つまり、読み込むページを絞ることは、表示の軽さと引きかえに、判定の材料を減らすことでもあります。絞ったあとにスパムが増えた、または本物のお問い合わせがスパムと判定されるようになった場合は、絞るのをやめることも考えましょう。

バッジを隠したいだけなら、CSSでもできる

「右下のバッジが気になる」だけであれば、読み込みを止めなくても、CSSで隠す方法があります。

.grecaptcha-badge {
  visibility: hidden;
}

ただし、Google は、バッジを隠す場合には、reCAPTCHA を使っていることをフォームの近くなどに文字で表示するよう求めています(reCAPTCHA のよくある質問、英語)。隠すときは、フォームの下などに、案内の文章を忘れずに入れましょう。

Cruwが最終的に選んだ方法:全ページで読み込み、バッジを隠す

Cruwでは、この記事の方法でいったん読み込むページを絞りました。その後、Googleの案内どおり判定の材料を多くするほうを優先し、次の方式に切り替えました。

  1. reCAPTCHA は、Contact Form 7 の初期設定のまま、全ページで読み込む(読み込むページを絞るコードは削除)
  2. 右下のバッジは、CSS で隠す
  3. 代わりに、すべてのフォームの送信ボタンのすぐ下に、reCAPTCHA の案内文を出す

案内文は、フォームごとに1つずつ書き足すのではなく、テーマの functions.php で自動で差し込んでいます。フォームを増やしても、書き忘れることがありません。

// フォームの送信ボタンの下に、reCAPTCHA の案内文を出す
add_filter( 'wpcf7_form_elements', function ( $html ) {
    // reCAPTCHA を使っていないときは、何もしない
    if ( ! class_exists( 'WPCF7_RECAPTCHA' ) || ! WPCF7_RECAPTCHA::get_instance()->is_active() ) {
        return $html;
    }

    $note = '<div class="recaptcha-note">このフォームはreCAPTCHAで保護されており、Googleの'
        . '<a href="https://policies.google.com/privacy" target="_blank" rel="noopener">プライバシーポリシー</a>と'
        . '<a href="https://policies.google.com/terms" target="_blank" rel="noopener">利用規約</a>が適用されます。</div>';

    // 送信ボタンは <button>(自作のボタン)か <input>([submit] タグ)のどちらか
    $replaced = preg_replace( '#<button[^>]*wpcf7-submit[^>]*>.*?</button>#s', '$0' . $note, $html, 1, $count );
    if ( ! $count ) {
        $replaced = preg_replace( '#<input[^>]*wpcf7-submit[^>]*>#', '$0' . $note, $html, 1, $count );
    }

    return $count ? $replaced : $html . $note;
} );
.grecaptcha-badge {
  visibility: hidden;
}
.recaptcha-note {
  margin-top: 1rem;
  font-size: 12px;
  color: #666;
  text-align: center;
}

ポイントは2つです。

  • 案内文は <p> ではなく <div> にする:Cruwのお問い合わせページでは、フォームの中の <p> に横並びの指定があり、<p> にすると案内文がばらけて表示されました。サイトのCSSによっては、同じことが起こります
  • ステップ形式のフォームでは、送信ボタンと同じステップに出る:送信ボタンの直後に差し込むので、途中のステップには表示されません

よくある質問

フォームのページを増やすたびに、コードを直す必要がありますか?

本文にショートコードを入れて作るページなら、直す必要はありません。テンプレートの中でフォームを表示するページを増やしたときだけ、スラッグの一覧に追加します。

読み込むページを絞ると、どのくらい速くなりますか?

サイトによって変わるため、一概には言えません。変える前と後で、PageSpeed Insights などの計測ツールで比べてみるのが確実です。

reCAPTCHA をやめて、ほかの方法にしてもいいですか?

かまいません。Contact Form 7 は、バージョン6.1から Cloudflare Turnstile にも対応しています。どの方法でも、「必要なページで読み込まれているか」「テスト送信が届くか」を確かめる手順は同じです。

まとめ

  • Contact Form 7 の reCAPTCHA は、設定するとすべてのページで読み込まれる。フォームのあるページだけに絞ることができる
  • 「読み込むページ」を先に決め、それ以外をすべて外す書き方にすると、一覧や 404 のページでのもれを防げる
  • フォームを増やしたら、スラッグの一覧への追加と、テスト送信を忘れない

「フォームから送信できないと言われた」「サイトの表示を速くしたい」といったご相談も承っています。長野県上田市のCruwまで、お問い合わせからお気軽にご相談ください。フォームの作り方については、見積もりフォームは質問を分けると相談しやすくなるでも紹介しています。

/

GoogleのAI検索で「Cruwのブログ」を優先表示しませんか?

Googleの最新機能では、お気に入りのサイトを「優先するソース」として登録できるようになりました。登録していただくと、GoogleのAIモードやAI Overviewsが回答をつくる際、当サイトの情報を優先的に参照・表示してくれるようになります。

これからも地域ビジネスに役立つ最新のWebマーケティング情報を発信していきますので、ぜひ優先ソースへのご登録をお願いいたします!