Añadir un Formulario de Contacto a Cualquier Web Estática (Guía 2025)

Las webs estáticas creadas con Astro, Hugo, Jekyll o HTML puro no tienen backend, así que no basta con escribir un script PHP para procesar los envíos de formularios. Necesitas un servicio externo que actúe como gestor del formulario.

En un tutorial anterior expliqué cómo añadir un formulario de contacto a Astro usando OpnForms, pero ese enfoque ha cambiado desde entonces (las notificaciones por email pasaron a un plan de pago). Desde entonces han aparecido más opciones, y hoy hay varios servicios gratuitos y centrados en la privacidad disponibles.

Esta guía cubre la opción gratuita más simple (FormSubmit.co), sus problemas conocidos, las mejores alternativas como Static Forms y Web3Forms, una tabla comparativa de funciones, consideraciones de privacidad y una vía autoalojada para usuarios avanzados. Tanto si estás creando un blog gratis con Astro y Cloudflare como si mantienes cualquier sitio estático, encontrarás una solución que encaje.

Por qué añadir un formulario de contacto a una web estática

Un formulario de contacto aporta credibilidad y confianza a cualquier web. En lugar de publicar tu dirección de email donde los bots pueden rastrearla, los visitantes rellenan un formulario y el envío te llega reenviado. Esto es especialmente importante para:

• Generación de leads: clientes potenciales o colaboradores pueden contactarte directamente
• Confianza del usuario: un formulario de contacto indica que eres accesible y profesional
• Reducción de spam: los formularios con CAPTCHA son más difíciles de abusar que una dirección de email en crudo
• Datos estructurados: obtienes campos consistentes (nombre, email, mensaje) en lugar de emails en formato libre

Como los sitios estáticos no tienen código del lado del servidor, necesitas un gestor de formularios para webs estáticas: un servicio de terceros o un backend autoalojado ligero. Hay varias opciones gratuitas que no requieren nada de código backend.

Método 1: FormSubmit.co (la opción gratuita más simple)

FormSubmit.co era la recomendación habitual cuando se publicó este artículo por primera vez. Sigue siendo la opción más simple. No requiere registro: solo apunta el atributo action de tu formulario a su endpoint. Así funciona.

1. Crea tu formulario HTML

Diseña un formulario con elementos HTML estándar. Incluye un atributo name en cada campo del que quieras recibir datos:

<form id="contact-form">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required />
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required />
  <label for="message">Message:</label>
  <textarea id="message" name="message" required></textarea>
  <button type="submit">Send</button>
</form>

2. Apunta el action del formulario a FormSubmit

Añade el endpoint de FormSubmit como atributo action del formulario con tu dirección de email:

<form
  id="contact-form"
  action="https://formsubmit.co/[email protected]"
  method="POST"
>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required />
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required />
  <label for="message">Message:</label>
  <textarea id="message" name="message" required></textarea>
  <button type="submit">Send</button>
</form>

3. Verifica tu dirección de email

Envía el formulario una vez (o visita la URL de FormSubmit en tu navegador). Recibirás un email de confirmación con un enlace. Haz clic en él para verificar que la dirección de email es tuya. Es un paso que solo se hace una vez.

4. Personaliza las opciones del formulario

FormSubmit admite varios campos ocultos para personalizar el comportamiento:

Redirección tras el envío:

<input
  type="hidden"
  name="_next"
  value="https://yourdomain.com/thanks.html"
/>

Copia (CC) a destinatarios adicionales:

<input
  type="hidden"
  name="_cc"
  value="[email protected],[email protected]"
/>

Añadir reCAPTCHA:

<input type="hidden" name="_captcha" value="true" />

Puedes consultar todas las opciones disponibles en la documentación de FormSubmit.co.

Problemas de FormSubmit.co que debes conocer

FormSubmit es fácil de configurar, pero tiene problemas reales que conviene conocer antes de usarlo en un sitio en producción.

Limitaciones de la protección antispam

Usuarios en Reddit reportan que el spam se cuela incluso con reCAPTCHA y honeypot activados. Un usuario en r/webdev comentó: “Tenía las opciones de captcha y honeypot activadas y aun así recibía mensajes de spam a diario.” Otros reportan que reCAPTCHA puede provocar tiempos de carga de más de 30 segundos en las páginas con formulario, lo que perjudica la experiencia de usuario.

Dirección de email expuesta en el código fuente (riesgo RGPD)

Tu dirección de email queda incrustada directamente en el código fuente HTML a través de la URL del action del formulario:

<form action="https://formsubmit.co/[email protected]">

