В конце 2018 года Google представила третью версию Recaptca V3. Основное отличие от второй версии – Распознавание трафика происходит в фоне, без взаимодействия с пользователем. Казалось бы, отлично Google, так держать, но есть один нюанс.

При использовании новой версии “антикапчи” в правом нижнем углу сайта появляется значок “защита от спама reCAPTCHA”, который никак нельзя отключить.

Как скрыть значок reCAPTCHA v3

Почему показывается значок reCAPTCHA V3

Чтобы понять как скрыть этот “значок”, нужно понять зачем он вообще показывается. Если мы наведем на него курсор мыши, то увидим ссылки на “Политику конфиденциальности” и “Условия использования”.

Как удалить логотип reCAPTCHA v3

При настройке reCAPTCHA на сайте Google необходимо принять “Условия использования”. И по этим условиям вы обязаны информировать посетителей о наличии проверки reCAPTCHA v3.

Как правильно скрыть значок reCAPTCHA v3

Именно по этой причине и показывается этот “значок”. И по той же причине его нельзя просто так скрывать.

Многих такой порядок дел не устраивает и в этой статье я расскажу как его правильно убрать и не нарушить условия Google.

Как скрыть уведомление о reCAPTCHA v3 не нарушив условия использования

Если вы не хотите видеть на страницах своего сайта вездесущее уведомление о рекапче необходимо выполнить ряд действий.

  1. Скрываем сам “значок”. Для этого нужно:
    1. установить значение  inline для атрибута data-badge в коде кнопки отправки формы. 
    2. Добавить в файл стилей следующий CSS код .grecaptcha-badge {visibility: hidden;}
  2. Добавить под формой или, например, в футер сайта, рядом с вашей политикой конфиденциальности следующую информацию:
    1
    2
    3
    
    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.

Этот способ предложил сам Google (источник), поэтому не стоит опасаться, что ваш сайт отключат от reCAPTCHA V3

Как скрыть значок с условиями reCAPTCHA v3 на сайте WordPress

Для пользователей WordPress я решил написать отдельную инструкцию, предвидя такие вопросы в комментариях.

Начиная с версии 5.1 плагин Contact Form 7 полностью переходит на использование третьей версии “реКапчи”. Теперь нет необходимости вставлять в форму шорткод [recapcha]. После интеграции reCAPTCHA V3 защита будет работать по умолчанию для всех форм. Это действительно удобно, а, главное, работает и избавляет от 99% спама (лично протестировал на нескольких проектах).

Ну а теперь, собственно, инструкция для Вордпресс:

1. Скрываем сам “значок”. Для этого нужно: Добавить в файл стилей следующий CSS код .grecaptcha-badge {visibility: hidden;}. Зайдите в раздел Внешний вид/редактор и найдите там файл CSS вашей темы (дочерней либо основной) и пропишите его в любом месте, но не в правила для мобильных.

Как скрыть значок с условиями reCAPTCHA v3 на сайте WordPress

2. Добавить под формой или, например, в футер сайта, рядом с вашей политикой конфиденциальности следующую информацию:

1
2
3
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.

Здесь способ зависит от того, какую тему вы используете. Как правило в настройки футера можно попасть через кнопку “настроить” в админ баре (так называемый “кастомайзер”). Пример можно посмотреть в футере этого сайта.

Буду рад ответить на ваши вопросы в комментариях. Отдельный респект за оценку статьи в комментах)..

5 3 голоса
Рейтинг статьи
Подписаться
Уведомить о
guest

33 комментариев
Старые
Новые Популярные
Межтекстовые Отзывы
Посмотреть все комментарии
Eugene Merzlyakov
4 лет назад

Спасибо, в десктопной версии значек убрал, а в мобильную когда добавляю – все-равно висит. Что я делаю не так?

Eugene Merzlyakov
4 лет назад
Ответить на  Евгений Агнищенко

@media это в основном style.css искать?

Надежда Яковлева
3 лет назад

Помогите…Обязательно нужно и в CSS прописывать и в подвал сайта заносить ссылку гугла? Нельзя без ссылки обойтись?

Игорь
3 лет назад

Попробовал второй способ для Ворпрес, но увы ничего не получилось.

Игорь
3 лет назад
Ответить на  Евгений Агнищенко

Увы, да. так и болтается в углу сайта и перекрывает “значок подняться вверх”

