Como usar reCaptcha no formulário HTML

Depois de ver como é fácil configurar e instalar o reCaptcha no WordPress (link aqui) , vamos a um passo adiante, que é configurar o reCaptcha no seu formulário HTML. Pode ser feito com PHP ou ASP, depende da programação. Mas é necessário aqui usar uma das duas linguagens de back-end.

Como exemplo, vamos usar um formulário bem simples, como abaixo:

Entre as tags <head> e </head>, vamos acrescentar a função JS do reCaptcha e o script que faz a chamada ao submeter o formulário:

 <script src="https://www.google.com/recaptcha/api.js"></script>
 <script>
   function onSubmit(token) {
     document.getElementById("form1").submit();
   }
 </script>

E vamos modificar o botão, acrescentando a primeira CHAVE do reCaptcha, chamada SITEKEY:

<button class="g-recaptcha" 
        data-sitekey="6Le9kHcdAAAAALC1bQh4YE7UXkSmLljhnLC8GG8X" 
        data-callback='onSubmit' 
        data-action='submit'>OK</button>

Não precisa se preocupar em “esconder” essa chave, ela não pode ser usada em outro domínio, somente naquele que foi criado para usá-la. Portanto, se você usar mais de um domínio, ou domínios canônicos, será preciso cadastrar mais chaves.

Depois de acrescentar esse botão, vamos ver como a página ficou:

Depois de incluir o código, a página passa a mostrar esse selo de “protegido por reCAPTCHA

Agora vamos preparar a página de retorno. Veja o exemplo que fiz em PHP, na página resposta.php:

<?php
  if(isset($_POST['g-recaptcha-response'])){
          $captcha=$_POST['g-recaptcha-response'];
        }
  $secretKey = "XXXXXXXXXXXXXXXXXXXXXXXXXX";
		
  if ($captcha) {
        $ip = $_SERVER['REMOTE_ADDR'];
        $url =  'https://www.google.com/recaptcha/api/siteverify?secret=' . ($secretKey) . '&response=' . ($captcha) . '&remoteip=' . urlencode($ip);
        $response = file_get_contents($url);
        $responseData = json_decode($response);
        if($responseData-> success):
             print_r("Form OK!"); exit;
        else:
             print_r("Chave Inválida"); exit;
        endif;
    } else {
        print_r("reCaptcha não funcionou"); exit;
    }

  
?>

Basicamente o código faz o seguinte: verifica se a resposta do reCaptcha foi positiva, submete a resposta junto com a chave secreta para nova verificação. O reCaptcha retorna com uma resposta JSON e novamente ela é interpretada para o segundo teste, inclusive retornando o “score”, que diz a probabilidade do usuário ser Robô ou Humano. Nesse exemplo, caso tenha retornado Sucesso, basta aplicar o que deve ser feito no form, seja enviar e-mail ou gravar os dados do contato.

O JSON ficou assim:

{
  "success": true,
  "challenge_ts": "2021-12-08T14:26:05Z",
  "hostname": "www.animecomics.com.br",
  "score": 0.9,
  "action": "submit"
}

Adicionalmente, a página do reCaptcha mostra quantos SPAMs foram filtrados. Veja o relatório que recebemos em um formulário de contato:

Veja que o relatório é bem completo, dizendo até mesmo o score médio dos usuários, e a filtragem por dia / semana / mês.

Bom, é isso, vamos todos contribuir para acabar com o SPAM!

A vantagem de utilizar URL Amigável

O que é URL Amigável?

A URL amigável é aquela que mostra exatamente o assunto da página. Por exemplo a URL dos posts do Blog Nishiweb:

Uma URL Amigável pode ser organizada de modo ainda melhor, mostrando categorias. Imagine no caso de uma marca de sapatos, pode ser organizado dessa forma: http://lojadesapato.com/masculino/couro/marca/modelo

Ou no nosso caso, no site AnimeComics, ela é usada para mostrar o personagem e o grupo ao qual pertence:

http://animecomics.com.br/personagem/X-Men/Wolverine/

Quais as vantagens da URL Amigável?

A primeira vantagem é a facilidade de organizar as páginas dentro de seu site. Se usar uma estrutura de diretório, por exemplo, o programador consegue rapidamente entender a estrutura do site.

A segunda vantagem é o compartilhamento da informação. Ao transmitir a URL, é muito mais fácil compartilhar uma URL Amigável do que uma URL cheia de números, letras maiúsculas e caracteres especiais.

E se você ainda não ficou convencido até aqui, saiba que a terceira e principal vantagem é a Indexação do Google. Sites com URL amigáveis são melhores rankeadas no Google, que além de considerar a tag TITLE e META tags, ainda leva em conta a URL (talvez até acima dos demais elementos).

Como faço para ter uma URL Amigável em meu site?

Se o seu site é HTML puro, você precisa renomear cada arquivo e criar uma estrutura de diretórios a fim de deixar a URL com os nomes de arquivos correspondente ao assunto da página. Se for em ASP ou ASP.NET, da mesma forma, mesmo que utilize banco de dados, é possível deixar o assunto como parâmetro de URL.

