Quantcast
Channel: WordPress アーカイブ - WEBもがき道場
Viewing all articles
Browse latest Browse all 21

Google reCAPTCHA(右下のマーク)を非表示にする方法

$
0
0

Snow Monkey FormsやContact Form7では、「Google reCAPTCHA」を設置できますが、これを入れると、全ページGoogle reCAPTCHA(右下のバッジ)が表示されてしまいます。
このバッジは特定の文言を記載していれば非表示にしても問題ありません。
意外と知られていないこの方法について解説します。

必要な文言

以下の文言をフォーム入力画面に表示しておくことで、reCAPTCHAのバッジを非表示にできます。
日本語だと以下の文言になると思います。

このサイトは reCAPTCHA と Google によって保護されています。プライバシーポリシー利用規約が適用されます。

この文言をフォームの送信ボタンのすぐ上に配置することで、利用者にも明示的に示すことができます。


具体的な設定方法

0. Google reCAPTCHAを設置する。各プラグインに設定する。

公式サイトで、Google reCAPTCHAの「サイトキー」と「シークレットキー」を作成します。
設定方法は、こちらのサイト様をご参考にしてください。
迷ったら、Google reCAPTCHA v3の方を設定していだくのがいいと思います。

https://blog.palettecms.jp/article/20108

Snow Monkey FormsやContact Form7には、WordPressの管理画面、各プラグインの項目ごとの左メニューに「Google reCAPTCHA」を入れるところがあります。
そこに入れると設定完了です。

1. reCAPTCHA バッジを非表示にする CSS

まず、Google reCAPTCHA v3 のバッジを非表示にする CSS を追加します。
SWELLなどの有料テーマに入れるときは、2つともカスタムCSSに入れていただくと設定できます。

サイト全体に適用する場合

/* hide reCAPTCHA v3 badge */
.grecaptcha-badge {
    visibility: hidden;
}

フォームページのみ適用する場合

.u-recaptcha-policy {
    font-size: 10px;
    line-height: 1.2;
}

2. フォームに文言を追加

フォームの送信ボタンのすぐ上に、以下のHTMLコードを追加してください。
「カスタムHTML」で挿入します。

<div class="u-recaptcha-policy">
    このサイトは 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>

これにより、Googleの規約に準拠しつつ、reCAPTCHAのバッジを非表示にすることができます。


根拠となる情報

Google公式サイトのreCAPTCHAサポート「よくある質問」によると、

ユーザーフローにreCAPTCHAブランドを視覚的に含める限り、バッジを非表示にすることができます。

Google公式サイト:reCAPTCHAサポート「よくある質問」

サイトのどこかに書いておけばいいとは思うのですが、
サイト訪問者が見やすいように、フォームのところに書いてあげるほうがいいと思います。


参考情報

詳しくは以下のサイトも参考にしてください。
「フォーム以外のページでは非表示にする方法」も載っています。

https://snow-monkey.2inc.org/forums/topic/snow-monkey-forms%E3%81%AErecaptcha%E3%82%92%E8%A8%AD%E5%AE%9A%E6%99%82%E3%81%AE%E3%83%9A%E3%83%BC%E3%82%B8%E5%8F%B3%E4%B8%8B%E3%81%AB%E8%A1%A8%E7%A4%BA%E3%81%95%E3%82%8C%E3%82%8Brecaptcha%E3%83%AD/

投稿 Google reCAPTCHA(右下のマーク)を非表示にする方法WEBもがき道場 に最初に表示されました。


Viewing all articles
Browse latest Browse all 21

Trending Articles