Googleが提供する「reCAPTCHA (v3)」を Contact Form 7 に設定すると、全ページに【reCAPTCHAで保護されています】のロゴ（バッジ）右下に表示されます。
その結果、「トップへ戻る」ボタンと「reCAPTCHA」のロゴが重なってしまう場合があります。しかも、全ページにJSファイルが読み込まれてしまうので、ページの表示速度が遅くなるという問題が発生します。
今回はその対策として、お問い合わせフォームが設置されているページにだけ「reCAPTCHA (v3)」を読み込ませる方法と、「トップへ戻る」ボタンがロゴが重ならないようにする対策を説明します。
必要なページのみ「reCAPTCHA」を読み込ませる
まず最初に、お問い合わせフォームが設置されているページのみ「reCAPTCHA」を読み込ませます。お問い合わせページのスラッグが例えば「contact」の場合、functions.php に下記のように記載します。
// お問い合わせページを除き、「reCAPTCHA」を読み込ませない
function load_recaptcha_js() {
if ( ! is_page( 'contact' ) ) {
wp_deregister_script( 'google-recaptcha' );
}
}
add_action( 'wp_enqueue_scripts', 'load_recaptcha_js',100 );
これで必要なページだけにJSファイルが読み込まれるようになりました。フォームが設置されているお問い合わせページ以外は「reCAPTCHA」のロゴが消えたはずです。
【2021年追記】フックの優先度を「100」にします。初期値（10）のままだと機能しないのでご注意ください。
reCAPTCHAとトップへ戻るボタンが重なることへの対策
「トップへ戻る」ボタンを設置している場合、このボタンが右下に表示されることが多く、「reCAPTCHA」のロゴと重なってしまうことがよくあります。
この場合、一番スマートな解決方法は、お問い合わせページに「トップへ戻る」ボタンを読み込ませないことですが、ここではより簡単な「トップへ戻る」ボタンの要素にCSSで「display:none;」を指定して非表示にする方法をオススメします。
これとは逆に「reCAPTCHA」のロゴをCSSで非表示する方法は避けてください。「reCAPTCHA」の利用規約を見ると下記の記述があるため、Googleからペナルティを受けないように注意しましょう。
本サービスに伴って表示されるいかなる法的通知も、削除したり、隠したり、改ざんしてはなりません。
まとめ
いかがでしたか？送信フォームを設置したページのみに「reCAPTCHA」を表示できたでしょうか？
ちなみに、WordPressのプラグインを使っても同じようなことができます。「Invisible reCaptcha for WordPress」というプラグインを使えば、ロゴの表示位置を右下から左下へ簡単に移動でき、「Contact Form 7」や「WooCommerce」にも対応しています。
ただし、プラグインの仕様は、Googleの利用規約に抵触しないか少し気になりますので、あくまで自己責任のうえご利用ください。
