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

158

При внедрении нового Google Invisible reCATPTCHA по умолчанию в правом нижнем углу экрана появляется значок «Защищено reCAPTCHA», который появляется при наведении на него курсора.

введите описание изображения здесь

Я хотел бы скрыть это.

Джеймс Лоу
источник

Ответы:

219

Google теперь позволяет скрыть значок из FAQ :

Я хотел бы скрыть значок reCAPTCHA v3. Что разрешено?

You are allowed to hide the badge as long as you include the reCAPTCHA
branding visibly in the user flow. Please include the following text:

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.

Например:

введите описание изображения здесь

Таким образом, вы можете просто скрыть это, используя следующий CSS:

.grecaptcha-badge { 
    visibility: hidden;
}

введите описание изображения здесьНе используйте, display: none;как кажется, отключить проверку спама (спасибо @Zade)

Yann39
источник
24
Я бы не стал говорить вам, что делать;) Я просто предупреждаю любых других пользователей, что удаление может быть незаконным.
Yann39
16
это совершенно неприемлемо, потому что на маленьких экранах, таких как мобильные телефоны, этот значок покрывает значительную часть веб-страницы.
Дон Диланга
12
Примите это или выберите другой сервис. Google имеет полное право потребовать от вас показать брендинг их бесплатного сервиса. Вы даже можете переместить значок, чтобы он был встроен в форму developers.google.com/recaptcha/docs/invisible#render_param .
Александр Отавка
1
Ну, я использую только эту капчу v3 на странице контактов. Так что это единственная страница, на которой я хочу показать этот значок. Это не относится где-либо еще на моем сайте. Возможно?
Эндрю Тракль
4
@ Yann39 - пожалуйста, обновите свой ответ. Это хорошо, чтобы скрыть это и, например, добавить его только на страницу контактов: developers.google.com/recaptcha/docs/faq
Sol
172

Я проверил все подходы и:

ВНИМАНИЕ: display: none ОТКЛЮЧАЕТ проверку на спам!

visibility: hidden и opacity: 0 НЕ отключайте проверку на спам.

Код для использования:

.grecaptcha-badge { 
    visibility: hidden;
}

Когда вы скрываете значок значка, Google хочет, чтобы вы указали его службу в форме, добавив следующее:

<small>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.
</small>

Пример результата

Helenesh
источник
6
Этот ответ должен быть выше! Он содержит всю необходимую информацию для решения в сжатой форме.
Бьорн Ларссон
3
Именно то, что я искал, и это прекрасно работает. Также для тех, кто ищет доказательства того, что это разрешено, просмотрите эту страницу (если вы еще не видели ее в этой теме) developers.google.com/recaptcha/docs/faq
Джейк
Спасибо за упоминание этого @Jake. Я добавил это в свой ответ.
Хеленеш
Кто-нибудь нашел документированный способ скрытия значка вместо взлома CSS? Google предлагает альтернативный способ показать их брендинг, но я не могу найти поддерживаемый способ скрытия их значка.
Коллин Прайс
38

Установите data-badgeатрибут вinline

<button type="submit" data-sitekey="your_site_key" data-callback="onSubmit" data-badge="inline" />

И добавьте следующий CSS

.grecaptcha-badge {
    display: none;
}
Джеймс Лоу
источник
7
Быть осторожен; это похоже на отключение проверки спама.
Заде
3
Это действительно отключает проверку спама? Если так, то почему все противники?
Чарли Шлиссер
1
@ Заде может вместо этого использовать opacity: 0или visibility: hidden? также у вас есть ссылка на где это статистика?
ctf0
4
Пользовательское соглашение гласит, что вы должны информировать пользователей, как @ Yann39 говорит выше.
Михаил Минков
1
@ Хеленеш стоит отдельного ответа?
Анупам
14

Google теперь говорит: «Вам разрешено скрывать значок, если вы явно включаете брендинг reCAPTCHA в поток пользователей». Ссылка на сайт

