Cómo proteger un formulario de contacto contra spam con reCAPTCHA

Un formulario de contacto sin protección recibe, tarde o temprano, cientos de envíos automatizados de bots. reCAPTCHA filtra la mayoría antes de que lleguen a tu bandeja de entrada.

Por qué un formulario público necesita esta protección

Cualquier bot puede enviar el formulario sin marcarlo si nadie verifica que quien lo envía es una persona real. Sin protección, tu bandeja de entrada termina llena de spam automatizado, y en los peores casos el formulario se usa para intentar ataques contra tu propio servidor.

reCAPTCHA v2 vs v3: cuál elegir

v2 es más simple de implementar y suficiente para la mayoría de formularios pequeños; por eso es la que cubre esta guía paso a paso.

Paso 1: registrar tu sitio en reCAPTCHA

Paso 2: agregar el widget al formulario

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

<form action="/enviar" method="POST">
  <input name="email" type="email" required>
  <textarea name="mensaje" required></textarea>
  <div class="g-recaptcha" data-sitekey="TU_CLAVE_DE_SITIO"></div>
  <button type="submit">Enviar</button>
</form>

Paso 3: verificar la respuesta en el servidor

El widget por sí solo no bloquea nada; la verificación real ocurre en el servidor, confirmando con Google que la respuesta del usuario es válida:

const respuesta = await fetch('https://www.google.com/recaptcha/api/siteverify', {
  method: 'POST',
  headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
  body: `secret=TU_CLAVE_SECRETA&response=${tokenRecibido}`
});

const resultado = await respuesta.json();
if (!resultado.success) {
  // rechazar el envío, probablemente es un bot
}

Una capa adicional simple: el honeypot

Un campo honeypot, un input invisible para personas pero visible para bots automatizados, filtra buena parte del spam más básico sin necesidad de ningún servicio externo, y puede combinarse con reCAPTCHA para una protección todavía más completa.