Usar reCAPTCHA en formularios

Usar reCAPTCHA en formularios

Cuando colocas un formulario en tu pagina web, bien sea de contacto o de comentarios, uno de los temores mas grandes es el Spam, por suerte para nosotros existen herramientas llamadas “Captcha” que consisten en casillas de verificación de una palabra específica para poder enviar el formulario, con este tutorial te voy a enseñar a usar reCAPTCHA que a mi parecer es la mejor herramienta GRATIS de este tipo.

Paso 1

El paso 1 consiste en simplemente en registrarnos en la pagina del servicio, para eso haz clic AQUI

Completa todos los datos y haz clic en “Sing up“, una vez hagas clic ahí, vas a tener una ventana donde tienes que colocar el dominio de la pagina en la que vas a usar el Captcha, este dato es importante que sea el correcto ya que vas a tener un código que SOLO va a servir para ese dominio.

Para finalizar el registro, haces clic en Create Key.

Ahora vas a tener una página parecida a la siguiente:

captch1

*Por seguridad oculte algunos números y letras

Lo que ves ahí que dice “Public Key” y “Private Key” son claves necesarias para codificar nuestros formularios, es importante que las tengas a mano siempre que las necesites y que SEAN PRIVADAS.

Paso 2

Descarga la librería del captcha haciendo clic AQUI, guárdalo en tu PC, descomprímelo y copia el archivo “recaptchalib.php”, pégalo en la carpeta en la que está el archivo PHP que contiene el formulario.

Paso 3

El tercer paso seria obviamente la integración del captcha en tus formularios, para eso vamos a necesitar lo siguiente:

1- Un formulario

2- Un archivo que procese el formulario

3- La clave Privada

4- La clave Pública

Comenzamos integrando el captcha en el formulario. Yo lo voy a usar en un programa PHP que cree hace poco (En ese programa no se necesita evitar el spam, pero el funcionamiento es el mismo para todos los formularios).

Este es el código del formulario que cree para mi programa:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

<form id="form1" name="form1" method="post" action="operadora.php">
  <p>
    <input type="text" name="numeroa" />Numero 1
    <br />
    <input type="text" name="numerob" />Numero 2
    <br />
  Operacion a realizar:</p>
  <table width="200">
    <tr>
      <td><label>
        <input type="radio" name="operacion" value="suma" />
        Suma</label></td>
    </tr>
    <tr>
      <td><label>
        <input type="radio" name="operacion" value="resta" />
        Resta</label></td>
    </tr>
    <tr>
      <td><label>
        <input type="radio" name="operacion" value="multiplicacion" />
        Multiplicacion</label></td>
    </tr>
    <tr>
      <td><label>
        <input type="radio" name="operacion" value="division" />
        Division</label></td>
    </tr>
  </table>
  <br />
  <input type="submit" name="Submit" value="Enviar" />
</form>

*Nota que en este caso el archivo que procesa el formulario es “operadora.php”

Siempre se acostumbra a colocar los captchas antes del botón de enviar, entonces vamos a agregarlo ahí con el siguiente código:

1
2
3
4
5

  <?php 
  require_once('recaptchalib.php');
$publickey = "..."; // donde estan los puntos colocas la clave publica
echo recaptcha_get_html($publickey);
?>

Como dice en el comentario de la línea 3, donde están los 3 puntos vas a pegar la “Clave publica” que conseguiste en el paso 1.

Entonces, nuestro formulario quedaría así:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

<form id="form1" name="form1" method="post" action="operadora.php">
  <p>
    <input type="text" name="numeroa" />Numero 1
    <br />
    <input type="text" name="numerob" />Numero 2
    <br />
  Operacion a realizar:</p>
  <table width="200">
    <tr>
      <td><label>
        <input type="radio" name="operacion" value="suma" />
        Suma</label></td>
    </tr>
    <tr>
      <td><label>
        <input type="radio" name="operacion" value="resta" />
        Resta</label></td>
    </tr>
    <tr>
      <td><label>
        <input type="radio" name="operacion" value="multiplicacion" />
        Multiplicacion</label></td>
    </tr>
    <tr>
      <td><label>
        <input type="radio" name="operacion" value="division" />
        Division</label></td>
    </tr>
  </table>
  <br />
  <?php 
  require_once('recaptchalib.php');
$publickey = "..";
echo recaptcha_get_html($publickey);
?>
  <input type="submit" name="Submit" value="Enviar" />
</form>

Necesitamos ahora abrir el archivo que procesa el formulario (Para nuestro ejemplo es operadora.php).

El mío es el siguiente:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Tabla</title>
</head>
 
<body>
<?php 
echo "<h2>Los numeros que has seleccionado son los siguientes</h2><br />";
echo "<b>Numero A:</b> ".$_POST["numeroa"]."<br />";
echo "<b>Numero B:</b> ".$_POST["numerob"]."<br />";
echo "<b>La operacion que seleccionaste fue:</b> ".$_POST["operacion"]."<br />";
echo "Y el Resultado fue: ";
if ($_POST["operacion"] == suma){
	echo $_POST["numeroa"] + $_POST["numerob"];
	}
	elseif ($_POST["operacion"] == resta){
	echo $_POST["numeroa"] - $_POST["numerob"];
	}
	elseif ($_POST["operacion"] == multiplicacion){
	echo $_POST["numeroa"] * $_POST["numerob"];
	}
	else {
		if ($_POST["numerob"] == 0){
			echo "la division entre cero no esta permitida";
			}
			else {
			echo $_POST["numeroa"] / $_POST["numerob"];
			}
	}