Já se o seu site é escrito em PHP, é preciso o conhecimento um pouco mais avançado para criar uma estrutura usando .htaccess e arquivos de inclusão. Mas o resultado é bem mais satisfatório do que nas linguagem citadas acima, pois elimina o “.htm” ou “.php” do final do arquivo.

Mas se você usa o WordPress, assim como esse blog, esse processo é bem simples! Vou explicar aqui como fazer, e com um “macete”, acho que é uma falha do WordPress. Primeiro, no seu Painel de Controle, entre no menu Configurações > Link Permanentes

Configurações –> Links Permanentes (Permalink)

Selecione Estrutura personalizada e escreva exatamente no exemplo acima: /index.php/%postname%/ Essa dica é essencial para funcionar, pois sem o index.php, acontece algum bug que o WordPress ainda não resolveu. Salve as alterações e vá para seu site testar!

Customização do WordPress

Vamos à segunda parte da nossa demonstração de site WordPress, que é a Customização. Na primeira parte, já havíamos escolhido um tema, o Radiate. Foi escolhido por ser simples, clean, e atendia aos requisitos.

Este é o Blog atualmente. Se vocês estão acompanhando, perceberam que não mudei praticamente nada, apenas incluí um artigo sobre Certificado SSL. E também alterei o favicon que é o ícone que aparece na aba do navegador, mas isso não foi através do WordPress.

Hoje queremos mudar os itens visuais:
• Logotipo,
• Estilo do Menu
• Cores de fundo
• Imagem do Cabeçalho

Logotipo

Acabei de descobrir que o tema escolhido tem uma parte de customização que é paga. Porém pode ser feita de outra forma, através de programação. Pode ser um problema se você não é familiarizado com Temas de WP, pois a alteração requer algum conhecimento de HTML e da estrutura de WordPress.

No Painel de Controle, escolha Aparência > Editor de temas.

Aparecerá um menu de arquivos do Tema na direita. Escolha o Cabeçalho do tema (header.php). Este é um arquivo padrão para todos os temas, sempre existe um header.php

Localize no código a tag <header>. Esta tag é padrão de HTML, todos os sites mais recentes tem essa tag, serve para indicar onde será o cabeçalho do site que inclui Logotipo, Menu e às vezes um banner.

Neste tema, perceba que há uma div com a classe “site-branding”, que indica que o nome do site / logotipo é definido aqui.

Todo esse código dentro da div “site-branding” deve sumir

Vou substituir esse código PHP por uma tag simples:

<a href="/default.asp"><img src="/images/logo.png"></a>

Então é só salvar e ver como ficou:

Parte do logo ficou “invisível” pois a imagem foi projetada para fundo escuro. Então vamos resolver logo esse fundo.

Cores de Fundo e Estilo do Menu

As cores do site são fáceis de se mudar, em Aparência > Personalizar > Cores. Só que, mais uma vez, o tema escolhido não permite customizar tudo na versão free, então vamos ter que editar manualmente o CSS. Após salvar as cores básicas, vamos para Aparência > Editor de Temas e dessa vez vamos escolher o arquivo style.css

Aqui devemos procurar a classe que define a cor de fundo do menu. Uma dica: para achar a classe mais facilmente, utilize o Chrome, clique com o botão direito no menu e selecione “Inspecionar”. Vai abrir o debug daquele elemento, mostrando a classe. No nosso exemplo, a classe a ser alterada é a header-wrap. Voltando ao editor de temas, é só procurar essa classe e alterar a cor de fundo (background-color).

Aproveitando que estamos em estilos, também vamos alterar a cor da fonte do menu, pois como eu vou deixar o fundo preto, a fonte deve ser uma cor clara. Usando o mesmo método de inspecionar, encontrei a classe do botão “Home” e alterei. Depois de salvar, o resultado foi esse:

O Logotipo da Nishiweb ficou bom no contraste com o preto

Imagem do Cabeçalho

A imagem padrão do tema, essa bela foto de NYC, combinou com o nosso site. Porém como prometido, vamos trocar a imagem. Essa troca fica em Aparência > Personalizar > Mídia do cabeçalho.

O tema escolhido permite utilizar mais de uma imagem no cabeçalho, porém nos testes que fizemos não funcionou. Posteriormente vou mostrar como se inclui um banner rotativo no lugar de uma imagem fixa. É recomendado utilizar uma imagem de 1500 x 450 pixels (jpeg ou png), mas para efeitos de teste, usei uma imagem pequena que ficou estourada.

Por ora, o resultado é este:

Adicionalmente, troquei a imagem de fundo da página, para ficar com uma identidade parecida com o site da Nishiweb. Fica em Aparência > Imagem de fundo . Selecionei a opção “preencher toda a tela” para que cubra todo o fundo sem cortes.

Espero que tenha ajudado! Em breve mais customizações de WordPress