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

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

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

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)

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

ВНИМАНИЕ: 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>

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

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

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

.grecaptcha-badge {
    display: none;
}

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

Так как скрытие значка не является действительно законным в соответствии с 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;
}

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

Я решил скрыть значок на всех страницах, кроме моей страницы контактов (с помощью 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;
}

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

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

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

Мое решение состояло в том, чтобы скрыть значок, а затем отобразить его, когда пользователь сосредоточится на вводе формы - таким образом, все еще придерживаясь правил 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 для нацеливания на конкретные формы, если это необходимо.

Для пользователей контактной формы 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' );
       }
});

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

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

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

Если вы используете обновление Контактной формы 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)

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

1. Путь CSS используют display: noneили, visibility: hiddenчтобы скрыть пакет reCaptcha. Это легко и быстро.

.grecaptcha-badge {
    display:none !important;
}

2. Путь Javascript

var el = document.querySelector('.grecaptcha-badge');
el.style.display = 'none';

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

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

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

Примечание: если вы решите скрыть значок, используйте
.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

Форма обратной связи 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(); ?>>