sábado, 24 de dezembro de 2011

Formulário de Contato com Captcha

Acredito que todos já tivemos problemas com spams sendo enviados através do formulário de contato em nosso site.
Bom, aqui vai tutorial para ajudar a reduzir esse tipo de problema. Bom, chega de enrolação e vamos aos passos.

  1. Crie a seguinte estrutura:
  • seusite
    • fontes
    • captcha.php
    • contato.php
    Na pasta fontes, copie o arquivo de fonte que você irá utilizar, no meu caso, arial.ttf
  1. Digite o seguinte código no arquivo captcha.php:
"captcha.php"
View source
<?php
 
 session_start();
 
 
 
 $string = '';
 
 
 
 for ($i = 0; $i < 5; $i++) {
 
 $string .= chr(rand(97, 122));
 
 }
 
 
 
 $_SESSION['cod_rand'] = $string;
 
 
 
 $dir = 'fontes/';
 
 
 
 $imagem = imagecreatetruecolor(170, 60);
 
 $preto = imagecolorallocate($image, 0, 0, 0);
 
 $cor = imagecolorallocate($image, 0, 255, 0); // verde
 
 $branco = imagecolorallocate($image, 255, 255, 255);
 
 
 
 imagefilledrectangle($image,0,0,399,99,$branco);
 
 imagettftext ($image, 30, 0, 10, 40, $cor, $dir."arial.ttf", $_SESSION['cod_rand']);
 
 
 
 header("Content-type: image/png");
 
 imagepng($imagem);
 
 ?>

Agora vamos entender o código acima. Primeiro eu iniciei uma sessão, criei uma variavel vazia e através da funçãofor gerei 5 caracteres para colocar na variavel e criei uma variavel de sessão contendo esses 5 caracteres. Veja abaixo:

View source
session_start(); // inicia a sessao
 
 
 
 $string = ''; // variavel vazia
 
 
 
 for ($i = 0; $i < 5; $i++) { //enquanto a variavel $i for menor que 5, $i+1
 
 $string .= chr(rand(97, 122)); //caracteres que sao colocados na variavel string de forma aleatoria, atraves do codigo ascii (97 a 122, letras minusculas)
 
 }
 
 
 
 $_SESSION['cod_rand'] = $string; //criei uma variavel de sessao chamada cod_rand que terá o valor da variavel $string

Na segunda parte do código, define em qual pasta está armazenada a fonte e gerei a imagem. Veja abaixo:

View source
$dir = 'fontes/'; // diretorio onde está a fonte a ser utilizada
 
 
 
 $imagem = imagecreatetruecolor(170, 60); //cria uma imagem com o tamanho de 170 x 60 (L x A)
 
 $preto = imagecolorallocate($imagem, 0, 0, 0);
 
 $cor = imagecolorallocate($imagem, 0, 255, 0); // verde
 
 $branco = imagecolorallocate($imagem, 255, 255, 255);
 
 
 
 imagefilledrectangle($imagem,0,0,200,100,$branco); //preencho o fundo do retagulo (imagem) de branco
 
 imagettftext ($imagem, 30, 0, 10, 40, $cor, $dir."arial.ttf", $_SESSION['cod_rand']); // gero o texto da imagem na cor verde com a fonte arial.
 
 
 
 header("Content-type: image/png");
 
 imagepng($imagem); //gero a imagem em png

Por usar comandos pouco utilizados, muitos acham que é dificil, mas na verdade nao é. Como podem ver, é um código até simples. Mas o código acima apenas gera a imagem e mais nada. Precisamos do formulário de contato, colocar o captcha gerado nele e fazer a validação. Vamos lá. Abra o arquivo contato.php e digite o seguinte código:

View source
  1. session_start();
  2. if(isset($_POST['submit'])) { // se o formulário já tiver sido enviado
  3. if(!empty($_POST['nome']) && !empty($_POST['email']) && !empty($_POST['mensagem']) && !empty($_POST['captcha'])) { //se os campos não estiverem vazios
  4. if($_POST['captcha'] == $_SESSION['cod_rand']) { // se o digitado no campo captcha for igual a variavel de sessao cod_rand
  5. $aceito = "Obrigado por entrar em contato.";
  6. $nome = $_POST['nome'];
  7. $email = $_POST['email'];
  8. mail("destino@seusite.com.br","Assunto",$_POST['mensagem'],"From: $nome<$email>");
  9. } else { // caso o digitado no campo captcha seja diferente da variavel de sessao cod_rand
  10. $erro = "O código de verificação está incorreto.";
  11. }
  12. } else { // caso algum campo não esteja preenchido
  13. mail("destino@seusite.com.br","Assunto",$_POST['mensagem'],"From: $nome<$email>");
  14. $erro = "Preencha todos os campos do formulário.";
  15. }
  16. }
  17. ?>
  18. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  19. <html xmlns="http://www.w3.org/1999/xhtml">
  20. <head>
  21. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  22. <title>Contato</title>
  23. <style type="text/css">
  24. form {
  25. margin:0;
  26. padding:0;
  27. }
  28. input {
  29. padding:2px;
  30. width:200px;
  31. }
  32. textarea {
  33. padding:2px;
  34. width:200px;
  35. height:100px;
  36. }
  37. .button {
  38. width:60px;
  39. }
  40. p {
  41. margin:0 0 5px 0;
  42. padding:0;
  43. }
  44. .error {
  45. color:#FF0000;
  46. margin:0 0 10px 0;
  47. }
  48. .accept {
  49. color:#339966;
  50. margin:0 0 10px 0;
  51. }
  52. </style>
  53. </head>
  54. <body>
  55. <?php if(!empty($erro)) echo '<div class="error">'.$erro.'</div>'; ?>
  56. <?php if(!empty($aceito)) echo '<div class="accept">'.$aceito.'</div>'; ?>
  57. <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" enctype="multipart/form-data">
  58. <p><input type="text" name="nome" /> Nome</p>
  59. <p><input type="text" name="email" /> Email</p>
  60. <p><textarea name="mensagem"></textarea></p>
  61. <img src="/captcha.php"/>
  62. <p><input type="text" name="captcha" /> Digite o código ao lado</p>
  63. <p><input type="submit" name="submit" value="Enviar" class="button" /></p>
  64. </form>
  65. </body>
  66. </html>

Embora o formulário não envie nada por email, basta implementar essa função e o formulário estará pronto para uso. Tutorial sobre envio de email:  aqui e aqui.

Nenhum comentário:

Postar um comentário