?>
</body>
</html>

Necesitamos agregar el siguiente código justo después de la apertura de PHP (línea 10)

1
2
3
4
5
6
7
8
9
10
11
12
13

require_once('recaptchalib.php');
$privatekey = "..."; //aqui colocas la clave privada
        $resp = recaptcha_check_answer ($privatekey,
                                        $_SERVER["REMOTE_ADDR"],
                                        $_POST["recaptcha_challenge_field"],
                                        $_POST["recaptcha_response_field"]);
 
        if ($resp->is_valid) {
		CODIGO QUE PROCESA EL FORMULARIO
        } else {
                echo "Disculpa, el campo del captcha debe coincidir con la imagen";# coloca algun mensaje de error
                $error = $resp->error;
        }

Como vez en la línea 2 debes colocar la “Clave privada” que conseguimos en el paso 1 y en la línea 9 debes colocar el código que procesa el formulario. Nuestro archivo procesador de formulario quedaría de la siguiente manera:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Tabla</title>
</head>
 
<body>
<?php 
require_once('recaptchalib.php');
$privatekey = "...";
        $resp = recaptcha_check_answer ($privatekey,
                                        $_SERVER["REMOTE_ADDR"],
                                        $_POST["recaptcha_challenge_field"],
                                        $_POST["recaptcha_response_field"]);
 
        if ($resp->is_valid) {
echo "<h2>Los numeros que has seleccionado son los siguientes</h2><br />";
echo "<b>Numero A:</b> ".$_POST["numeroa"]."<br />";
echo "<b>Numero B:</b> ".$_POST["numerob"]."<br />";
echo "<b>La operacion que seleccionaste fue:</b> ".$_POST["operacion"]."<br />";
echo "Y el Resultado fue: ";
if ($_POST["operacion"] == suma){
	echo $_POST["numeroa"] + $_POST["numerob"];
	}
	elseif ($_POST["operacion"] == resta){
	echo $_POST["numeroa"] - $_POST["numerob"];
	}
	elseif ($_POST["operacion"] == multiplicacion){
	echo $_POST["numeroa"] * $_POST["numerob"];
	}
	else {
		if ($_POST["numerob"] == 0){
			echo "la division entre cero no esta permitida";
			}
			else {
			echo $_POST["numeroa"] / $_POST["numerob"];
			}
	}
        } else {
                echo "Disculpa, el campo del captcha debe coincidir con la imagen";# coloca algun mensaje de error
                $error = $resp->error;
        }
?>
</body>
</html>

Guarda los dos archivos y súbelos a tu servidor junto con el archivo recaptchalib.php y prueba que tu formulario se ejecuta correctamente.

Demo

Mijael es el creador y editor de skyandstars.net donde publica guias y tutoriales sobre WordPress, Cutenews, PHP, HTML y mucho más. Acutalmente estudiante universitario.

Mijael166

Quizas alguna de estas entradas te pueda interesar

6 Comentarios en "Usar reCAPTCHA en formularios"

  1. maisa

    6 Diciembre 2009

    Respuesta

    ahh que interesante tutorial, este catpcha es muy completo.
    Yo utilizo para las formas Amailzing y para el catpcha el mismo que puse en el tutorial de cutenews. Aca como se ve , http://origin-missing.net/beanaffie.php

    ahh y me encanto el formulario! :):)

  2. Mijael166

    6 Diciembre 2009

    Respuesta

    Sep este captcha es muy completo, Ya estoy escribiendo el tutorial para usarlo en CuteNews :P.

    Y gracias por lo del formulario, xD estoy aprendiendo PHP y pues ya estoy haciendo cosas sencillas como esa :P Un besito Maisa :P

  3. Jose

    8 Diciembre 2009

    Respuesta

    Hola,

    Me llamo Jose y quería pedirte ayuda. En configuración de mi panel de wordpress cambié la url del blog y ahora no me deja acceder al panel si accedo a http://ashley-tisdale.nu/wp-login.php

    Ojalá puedas ayudarme porque no puedo actualizar ni administrar la web por culpa de esa T.T

    Gracias por todo!!

  4. Jose

    8 Diciembre 2009

    Respuesta

    Ya lo conseguí arreglar. Gracias de todas formas, tu web es muy buena ;)

  5. hugo

    1 Febrero 2010

    Respuesta

    No funciona siempre dice que el codigo captcha esta mal

    • Mijael

      1 Febrero 2010

      Respuesta

      Hola hugo, acabo de volver a probar el formulario y todo funciona correctamente, verifica que estas escribiendo el texto del captcha correctamente. Saludos.

Deja un Comentario

Nombre (Requerido)

Email (Requerido pero no publicado)

Web

Comentario (Requerido)

*Tu E-mail es usado para relacionarlo con tu cuenta en Gravatar