Como ocultar o selo do Google Invisible reCAPTCHA

Ao implementar o novo reCATPTCHA invisível do Google, por padrão, você recebe um pequeno emblema "protegido por reCAPTCHA" no canto inferior direito da tela que aparece quando você passa o mouse sobre ele.

Eu gostaria de esconder isso.

O Google agora permite ocultar o selo, nas Perguntas frequentes :

Gostaria de ocultar o emblema reCAPTCHA v3. O que é permitido?

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.

Por exemplo:

Então você pode simplesmente ocultá-lo usando o seguinte CSS:

.grecaptcha-badge { 
    visibility: hidden;
}

Não use display: none;o que parece desabilitar a verificação de spam (obrigado @Zade)

Eu testei todas as abordagens e:

AVISO: display: none DESATIVA a verificação de spam!

visibility: hiddene opacity: 0NÃO desative a verificação de spam.

Código a usar:

.grecaptcha-badge { 
    visibility: hidden;
}

Quando você oculta o ícone do emblema, o Google deseja que você faça referência ao serviço deles no seu formulário adicionando:

<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>

Defina o data-badgeatributo comoinline

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

E adicione o seguinte CSS

.grecaptcha-badge {
    display: none;
}

O Google agora diz "Você tem permissão para ocultar o emblema desde que inclua a marca reCAPTCHA visivelmente no fluxo do usuário". Ligação

Como ocultar o emblema não é realmente legítimo, de acordo com o TOU, e as opções de veiculação existentes estavam quebrando minha interface do usuário e / ou UX, criei a seguinte personalização que imita o posicionamento fixo, mas é renderizada em linha:

Você só precisa aplicar CSS no seu contêiner de emblema:

.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;
}

Eu acho que é o máximo que você pode fazer legalmente.

Decidi ocultar o crachá em todas as páginas, exceto na minha página de contato (usando o 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;
}

Como não sou desenvolvedor da Web, corrija-me se houver algo errado.

EDIT: Atualizado para usar a visibilidade em vez da exibição.

Uma ligeira variante da postagem de Matthew Dowell, que evita o flash curto, mas é exibida sempre que o formulário de contato 7 é visível:

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

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

Em seguida, adicionei o seguinte ao header.php no meu tema filho:

<script>
jQuery( window ).load(function () { 
    if( jQuery( '.wpcf7' ).length ){ 
        jQuery( '.grecaptcha-badge' ).addClass( 'show' );
    }
});
</script>

Minha solução foi ocultar o crachá e exibi-lo quando o usuário se concentrar em uma entrada de formulário - ainda assim aderindo aos Termos e Condições do Google.

Nota: O reCAPTCHA que eu estava aprimorando foi gerado por um plugin do WordPress, portanto, você pode precisar envolver o reCAPTCHA com <div class="inv-recaptcha-holder"> ... </div>você mesmo.

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' );
  });
});

Obviamente, você pode alterar o seletor jQuery para direcionar formulários específicos, se necessário.

Para os usuários do Formulário de contato 7 no Wordpress, este método está funcionando para mim: eu oculto o v3 Recaptcha em todas as páginas, exceto naquelas com o Formulário de contato 7.

Mas esse método deve funcionar em qualquer site em que você esteja usando um seletor de classe exclusivo que possa identificar todas as páginas com elementos de formulário de entrada de texto.

Primeiro, adicionei uma regra de estilo de destino no CSS que pode recolher o bloco:

CSS

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

Em seguida, adicionei o script JQuery no meu cabeçalho para acionar após o carregamento da janela, para que o seletor de classe 'grecaptcha-badge' esteja disponível para o JQuery e possa adicionar a classe 'hide' para aplicar o estilo CSS disponível.

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

Meu bloco ainda piscará em todas as páginas por meio segundo, mas é a melhor solução alternativa que encontrei até agora e espero que cumpra. Sugestões de melhoria apreciadas.

isso não desativa a verificação de spam

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

Se você estiver usando a atualização do Formulário de contato 7 e a versão mais recente (versão 5.1.x), será necessário instalar, configurar o Google reCAPTCHA v3 para usar.

por padrão, você exibe o logotipo do Google reCAPTCHA em todas as páginas no canto inferior direito da tela. Isso de acordo com nossa avaliação está criando uma experiência ruim para os usuários. E o seu site, o blog diminuirá um pouco (refletido pelo PageSpeed ​​Score), pois seu site precisará carregar 1 biblioteca JavaScript adicional do Google para exibir esse selo.

Você pode ocultar o Google reCAPTCHA v3 do CF7 (somente mostrá-lo quando necessário) seguindo estas etapas:

Primeiro, você abre o functions.phparquivo do seu tema (usando o Gerenciador de Arquivos ou o Cliente FTP). Este arquivo está localizado em: /wp-content/themes/your-theme/e adicione o seguinte snippet (estamos usando esse código para remover a caixa reCAPTCHA em todas as páginas):

    remove_action( 'wp_enqueue_scripts', 'wpcf7_recaptcha_enqueue_scripts' );

Em seguida, você adicionará esse snippet na página que deseja exibir no Google reCAPTCHA (página de contato, login, página de registro ...):

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

Consulte o Blog do OIW - Como remover o logotipo do Google reCAPTCHA do formulário de contato 7 no WordPress (Ocultar o emblema de reCAPTCHA)

Sim, você consegue . você pode usar css ou javascript para ocultar o selo reCaptcha v3.

1. O CSS Way usa display: noneou visibility: hiddenpara ocultar o lote reCaptcha. É fácil e rápido.

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

2. A maneira do Javascript

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

Ocultar o emblema é válido, de acordo com a política do Google e é respondido nas perguntas frequentes aqui . Recomenda-se exibir a política de privacidade e os termos de uso do google, como mostrado abaixo.

Eu vi o próximo comentário sobre isso

Também é útil colocar o emblema em linha se você deseja aplicar seu próprio CSS a ele. Mas lembre-se de que concordou em mostrar os Termos e condições do Google quando se registrou para uma chave de API. Portanto, não a oculte. E embora seja possível fazer o emblema desaparecer completamente com CSS, não o recomendamos.

Nota: se você optar por ocultar o crachá, use
.grecaptcha-badge { visibility: hidden; }

Você tem permissão para ocultar o emblema desde que inclua a marca reCAPTCHA visivelmente no fluxo do usuário. Por favor inclua o seguinte texto:

Este site é protegido pelo reCAPTCHA e pelo Google
<a href="https://policies.google.com/privacy">Privacy Policy</a> and <a href="https://policies.google.com/terms">Terms of Service</a> apply.

mais detalhes aqui reCaptacha

Recaptcha formulário de contato 7 e solução Recaptcha v3.

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

Mais de uma página de formulário de contato?

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

Você pode adicionar mais "nots" se tiver mais páginas de formulário de contato.

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

Certifique-se de que a seção do seu corpo fique assim:

<body>

Altere-o para que fique assim:

 <body <?php body_class(); ?>>