Игорь
3 лет назад
Ответить на  Евгений Агнищенко

WordPress 5.2.4

Роман
3 лет назад

display:none уже не прокатит. Они по умолчанию добавили в WP display:inline-block, которое имеет приоритет выше того display:none, что прописаны в стилях. В общем, используйте вместо none атрибут visibility

.grecaptcha-badge {visibility: hidden;}

Роман
Роман
3 лет назад
Ответить на  Евгений Агнищенко

Вам спасибо. Возможно, это нововведения какие-то и кому-то мой коммент поможет.

Дмитрий Глазков
3 лет назад
Ответить на  Роман

Спасибо, именно таким образом только и получилось!

Евгений
Евгений
3 лет назад

Спасибо огромное, Евгений. v3 хорошая, но торчала на 3 см, перекрывая функционал. Теперь все прекрасно.

Марина Дворниченко

Спасибо, отлично работает в Вордпресс.

Расположила ссылку в футере, изменила размер и цвет текста и все выглядит замечательно!

КОД ДЛЯ ВСТАВКИ :

<p style=”font-size:8px” class=”has-text-color has-cyan-bluish-gray-color”>This site is protected by reCAPTCHA and the Google

&lt;a href=”https://policies.google.com/privacy”&gt;Privacy Policy&lt;/a&gt;

and &lt;a href=”https://policies.google.com/terms”&gt;Terms of Service&lt;/a&gt; apply.</p>

Виталий
2 лет назад

В статье есть один маленький, но очень важный нюанс.

Чтобы скрыть навязчивый логотип reCAPTCHA нужно в CSS-стилях прописать не display: none, а visibility: hidden. Иначе, капча будет не валидная. Так сказано в оф. документации: https://developers.google.com/recaptcha/docs/faq

Евгений Лобасенко
2 лет назад

большое спасибо за статью. всё получилось!

Дмитрий
Дмитрий
2 лет назад

ЕВГЕНИЙ, отлично!

Спасибо за инструкцию к Вордпресс.

Илья
Илья
2 лет назад

Полчаса ковырялся и заклеил display: none. Обрадовался, но решил та-ки погуглить. Правильный вариант visibility: hidden Благодарю!

Konstantin Barbolin
2 лет назад

Спасибо! Как только увидел решение – самый первый вопрос как скрыть нафиг этот значок)

Виталий Кляус
2 лет назад

А если вставить эти ссылки на отдельной странице, а в формах ссылаться на “политика конфидициальности”, где среди прочего будет и это? или аналогичная ссылка на открытие модального окна, к примеру?

Светлана Павлова
2 лет назад

А проще нельзя как-то удалить навязчивый значок captcha, и плевать какой у него номер— он мне книги читать мещает

Стефан
Стефан
1 год назад

Здравствуйте! Долго мучался, думал уже не работает. Уже все англ форумы облазил – ничего не помогло. Сам додумался). Оказывается мне помогло внесение кода .grecaptcha-badge {visibility: hidden;} не во внешний вид – редактор тем – style.css. А в дополнительные стили. Когда вы вошли в вордпресс как админ, на любой странице сайта, вверху на панельке нажимаем “настроить”, выбираем “дополнительные стили”, вставляем .grecaptcha-badge {visibility: hidden;}

и рекапча сразу исчезает. Незабываем нажать “опубликовать”.

Кстати в редакторе тем (внешний вид- редактор тем) висит выше надпись: “А знаете ли вы? Нет необходимости менять CSS здесь — можно отредактировать и сделать предварительный просмотр изменений в встроенном редакторе CSS” – и по ссылке можно сразу перейти.

Надеюсь кому-то поможет!

123
123
1 месяц назад
Ответить на  Стефан

Действительно помогло, спасибо!

Алеся
Алеся
1 год назад

Мне помог код:

.grecaptcha-badge { Display: none !important }

Константин Шестопалов

Благодарю за подробную инструкцию. Скрыть бейдж удалось только с применением !important.

Ахсар
Ахсар
1 год назад

а для чего вот этот пункт: “установить значение inline для атрибута data-badge в коде кнопки отправки формы. ” про это на официальном сайте не написанно

Анна
Анна
1 год назад

Добрый день. У меня ничего не выходит. Кнопка не убирается. Вставила все коды что были предложены в редактор темы. Помогите плиз может что напутала

33
0
Оставьте комментарий! Напишите, что думаете по поводу статьи.x