【WordPress】Contact Form 7でreCAPTCHA v3のロゴを非表示にする方法!

reCAPTCHAをContact Form7で使用していると、全てのページにロゴが表示されてしまいますので、それをなんとかする方法を書いてみたいと思います。

スポンサーリンク

基本ルール

reCAPTCHA v3を実装すると、保護マークが全ページの右下に表示されるようになります。

これがデフォルトです。全てのページに表示されます。気にならない方はそのままにすれば良いと思います。
でも、お問い合わせフォームでしか、reCAPTCHAを使用していないというつもりなのに、全ページに表示されるのって、と思う方も多いと思います。

マークの代わりに文字を表示する

下記にロゴの代わりにテキスト表示の方法が書かれています。なので、テキストを表示すれば、ロゴを非表示にしてもいいという話になります。
https://developers.google.com/recaptcha/docs/faq

英語だとこちら

This site is protected by reCAPTCHA and the Google
    <a href="https://policies.google.com/privacy">Privacy Policy</a> and
    <a href="https://policies.google.com/terms">Terms of Service</a> apply.

日本語だとこんな感じ?

このサイトはreCAPTCHAによって保護されており、Googleの<a href = "https://policies.google.com/privacy">プライバシーポリシー</a>と<a href = "https://policies.google.com/terms">利用規約</a>が適用されます。

こちらをfooterとかに記載すれば、ロゴの代わりになると思います。
まずは、上記のテキストを全ページに表示されるようにfooter.phpや、フッターあたりに表示されるウィジェットがあるなら、そちらに入れます。
その上で、CSSに下記を記載して、ロゴを消します。

.grecaptcha-badge { visibility: hidden; }

これでロゴを消して、テキストに切り替えたという状態になると思います。

お問い合わせフォームのページのみにしたい場合

そもそもお問い合わせフォームのためにreCAPTCHAを使用しているんだ!他のページには、フッターにも表示させたくないと思う方も多いと思います。
前提のルールとしては、reCAPTCHAが保護している全てのページにロゴもしくはテキストを表示させる必要があります。
じゃあどうしたらですが、お問い合わせフォームだけにreCAPTCHAを読み込ませれば良いんじゃないかという話になります。
個人的にはそのほうが、他のページが軽くなったりすると思いますし、利用していない機能を全てのページに入れるのって、ちょっとどうかなというのもあります。
では方法ですが、function.phpに下記をいれます。
例えば、お問い合わせフォームの場合、URLがcontactだと、slagが「contact」です

/*----------------------------------------------------
 recaptcha
 ----------------------------------------------------*/
add_action('wp_enqueue_scripts', function() {
	// recaptchaを表示させたい固定ページのslugを指定します。複数OK
	$page_list = [
	'contact', // お問い合わせフォーム
	];
	if(is_page($page_list)) return;
	wp_deregister_script('google-recaptcha');
}, 100);

複数の場合もあると思います。お問い合わせフォーム、資料請求、代理店募集とか。
そんな場合は、下記のように足してください。

/*----------------------------------------------------
 recaptcha
 ----------------------------------------------------*/
add_action('wp_enqueue_scripts', function() {
	// recaptchaを表示させたい固定ページのslugを指定します。複数OK
	$page_list = [
	'contact', // お問い合わせフォーム
	'request', // 資料請求
	'salesagency', // 代理店募集
	];
	if(is_page($page_list)) return;
	wp_deregister_script('google-recaptcha');
}, 100);

ちなみにこちらをアップする前に、お問い合わせフォームにテキストを入れ忘れないようにしましょう。
これです。

このサイトはreCAPTCHAによって保護されており、Googleの<a href = "https://policies.google.com/privacy">プライバシーポリシー</a>と<a href = "https://policies.google.com/terms">利用規約</a>が適用されます。

こんな感じで、確認ボタンの下あたりでも良いと思います。

特定のページのみに、reCAPTCHAが読み込まれたかどうか確認する方法ですが、基本はhtmlソースを見れば確認できると思いますが、それよりも簡単なのは、CSSでロゴを消す前に、先にfunction.phpをアップすれば良いと思います。
function.phpの記載に間違いがなければ、該当するcontactフォームのページのみにロゴマークが出ていると思います。
それを確認した上で、CSSでロゴを非表示にすれば良いと思います。

注意点

新たにフォームのページを増やした場合は、忘れずに必ずfunction.phpにも読み込みを追加しましょう!
おそらく上記の処理が影響したのだと思っていますが、新たにフォームのページを増やした際に、Contact Form7がうまく送信されなくて、あれ?となった時がありました。reCAPTCHA忘れてたと思って、読み込みを追加したら問題なく送信できました。そのような場合もあると思うので、フォームを増やす際は、読み込みの追加も忘れないようにしましょう!

コメントをどうぞ