En este tutorial, aprenderás a integrar Google ReCaptcha en un formulario de contacto con HTML, CSS, JavaScript y PHP como backend. Esto ayudará a prevenir el envío de mensajes automatizados y proteger tu formulario contra spam.
La forma en que funciona Recaptcha es esta:
- El codigo cliente (HTML) implementa un DIV que Google usa para mostrar un reto al usuario para demostrar que no es un robot.
- Simplementa un SCRIPT en javascript que Google usa para validar el sitio y agregar la funcionalidad necesaria.
- Del lado de PHP (backend) el servidor valida que se le esté enviando una respuesta de Recaptcha válida. Para esto hace una consulta de los datos de la respuesta en el API https://www.google.com/recaptcha/api/siteverify
Contenido
PASO 1: Crear una Clave de Google ReCaptcha
Antes de comenzar, debes obtener las claves de Google ReCaptcha:
- Visita Google ReCaptcha.
- Registra tu sitio web y selecciona reCAPTCHA v2 («No soy un robot»).
- Copia la Clave del Sitio y la Clave Secreta.
PASO 2: Diseñar el Formulario de Contacto
Crea un archivo cotacto.html con el siguiente código:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formulario de Contacto</title>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>
<body>
<form action="procesar.php" method="POST">
<label for="nombre">Nombre:</label>
<input type="text" name="nombre" required>
<label for="email">Email:</label>
<input type="email" name="email" required>
<label for="mensaje">Mensaje:</label>
<textarea name="mensaje" required></textarea>
<!--ESTE DIV ES EL QUE IMPLEMENTA RECAPTCHA-->
<div class="g-recaptcha" data-sitekey="TU_CLAVE_DEL_SITIO"></div>
<!---->
<button type="submit">Enviar</button>
</form>
</body>
</html>
PASO 3: Procesar el Formulario con PHP
Crea un archivo procesar.php para manejar el formulario:
<?php
if ($_SERVER["REQUEST_METHOD"] === "POST") {
$nombre = htmlspecialchars($_POST['nombre']);
$email = filter_var($_POST['email'], FILTER_VALIDATE_EMAIL);
$mensaje = htmlspecialchars($_POST['mensaje']);
$recaptchaSecret = "TU_CLAVE_SECRETA";
$recaptchaResponse = $_POST['g-recaptcha-response'];
if (!$recaptchaResponse) {
die("ReCAPTCHA no verificado.");
}
$url = "https://www.google.com/recaptcha/api/siteverify";
$data = [
'secret' => $recaptchaSecret,
'response' => $recaptchaResponse,
];
$options = [
'http' => [
'method' => 'POST',
'header' => 'Content-Type: application/x-www-form-urlencoded',
'content' => http_build_query($data),
],
];
$context = stream_context_create($options);
$result = file_get_contents($url, false, $context);
$responseKeys = json_decode($result, true);
if (!$responseKeys["success"]) {
die("ReCAPTCHA falló. Inténtalo de nuevo.");
}
$destinatario = "contacto@miempresa.com";
$asunto = "Nuevo mensaje de contacto";
$contenido = "Nombre: $nombre\nEmail: $email\nMensaje:\n$mensaje";
$encabezados = "From: $email\r\nReply-To: $email\r\n";
if (mail($destinatario, $asunto, $contenido, $encabezados)) {
echo "Mensaje enviado con éxito.";
} else {
echo "Hubo un error al enviar el mensaje.";
}
} else {
header("Location: index.html");
exit;
}
?>
4. Prueba y Ajustes
- Verifica que el formulario funciona correctamente.
- Asegúrate de que el ReCaptcha se muestra correctamente.
- Prueba el envío de correos y revisa si llegan a la bandeja de entrada.
- Si hay problemas, revisa los permisos del servidor y los registros de errores.
Conclusión
Con este tutorial, has aprendido a integrar Google ReCaptcha en tu formulario de contacto usando HTML, JavaScript y PHP. Esta implementación mejora la seguridad de tu sitio y evita el spam de bots automatizados.
Comentarios