Як приховати значок невидимого reCAPTCHA Google

Впроваджуючи новий невидимий Google 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;
}

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

EDIT: Оновлено, щоб використовувати видимість замість відображення.

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

Моє рішення полягало в тому, щоб приховати значок, а потім відобразити його, коли користувач зосередиться на введенні форми - таким чином, все одно дотримуючись T & C 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 Recaptcha на всіх сторінках, окрім тих, що мають форми 7 Contact Contact.

Але цей метод повинен працювати на будь-якому сайті, де ви використовуєте унікальний селектор класів, який може ідентифікувати всі сторінки з елементами форми введення тексту.

По-перше, я додав у CSS правило цільового стилю, яке може згортати плитку:

CSS

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

Тоді я додав сценарій JQuery у свій заголовок, щоб запуститись після завантаження вікна, щоб селектор класів 'grecaptcha-badge' був доступний JQuery, і можна додати клас 'сховати', щоб застосувати наявний стиль 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 для використання.

за замовчуванням ви отримуєте логотип reCAPTCHA Google, який відображається на кожній сторінці в нижній правій частині екрана. Це, за нашою оцінкою, створює поганий досвід для користувачів. І ваш веб-сайт, блог трохи сповільниться (відображається результатом PageSpeed ​​Score), для вашого веб-сайту доведеться завантажити додаткову 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 Way використовує 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

Контактна форма 7 Recaptcha та рішення 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(); ?>>