Como ocultar o selo do Google Invisible reCAPTCHA

157

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.

insira a descrição da imagem aqui

Eu gostaria de esconder isso.

James Law
fonte

Respostas:

217

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:

insira a descrição da imagem aqui

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

.grecaptcha-badge { 
    visibility: hidden;
}

insira a descrição da imagem aquiNão use display: none;o que parece desabilitar a verificação de spam (obrigado @Zade)

Yann39
fonte
24
Não pretendo dizer o que fazer;) Estou apenas avisando outros usuários que pode ser ilegal removê-lo.
Yann39
16
isso é completamente inaceitável, porque em telas pequenas como celulares, esse emblema cobre uma área significativa da página da web.
Don Dilanga #
12
Aceite-o ou escolha um serviço diferente. O Google tem todo o direito de exigir que você mostre a marca pelo serviço gratuito . Você pode até reposicionar o selo para estar alinhado com o formulário developers.google.com/recaptcha/docs/invisible#render_param .
Alexander Otavka
1
Bem, eu só uso esse captcha v3 na página do formulário de contatos. Portanto, esta é a única página que eu quero que este emblema mostre. Não se aplica a outros lugares do meu site. Possível?
Andrew Truckle
4
@ Yann39 - atualize sua resposta. Não há problema em ocultá-lo e, por exemplo, adicioná-lo apenas à página de contato: developers.google.com/recaptcha/docs/faq
Sol
172

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>

Resultado de exemplo

Helenesh
fonte
6
Essa resposta precisa ser mais alta! Ele contém todas as informações necessárias para a solução de maneira sucinta.
Björn Larsson
3
Exatamente o que eu estava procurando e isso funciona muito bem. Também para quem procura provas de que é permitido, verifique esta página (se você ainda não a viu em todo este tópico do SO) developers.google.com/recaptcha/docs/faq
Jake
Obrigado por mencionar este @Jake. Eu adicionei isso à minha resposta.
Helenesh 13/01/19
Alguém encontrou uma maneira documentada de ocultar o crachá em vez de um hack css? O Google oferece uma maneira alternativa de mostrar sua marca, mas não consigo encontrar um método suportado de ocultar seu selo.
Collin Price
38

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;
}
James Law
fonte
7
Seja cuidadoso; isso parece desativar a verificação de spam.
Zade
3
Isso realmente desabilita a verificação de spam? Se sim, por que todos os votos positivos?
30718 Charlie Schliesser
1
@ Zade talvez use opacity: 0ou visibility: hidden? Você também tem um link para onde está isso?
Ctf0
4
O contrato do usuário diz que você deve informar os usuários como @ Yann39 diz acima.
Mihail Minkov
1
@Helenesh vale uma resposta separada?
Anupam
14

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

serralheiro
fonte
2
Aplicável apenas à v3! A v2 ainda exige mostrar o emblema. :(
ADTC
13

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:

Captcha "invisível" dobrável

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.

krukid
fonte
1
Agradável. Eu empurrei-lo ainda mais (sem realmente escondendo-a completamente) usando transform: scale(0.6)eopacity: 0.6
squarecandy
Você consegue abrir a faixa azul para a direita e para a esquerda? Também adaptar o esquema de cores dele?
Vaishal Patel #
@VaishalPatel, em teoria, sim, mas há dois contras: primeiro, adulterar o design de crachá nativo é desencorajado pelo Google e, em segundo lugar, quanto mais suposições sobre o design existente você fizer em suas alterações, mais frágil será sua solução - lembre-se do Google pode alterar os estilos e o layout dos emblemas sempre que lhes apetecer.
krukid
1
@krukid Fui com o estilo padrão deles em linha.
Vaishal Patel
9

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.

Leon
fonte
isso funcionará, mas o ID da página é específico do seu site. Portanto, qualquer pessoa que use isso precisará ajustar o ID para caber na página em que deseja exibir a exibição. || Eu tenho visto relatórios dizendo que fazer esta exibição: nenhum; também desativará a verificação, mas não tenho certeza sobre isso no momento.
Michael Tunnell
Cuidado! Isso desativa a verificação de spam. Verifique minha resposta para mais informações
Helenesh
Atualizado com base nos comentários acima de Michael & Helenesh
Leon
4

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>
Nigel Dyer
fonte
3

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.

Andy P
fonte
3

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.

Matthew Dowell
fonte
2

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

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

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)

OIW
fonte
2

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

política e termos de uso do google

Kiran Maniya
fonte
1
'not querySelect' mas 'querySelector'.
Keisuke Nagakawa
1
@ 永川 圭介 obrigado por voltar a digitar.
Kiran Maniya
1

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.

Eugen Konkov
fonte
0

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

Mohsin Saeed
fonte
-1

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(); ?>>
Bijaya Kumar Oli
fonte
Por favor, as outras respostas, display none desativa a verificação de spam.
Helenesh
@ Helenesh O que é a verificação de spam e como ela está relacionada à adição de um estilo CSS?
Berkant Ipek