reCAPTCHA のバッジ表示位置が気になる
Contact Form 7 で Google reCAPTCHA を使うように設定しましたが、どうしても reCAPTCHA の表示が気になります。
モバイル用の画面では、下にフッターモバイルメニューが表示されています。また、下にスクロールした際に「トップへ戻る」ボタンが表示されます。この二つが reCAPTCHA のバッジと重なってしまうために、見た目が悪く操作性が落ちてしまいます。
reCAPTCHA のバッジを非表示にする条件と方法
Google の reCAPTCHA バッジは、非表示にする事自体は問題ありません。代わりに reCAPTCHA を使用している旨 (ブランディング) を明示する必要があります。
I'd like to hide the reCAPTCHA badge. What is allowed?
You are allowed to hide the badge as long as you include the reCAPTCHA branding visibly in the user flow.reCAPTCHA バッジを非表示にしたいです。何が許可されていますか？
https://developers.google.com/recaptcha/docs/faq
ユーザーフローに reCAPTCHA ブランディングを目に見えるように含める限り、バッジを非表示にすることができます。
Google 推奨の方法では、以下の HTML を必要な箇所に追記して表示します。プライバシーポリシーと利用規約へのリンクは必須です。
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.reCAPCHA を使用している旨の表示を追加
reCAPTCHA ブランディングの表示は、「お問い合わせ」フォームと「コメント」欄の送信ボタンの後に追記するようにしました。
Contact Form 7 で作成した「お問い合わせ」フォームでは、コンタクトフォームの最後に追記しました。
「コメント」欄に追加する方法については、Cocoon フォーラムの下記の記事を参考に、Cocoon Child の functions.php に追記しました。
add_filter( 'comment_form_submit_button', function( $submit_button ) {
$html = '<p>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.</p>';
return $submit_button . $html;
});何方も正常に表示できる事を確認しました。
reCAPTCHA バッジを非表示
ブランディングの表示ができれば、CSS でバッジを非表示にします。Cocoon Child の style.css に以下の内容を追記しました。
.grecaptcha-badge { visibility: hidden; }まとめ
reCAPTCHA のバッチが、モバイル用のフッタメニューや下スクロール時の先頭に戻るボタンと重なってしまう事から、「reCAPTCHA」ブランディングを表示した上で reCAPTCHA のバッジを非表示としました。
reCAPTCHA ブランディングの表示は、「お問い合わせ」フォームと「コメント」欄に表示するようにしました。
これで、reCAPTCHA で SPAM を防止する事とデザインを両立させる事が出来ました。ひとまずはこの状態で運用してみようと思います。
アイキャッチ画像
Kohji AsakawaによるPixabayからの画像です。関東は冬は晴れている日が多いですが、このような雄大な景色に辿り着くには時間が掛かります。個人的には田舎暮らししたいですが、現状では難しいです。
コメント