Esto la hace recolectable por bots de rastreo de emails. También es un posible problema de RGPD: estás exponiendo una dirección de email personal de una forma trivialmente fácil de recolectar de forma automática. Si te preocupa esto, consulta nuestra guía sobre cómo bloquear a los rastreadores de IA que rastrean tu web.

Problemas de fiabilidad

La web de FormSubmit.co estuvo inaccesible durante varias peticiones de prueba. Usuarios en Reddit reportan inconsistencias y tiempo perdido depurando. Como FormSubmit no tiene planes de pago (es “gratis para siempre”), hay dudas sobre su sostenibilidad y soporte a largo plazo.

Las mejores alternativas a FormSubmit para sitios estáticos

Han aparecido más servicios de backend para formularios desde 2024. Varios ofrecen ahora mejor protección antispam, garantías de privacidad, paneles y modelos de negocio sostenibles, muchos con tiers gratuitos generosos. Si te interesan las herramientas de formularios autoalojadas, también puedes echar un vistazo a OpnForm, un constructor de formularios open source.

Antes de elegir un servicio, esto es lo que debes mirar:

Static Forms (mejor tier gratuito, 500/mes)

Static Forms ofrece el tier gratuito más generoso, con 500 envíos al mes. Admite reCAPTCHA v2, reCAPTCHA v3, Cloudflare Turnstile y Altcha (centrado en la privacidad, compatible con RGPD, sin rastreo de usuarios). También tienes webhooks, subida de archivos, un panel de envíos y autorespuestas con IA que redactan respuestas a partir de una base de conocimiento.

La configuración es similar a FormSubmit —apuntas el action del formulario a su endpoint— pero usa una clave de acceso en lugar de tu dirección de email. Los planes de pago empiezan en $7.50/mes.

Web3Forms (el mejor para privacidad, sin exponer el email)

Web3Forms usa una clave de acceso en lugar de tu dirección de email en el HTML, así que tu email permanece oculto a los rastreadores. El tier gratuito incluye 250 envíos al mes. Admite subida de archivos, reCAPTCHA y cumple el RGPD por diseño.

La configuración es sencilla. Crea una cuenta, obtén tu clave de acceso y añádela como campo oculto:

<form action="https://api.web3forms.com/submit" method="POST">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
  <input type="text" name="name" required />
  <input type="email" name="email" required />
  <textarea name="message" required></textarea>
  <button type="submit">Send</button>
</form>

Formspree (el mejor para integraciones)

Formspree existe desde 2014 y es uno de los actores más consolidados. El tier gratuito se limita a 50 envíos al mes, pero el plan de $10/mes añade filtrado antispam basado en ML, un panel e integraciones con Slack, Google Sheets y Zapier. Buena opción si necesitas que los envíos fluyan a tus herramientas de trabajo habituales.

Netlify Forms (el mejor si estás alojado en Netlify)

Si tu sitio ya está en Netlify, Netlify Forms viene integrado. No necesitas ningún servicio extra. El tier gratuito incluye 100 envíos al mes con filtrado antispam incorporado. Añade netlify a la etiqueta del formulario y funciona sin más:

<form name="contact" method="POST" data-netlify="true">
  <input type="text" name="name" required />
  <input type="email" name="email" required />
  <textarea name="message" required></textarea>
  <button type="submit">Send</button>
</form>

EmailJS (el mejor solo del lado del cliente)

EmailJS permite enviar emails directamente desde JavaScript del lado del cliente, sin redirección del action del formulario. El tier gratuito incluye 200 emails al mes. Funciona con plantillas de email y admite adjuntos. Útil para aplicaciones de una sola página o sitios donde quieres envío AJAX sin redirección de página.

Tabla comparativa: servicios gratuitos de formularios de contacto

*FormSubmit afirma ser ilimitado, pero los usuarios reportan problemas de fiabilidad.

Consideraciones de privacidad y RGPD para formularios de contacto

Si recibes visitantes de la UE (o te importa la privacidad en general), el servicio de formularios que elijas tiene implicaciones reales para el cumplimiento normativo.

Exposición del email en el código HTML

FormSubmit incrusta tu dirección de email directamente en el atributo action del HTML. Es visible para cualquiera que vea el código fuente y para todos los bots que rastrean tu sitio. Servicios como Web3Forms, Formspree, Forminit y Static Forms usan claves de acceso o IDs de formulario, manteniendo tu dirección de email solo del lado del servidor.

Para una protección de privacidad más amplia en tu sitio, considera combinar un servicio de formularios respetuoso con la privacidad con Plausible Analytics, una alternativa a Google Analytics centrada en la privacidad.

Opciones de CAPTCHA respetuosas con la privacidad

