Neste novo tutorial, discutiremos uma abordagem direta para reduzir o spam de envios de formulários. Esta técnica usará PHP e JavaScript para bloquear o envio de formulários até que o usuário forneça a resposta correta para uma simples matemática CAPTCHA.
Aqui está um vídeo rápido que demonstra a funcionalidade esperada:
É importante notar que este é apenas um método simples e rápido que adiciona uma camada extra de proteção e não deve substituir outras soluções mais elegantes como reCAPTCHA sempre que aplicáveis. Se você estiver familiarizado com o plugin WordPress Contact Form 7 (CF7), você já deve conhecer sua quiz tag que fornece funcionalidade semelhante.
O que é CAPTCHA?
CAPTCHA significa Turing público completamente automatizado teste para dizer Computadores e Seres Humanos. Você os conhecerá na forma de imagens ou áudio distorcidos, questionários para encontrar objetos em fotos ou (no caso do reCaptcha do Google) uma caixa de seleção para provar que você não é um robô.
Claro, eles podem ser irritantes, mas são um mal necessário na luta contra o spam. Criaremos nosso próprio CAPTCHA pedindo aos usuários que respondam a um simples teste de matemática.
Construir o formulário
Para os propósitos desta demonstração, precisaremos de um formulário. Vamos criar um formulário Bootstrap 5 aproveitando seu sistema de grade e algumas classes utilitárias. Não se preocupe se você preferir não usar o Bootstrap; o objetivo principal deste tutorial não é mostrar como criar um formulário, mas demonstrar como você pode protegê-lo independentemente de como você o cria.
Segue nosso formulário:
Até agora, parece bom visualmente, mas não contém nenhum método de proteção para e-mails de spam. Um bot pode facilmente preencher seus campos e nos enviar informações indesejadas.
Adicione o CAPTCHA matemático
Para evitar isso o máximo possível, criaremos um CAPTCHA matemático simples. Para construir o CAPTCHA, podemos usar qualquer tipo de linguagem do lado do servidor ou mesmo JavaScript do lado do cliente. No nosso caso, vamos com PHP.
O processamento dos dados do formulário após o envio está além do escopo deste tutorial
Aqui estão os passos que seguiremos:
1. Configure o documento PHP
Em um novo documento PHP, vamos gerar dois números aleatórios entre 0 e 300 graças ao PHP’s rand() função. No carregamento da página, esses números quase certamente mudarão.
Abaixo disso, podemos adicionar a estrutura da página e a marcação HTML do nosso formulário exatamente como o criamos antes.
2. Criar nova entrada de formulário
Vamos agora criar uma nova entrada de texto onde o usuário deverá preencher a soma desses dois números.
3. Atualize o botão Enviar
Por padrão, o botão enviar será desabilitado usando o disabled atributo.
Também passaremos o resultado esperado de $num1 + $num2 para o data-res atributo do botão enviar. Para melhor segurança, também podemos passar o número de destino dentro de um padrão para dificultar a adivinhação de um bot.
4. Verifique a resposta usando JavaScript
Cada vez que o usuário definir o valor do campo do questionário, usaremos JavaScript para avaliar sua resposta em comparação com a esperada. Se ambos corresponderem, removeremos o disabled atributo do botão enviar, caso contrário o botão permanecerá desabilitado.
const submitButton = document.querySelector('[type="submit"]');
const quizInput = document.querySelector(".quiz-control");
quizInput.addEventListener("input", function(e) {
const res = submitButton.getAttribute("data-res");
if ( this.value == res ) {
submitButton.removeAttribute("disabled");
} else {
submitButton.setAttribute("disabled", "");
}
});
5. Formulário Concluído
Veja como nosso formulário ficará após essas modificações:
Você pode baixar o código completo deste repositório do GitHub. Há apenas um único arquivo PHP. Para abrir o projeto, use um servidor local como XAMPP ou Laragon.
PHP
Como executar um arquivo PHP
Sajal Soni
Conclusão
Espero que você tenha gostado deste pequeno exercício em que passamos por uma abordagem rápida para tornar nossos formulários menos spam.
Novamente, em geral, para obter melhores resultados, é recomendável usar abordagens mais eficazes, como reCAPTCHA. No entanto, nos casos em que isso não for possível por qualquer motivo, você pode tentar a solução que discutimos aqui. Você pode até torná-lo mais elegante usando outros tipos de CAPTCHAs e questionários. Por exemplo, você pode ter uma matriz de 10 perguntas junto com as respostas esperadas. Em seguida, apresente no front-end aleatoriamente uma dessas perguntas e lide com a resposta do usuário da mesma forma que fizemos com o teste de matemática.
Vale a pena notar que, se você é um amante do Bootstrap e deseja fornecer aos usuários validação de formulário personalizado em vez do navegador padrão, você tem sorte! Bootstrap oferece tal implementação. Sinta-se à vontade para estender este exemplo como desejar!
Por último, mas não menos importante, se você quiser saber como reduzir as mensagens de spam que são enviadas por meio de links de e-mail, dê uma olhada em outro tutorial onde discutimos duas técnicas eficazes.
Como sempre, muito obrigado por ler!
PHP
Exemplo de como adicionar o Google reCAPTCHA v3 a um formulário PHP
Sajal Soni
HTML
2 maneiras de proteger seus links de e-mail HTML (e evitar SPAM)
George Martsoukos
Originally posted 2022-05-27 07:02:38.
