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

enter image description here

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

James Law

Ответов: 15

Ответы (15)

Установите для атрибута data-badge значение inline

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

.grecaptcha-badge {
    display: none;
}
• 100001 100002 *

Collapsible

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

.badge-container {
  дисплей: гибкий;
  justify-content: гибкий конец;
  переполнение: скрыто;
  ширина: 70 пикселей;
  высота: 60 ​​пикселей;
  маржа: 0 авто;
  тень коробки: 0 0 4px #ddd;
  переход: линейная ширина 100 мс;
}
.badge-container: hover {
    ширина: 256 пикселей;
}

Думаю, это все, что вы можете на законных основаниях протолкнуть.

Все подходы протестировал и:

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

видимость: скрытая и непрозрачность: 0 НЕ отключают проверку на спам.

Используемый код:

.grecaptcha-badge { 
    visibility: hidden;
}

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

This site is protected by reCAPTCHA and the Google 
    Privacy Policy and
    Terms of Service apply.

Example result

Если вы используете обновление Contact Form 7 и последнюю версию (версия 5.1.x), вам необходимо установить, настроить Google reCAPTCHA v3 для использования.

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

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

Сначала вы открываете файл functions.php вашей темы (используя диспетчер файлов или FTP-клиент). Этот файл находится в: / 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)

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

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

Во-первых, я добавил правило целевого стиля в 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' );
       }
});

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

Контактная форма 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;
}

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

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

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


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

 >

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

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

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

google policy and terms of use

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

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

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

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


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

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

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

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

Для Google reCaptcha v3 FAQ говорит:

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

Этот сайт защищен reCAPTCHA и Google
     Политика конфиденциальности  и
    Применяются  Условия использования .

Например:

Example showing the message

Примечание: если вы решили скрыть значок, используйте

.grecaptcha-badge {видимость: скрытая; }

Непонятно, применимо ли это к reCaptcha v2. Я предлагаю перейти на версию 3, так как это удобнее для ваших посетителей.

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

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

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

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

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

Этот сайт защищен reCAPTCHA и Google
Политика конфиденциальности и Применяются Условия использования .

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

• 100001

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

. ..
себя.

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 для работы с конкретными формами.

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

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

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

Этот сайт защищен reCAPTCHA и Google
     Политика конфиденциальности  и
    Применяются  Условия использования .

Например:

enter image description here

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

.grecaptcha-badge {
    видимость: скрыта;
}

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

2022 WebDevInsider