Contact Form 7のreCAPTCHA(v3)で全ページに表示させない方法

先日、迷惑メール対策としてreCAPTCHA v3を設置しました。Contact Form 7は迷惑メール対策としてreCAPTCHAの設置が出来ます。

v3は「私はロボットではありません」というメッセージが出ません。メッセージが出ないので、ユーザがチェックなどアクションを起こす必要がありません。どういった構造なのか、私にはさっぱり分かりませんが、reCAPTCHA v3を設置するだけで迷惑メールが来なくなります。

全ページにreCAPTCHAのマークが表示されてしまいます

ただ、1点残念なことがあり、サイトの全ページにreCAPTCHAのロゴが表示されてしまいます。全ページに表示されると邪魔なので、今回お問い合わせのページのみに表示させるようにしたいですね。

お問い合わせページに表示させる

コードは以下になります。CSSに追記すればOKです。

//基本的には非表示にする
.grecaptcha-badge {
visibility: hidden;
}

//お問い合わせページには表示させる
.page-id-1549 .grecaptcha-badge { //お問い合わせのページIDを入れる
visibility: visible;
}

要は、全ページのreCHAPCTAは非表示にして、お問い合わせページのみを表示させます。

WordPressだとbodyタグにそのページ独自のクラスが付与されています（たぶん・・・）。そのクラス名を指定してあげてください。page-id-1549と記載していますが、当然サイトによって異なります。詳細は、ディベロッパーツールで確認してください。

ちなみに他の方法でも構いません。要はお問い合わせページ独自のクラス（もしくはID）があれば何でも良いです。

上記コードのvisibility: hiddenは、非表示ということです。ちなみに表示されていないだけでモノ自体は読み込まれています。表現が難しいですが、モノ自体はあるけど、表示はしていないということです。今回の例でいうと、reCHAPCTA自体は読み込まれているけど、表示はしていません。ちなみに、reCHAPCTA自体を読み込ませない方法は、display: noneです。

他にも設定方法があります

reCAPTCHA v3をGoogleで設定時に、お問い合わせページ（http://ドメイン/contact/など）を設定すれば良いのかなと後で思いました。それだとお問い合わせページだけ適用されるのではないでしょうか？どうなんですかね、試していないので分かりません。

あとGoogle Invisible reCaptcha for WordPressというプラグインだと必要なページにreCAPTCHAを表示させることができるみたいです。今回は使用しませんでしたが、こっちの方が簡単かもしれないですね。今思えばこのプラグインの方が良かったと思っています。

まとめ

Contact Form 7にreCAPTCHA v3を設定すると、全ページに表示されるので邪魔です。お問い合わせページのみに表示させるようにしましょう。