CodeSmith
источник
2
Применимо только к v3! v2 все еще требует показа значка. :(
ADTC
13

Так как скрытие значка не является действительно законным в соответствии с TOU, и существующие варианты размещения нарушали мой пользовательский интерфейс и / или UX, я предложил следующую настройку, которая имитирует фиксированное позиционирование, но вместо этого отображается как встроенная:

Разборная "невидимая" капча

Вам просто нужно применить CSS для вашего контейнера значков:

.badge-container {
  display: flex;
  justify-content: flex-end;
  overflow: hidden;
  width: 70px;
  height: 60px;
  margin: 0 auto;
  box-shadow: 0 0 4px #ddd;
  transition: linear 100ms width;
}
.badge-container:hover {
    width: 256px;
}

Я думаю, что это так далеко, как вы можете на законных основаниях.

krukid
источник
1
Ницца. Я продвинул это еще больше (фактически не скрывая это полностью), используя transform: scale(0.6)иopacity: 0.6
squarecandy
Вы можете открыть синий баннер справа, чем слева? Также адаптировать цветовую схему этого?
Вайшал Патель
@VaishalPatel в теории, да, но есть два минуса: во-первых, Google не поощряет вмешательство в собственный дизайн значков, а во-вторых, чем больше предположений о существующем дизайне вы делаете в своих изменениях, тем более хрупким становится ваше решение - имейте в виду Google свободно изменять стили значков и макет, когда они захотят.
krukid
1
@krukid Я использовал встроенный стиль по умолчанию.
Вайшал Патель
9

Я решил скрыть значок на всех страницах, кроме моей страницы контактов (с помощью Wordpress):

/* Hides the reCAPTCHA on every page */
.grecaptcha-badge {
    visibility: hidden !important;
}

/* Shows the reCAPTCHA on the Contact page */
/* Obviously change the page number to your own */
.page-id-17 .grecaptcha-badge {
    visibility: visible !important;
}

Я не веб-разработчик, поэтому, пожалуйста, поправьте меня, если что-то не так.

РЕДАКТИРОВАТЬ: Обновлено, чтобы использовать видимость вместо отображения.

Леон
источник
это будет работать, но идентификатор страницы - специфичен для вашего веб-сайта, поэтому любой, кто использует это, должен будет откорректировать идентификатор, чтобы он соответствовал странице, на которой он хочет отображаться. || Я видел сообщения о том, что делает это отображение: нет; также отключит проверку, но я не уверен в этом прямо сейчас.
Майкл Туннелл
Осторожный! Это отключает проверку на спам. Проверьте мой ответ для получения дополнительной информации
Helenesh
Обновлено на основе вышеуказанных комментариев от Michael & Helenesh
Леон
4

Небольшой вариант поста Мэтью Доуэлла, который избегает коротких вспышек, но отображается всякий раз, когда видна форма контакта 7:

div.grecaptcha-badge{
    width:0 !important;
}

div.grecaptcha-badge.show{
    width:256px !important; 
}

Затем я добавил следующее в header.php в моей дочерней теме:

<script>
jQuery( window ).load(function () { 
    if( jQuery( '.wpcf7' ).length ){ 
        jQuery( '.grecaptcha-badge' ).addClass( 'show' );
    }
});
</script>
Найджел Дайер
источник
3

Мое решение состояло в том, чтобы скрыть значок, а затем отобразить его, когда пользователь сосредоточится на вводе формы - таким образом, все еще придерживаясь правил Google.

Примечание: ReCAPTCHA, которую я настраивал, был сгенерирован плагином WordPress, поэтому вам может понадобиться обернуть reCAPTCHA <div class="inv-recaptcha-holder"> ... </div>собой.

CSS

.inv-recaptcha-holder {
  visibility: hidden;
  opacity: 0;
  transition: linear opacity 1s;
}

.inv-recaptcha-holder.show {
  visibility: visible;
  opacity: 1;
  transition: linear opacity 1s;
}

JQuery

$(document).ready(function () {
  $('form input, form textarea').on( 'focus', function() {
    $('.inv-recaptcha-holder').addClass( 'show' );
  });
});

Очевидно, что вы можете изменить селектор jQuery для нацеливания на конкретные формы, если это необходимо.

Энди П
источник
3

Для пользователей контактной формы 7 в Wordpress этот метод работает для меня: я скрываю повторную версию v3 на всех страницах, кроме страниц с контактными формами.

Но этот метод должен работать на любом сайте, где вы используете уникальный селектор классов, который может идентифицировать все страницы с элементами формы ввода текста.

Сначала я добавил целевое правило стиля в CSS, которое может свернуть плитку:

CSS

 div.grecaptcha-badge.hide{
    width:0 !important;
}

Затем я добавил JQuery-скрипт в свой заголовок, чтобы он срабатывал после загрузки окна, чтобы селектор класса 'grecaptcha-badge' был доступен для JQuery, и мог добавить класс 'hide', чтобы применить доступный стиль CSS.

$(window).load(function () { 
    if(!($('.wpcf7').length)){ 
      $('.grecaptcha-badge').addClass( 'hide' );
       }
});

Моя плитка все еще будет мигать на каждой странице в течение полсекунды, но это лучший обходной путь, который я нашел до сих пор, который, я надеюсь, будет соответствовать. Предложения по улучшению приветствуются.

Мэтью Доуэлл
источник
2

это не отключает проверку спама

div.g-recaptcha > div.grecaptcha-badge {
    width:0 !important;
}
Mqtthieu
источник
2

Если вы используете обновление Контактной формы 7 и последнюю версию (версия 5.1.x), вам нужно будет установить, настроить Google reCAPTCHA v3 для использования.

по умолчанию вы получаете логотип Google reCAPTCHA, отображаемый на каждой странице в правом нижнем углу экрана. Это, по нашей оценке, создает плохой опыт для пользователей. И ваш сайт, блог немного замедлится (в зависимости от оценки PageSpeed), так как ваш сайт должен будет загрузить 1 дополнительную библиотеку JavaScript из Google, чтобы отобразить этот значок.

Вы можете скрыть Google reCAPTCHA v3 от CF7 (показывать его только при необходимости), выполнив следующие действия:

Сначала вы открываете functions.phpфайл своей темы (используя File Manager или FTP Client). Этот файл находится в: /wp-content/themes/your-theme/и добавьте следующий фрагмент (мы используем этот код для удаления поля reCAPTCHA на каждой странице):

    remove_action( 'wp_enqueue_scripts', 'wpcf7_recaptcha_enqueue_scripts' );

Затем вы добавите этот фрагмент на страницу, на которой вы хотите, чтобы он отображал Google reCAPTCHA (страница контактов, логин, страница регистрации…):

if ( function_exists( 'wpcf7_enqueue_scripts' ) ) {
    add_action( 'wp_enqueue_scripts', 'wpcf7_recaptcha_enqueue_scripts', 10, 0 );
}

См. Блог OIW - Как удалить логотип Google reCAPTCHA из контактной формы 7 в WordPress (Скрыть значок reCAPTCHA)

OIW
источник
2

Да, вы можете сделать это . Вы можете использовать css или javascript, чтобы скрыть значок reCaptcha v3.

  1. Путь CSS используют display: noneили, visibility: hiddenчтобы скрыть пакет reCaptcha. Это легко и быстро.
.grecaptcha-badge {
    display:none !important;
}
  1. Путь Javascript
var el = document.querySelector('.grecaptcha-badge');
el.style.display = 'none';

Сокрытие значка является действительным, в соответствии с политикой Google и ответили в FAQ здесь . Рекомендуется показать политику конфиденциальности и условия использования от Google, как показано ниже.

политика и условия использования Google

Киран Мания
источник
1
«не querySelect», а «querySelector».
Кейсуке Нагакава
1
@ 永川 圭介 спасибо, что вернулись к опечатке.
Киран Мания
1

Я видел следующий комментарий об этом

Также полезно разместить значок в строке, если вы хотите применить к нему свой собственный CSS. Но помните, что вы согласились показать Условия использования Google при регистрации на ключ API - поэтому не скрывайте это, пожалуйста. И хотя с помощью CSS можно сделать так, чтобы значок полностью исчез, мы бы не рекомендовали это делать.

Евгений Коньков
источник
0

Примечание: если вы решите скрыть значок, используйте
.grecaptcha-badge { visibility: hidden; }

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

Этот сайт защищен reCAPTCHA и Google
<a href="https://policies.google.com/privacy">Privacy Policy</a> and <a href="https://policies.google.com/terms">Terms of Service</a> apply.

подробнее здесь reCaptacha

Мохсин Саид
источник
-1

Форма обратной связи Recaptcha 7 и решение Recaptcha v3.

body:not(.page-id-20) .grecaptcha-badge {
    display: none;
}

Больше чем одна страница контактной формы?

body:not(.page-id-12):not(.page-id-43) .grecaptcha-badge {
    display: none;
}

Вы можете добавить больше «неимущих», если у вас есть больше страниц контактной формы.

body:not(.page-id-45):not(.page-id-78):not(.page-id-98) .grecaptcha-badge {
    display: none;
}

Убедитесь, что ваш раздел тела будет выглядеть так:

<body>

Измените это так, чтобы это выглядело так:

 <body <?php body_class(); ?>>
Биджая Кумар Оли
источник
Пожалуйста, другие ответы, не отображать ни один отключает проверку спама.
Еленеш
@ Helenesh, что такое проверка на спам и как это связано с добавлением стиля CSS?
Беркант Ипек