El reCAPTCHA tradicional de Google rastrea a los usuarios entre sitios y carga JavaScript pesado. Las alternativas más nuevas son más respetuosas con la privacidad:

• Cloudflare Turnstile: CAPTCHA invisible que no requiere interacción del usuario ni lo rastrea entre sitios. Static Forms lo admite de forma nativa.
• Altcha: CAPTCHA open source compatible con RGPD, sin rastreo de usuarios. Funciona resolviendo un reto proof-of-work en el navegador. Admitido por Static Forms.
• Campos honeypot: un campo oculto del formulario que los bots rellenan pero los humanos no. Simple y eficaz contra bots de spam básicos; lo usan la mayoría de servicios.

Si la privacidad es una prioridad, elige un servicio que admita Turnstile o Altcha en lugar de Google reCAPTCHA.

Cómo añadir un formulario de contacto en Astro

Si usas Astro con ViewTransitions, puedes encontrarte con este error al enviar un formulario:

Make sure your form has the method=“POST” attribute

Ocurre porque las ViewTransitions de Astro interceptan los envíos de formularios. La solución es añadir el atributo data-astro-reload al elemento del formulario. Esto indica a Astro que maneje el envío como una navegación de página normal en lugar de interceptarlo.

<form
  id="contact-form"
  action="https://formsubmit.co/[email protected]"
  method="POST"
  data-astro-reload
>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required />
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required />
  <label for="message">Message:</label>
  <textarea id="message" name="message" required></textarea>
  <button type="submit">Send</button>
</form>

Si vas a desplegar tu sitio Astro, consulta nuestras guías sobre cómo desplegar Astro en Cloudflare o desplegar una web Astro estática en un VPS. También te pueden resultar útiles nuestros tutoriales sobre cómo mostrar vídeos de YouTube en tu blog Astro y añadir vídeos de YouTube responsive a Astro MDX para otras partes de tu sitio.

Opción autoalojada de formulario de contacto (avanzado)

Si no quieres depender de un servicio externo, o necesitas control total sobre tus datos, puedes ejecutar tu propio backend de formularios.

Backend de formularios en Go con Docker

El proyecto caffsoft/hugo-contact es un backend ligero de formularios de contacto escrito en Go que corre en Docker usando unos 10 MB de RAM. Tiene licencia MIT y está diseñado para sitios estáticos.

El enfoque general:

1. Despliega el contenedor en un VPS
2. Apunta el action de tu formulario a la URL del contenedor
3. El backend procesa los envíos y los reenvía por email o los almacena

Si necesitas un VPS para esto, un VPS asequible de Hetzner empieza en unos 4 €/mes con un rendimiento excelente. Hostinger VPS es otra opción económica con almacenamiento NVMe.

Los precios de los VPS subieron en todos los proveedores en 2026 — si te estás replanteando un servidor alquilado, mira qué cambió y cuándo gana un mini PC.

Para más soluciones autoalojadas, consulta nuestra guía de alternativas autoalojadas a herramientas SaaS populares.

Enfoque con Cloudflare Workers

Si ya estás en Cloudflare, puedes construir un gestor de formularios serverless usando Cloudflare Workers. El enfoque es:

1. Crear un Worker que reciba peticiones POST de tu formulario
2. Reenviar los envíos a tu email (vía SendGrid o Mailgun) o almacenarlos en Airtable/D1
3. Desplegar el Worker junto a tu sitio de Cloudflare Pages

Así obtienes un backend de formularios que corre en el edge sin gestión de servidores. Es gratis hasta 100.000 peticiones al día en el plan gratuito de Cloudflare.

Cómo elegir el servicio de formularios adecuado para tu sitio

Cada sitio tiene necesidades distintas. Aquí va una guía rápida de decisión:

<form action="https://formsubmit.co/[email protected]" method="POST">

Preguntas frecuentes

Conclusión

Añadir un formulario de contacto a una web estática es más fácil que nunca. FormSubmit.co sigue siendo la opción más rápida para un prototipo o sitio personal: apunta y listo. Pero para uso en producción, Static Forms y Web3Forms ofrecen mejor protección antispam, garantías de privacidad y paneles sin coste.

Si la privacidad es tu prioridad, elige un servicio que use claves de acceso en lugar de direcciones de email (Web3Forms, Static Forms). Si necesitas integraciones con Slack o Google Sheets, Formspree es una opción sólida. Y si quieres cero dependencias, un backend autoalojado con Docker te da control total.

Si estás montando un sitio Astro nuevo, empieza por nuestra guía para añadir un formulario de contacto a Astro. Para herramientas de privacidad más amplias, Plausible Analytics combina bien con un servicio de formularios respetuoso con la privacidad.