Blog article
投稿日:
2019.01.30
更新日:
2019.08.31

reCAPTCHAをv3にした時の右下ロゴマーク(シール?)を消したい!その方法

reCAPTCHAv3は便利

reCAPTCHAv2だったころの信号選ぶ認証。
少なからずあれでコンジョン下げるきっかけになってた場面があるはず。
だって、自分でやった時めちゃくちゃ面倒だもん。。。
v2使ってる方はすぐにv3にすることをオススメしちゃうかも。

のコンタクトフォーム7にreCAPTCHAv3が対応

ワードプレスで圧倒的人気のコンタクトフォーム7。
reCAPTCHAv3に対応しました。

すでにreCAPTHCAを利用されている方も、
改めてv3のAPIkeyを取得しなければなりません。

手順は非常に簡単です。
keyを入れて行けばいいだけです。
10分程度で設定できるでしょう。

https://contactform7.com/recaptcha/

右下に謎の物体出現!

「プライバシー・利用規約」とクルクルマークが出てきます。
出てくれば、スパム避けになってます。

しかし、右下に「トップへ移動」のボタンつけてるサイトって結構見かけます。
例に漏れずデコルもデコパンがナビゲーションしてくれてます。お疲れ様です。

隠れてしまいました。
が損なうのはちょっと嫌だ。
どうにかならないかと考えます。

困ったらサポートページを見る

https://developers.google.com/recaptcha/docs/faq

この一文とリンクあれば大丈夫。って紹介されてます。

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

これだと、スマートでかっこいいかも。
早速、お問い合わせのページに反映させました。
あまり濃い色にしないのがコツかも。

邪魔?うざい?アレを消しちゃいましょう!

でやっちゃいます。

.grecaptcha-badge {
visibility: hidden;
}

こんな感じ。

これで信号機や横断歩道を選ぶ作業から解放

どれが店舗なのかどれが自転車なのか・・・。
もう選ばなくてよくなりました。
これでストレスなくフォームを利用していただけるでしょう。

コンタクトフォーム7じゃなくて、別のを利用する。という方法もあるみたいです。
お好みで使い分けてみてください。

【関連記事】

アバター画像
この記事を書いた人:たかはし
ウェブデザイナー

こちらの記事もオススメです

こういう仕事をしてます

SNSもよろしくね