Cómo Añadir un Formulario de Contacto a Astro (Gratis, Sin Backend)

Los sitios estáticos no pueden procesar envíos de formulario por sí solos. No hay servidor que maneje la petición POST, valide los datos o envíe un email. Incluso si añades comportamiento dinámico a un sitio Astro estático con un poco de código del lado del cliente, el propio formulario sigue necesitando un servicio externo que actúe de backend.

Esta guía cubre tres formas de añadir un formulario de contacto Astro funcional que te envía notificaciones por email cuando alguien lo envía. Sin backend, sin función serverless, sin base de datos de tu parte. La Opción 1 (Web3Forms) es la que recomiendo para la mayoría.

Flujo formulario-a-email: un visitante envía un formulario en una página Astro estática, una API de formulario-a-email lo procesa, y la notificación aterriza en tu bandeja

Las tres opciones funcionan en Astro 7 (release actual a finales de 2026, requiere Node 22.12 o más nuevo), y los precios y límites de abajo son los actuales.

Lo que necesitas:

Otros tutoriales de Astro:

• Añadir un formulario de contacto a cualquier web estática
• Desplegar Astro en un VPS con CloudPanel
• Crear un blog Astro gratis en Cloudflare

Opción 1: Web3Forms - formulario de contacto Astro gratis (recomendado)

Web3Forms es una API de formulario-a-email. Creas un formulario en HTML, lo apuntas a su endpoint, y los envíos aterrizan en tu bandeja. Funciona sin servidor backend ni código del lado del servidor. Esa es toda la integración.

Planes actuales (según los publica Web3Forms):

Sin tarjeta requerida para el plan gratis.

Paso 1: Consigue una access key

Ve a web3forms.com e introduce tu dirección de email. Recibirás una access key. Esta clave no es un secret. Es seguro ponerla en código del lado del cliente. Actúa como un alias de tu dirección de email (su FAQ lo dice claro: “Access key is public”). No la trates como una API key que debas rotar.

Después, si aparece spam, abre app.web3forms.com y activa hCaptcha para el formulario. Más sobre eso abajo.

Paso 2: Crea el componente de formulario

Crea un componente Astro nuevo o añade el formulario a una página existente. Aquí un ejemplo mínimo:

---
// src/pages/contact.astro
import Layout from "../layouts/Layout.astro";
---

<Layout title="Contact">
  <form
    action="https://api.web3forms.com/submit"
    method="POST"
    id="contact-form"
    data-astro-reload
    novalidate
  >
    <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY_HERE" />

    <!-- Honeypot spam protection -->
    <input type="checkbox" name="botcheck" style="display: none;" />

    <div>
      <label for="name">Name</label>
      <input type="text" name="name" id="name" required />
    </div>

    <div>
      <label for="email">Email</label>
      <input type="email" name="email" id="email" required />
    </div>

    <div>
      <label for="message">Message</label>
      <textarea name="message" id="message" rows="5" required></textarea>
    </div>

    <button type="submit">Send</button>

    <p id="result"></p>
  </form>
</Layout>

Reemplaza YOUR_ACCESS_KEY_HERE con la clave del paso 1.

El atributo data-astro-reload importa si usas el router del lado del cliente de Astro (ClientRouter de astro:transitions, antes la View Transitions API). Sin él, el envío del formulario puede fallar porque Astro intercepta la navegación. Este atributo y el evento astro:page-load de abajo no han cambiado en Astro 7. El mismo código funciona. Si tienes curiosidad por qué más llegó en Astro 7, mira los benchmarks de rendimiento de build de Astro 7.

Paso 3: Añade envío AJAX (opcional pero mejor UX)

El formulario HTML pelado funciona, pero redirige al usuario a una página de éxito de Web3Forms. Si quieres mostrar un mensaje de “enviado correctamente” sin salir de la página, añade este script:

<script is:inline>
  document.addEventListener("DOMContentLoaded", () => {
    const form = document.getElementById("contact-form");
    const result = document.getElementById("result");

    form.addEventListener("submit", function (e) {
      e.preventDefault();
      const formData = new FormData(form);
      const object = Object.fromEntries(formData);
      const json = JSON.stringify(object);

      result.textContent = "Sending...";

      fetch("https://api.web3forms.com/submit", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Accept: "application/json",
        },
        body: json,
      })
        .then(async (response) => {
          const data = await response.json();
          if (response.status === 200) {
            result.textContent = data.message;
          } else {
            result.textContent = data.message;
          }
        })
        .catch(() => {
          result.textContent = "Something went wrong.";
        })
        .then(() => {
          form.reset();
        });
    });
  });
</script>

Si usas el router del lado del cliente de Astro (ClientRouter), reemplaza el listener DOMContentLoaded por astro:page-load. Aquí la versión completa:

<script is:inline>
  document.addEventListener("astro:page-load", () => {
    const form = document.getElementById("contact-form");
    const result = document.getElementById("result");

    if (!form) return;

    form.addEventListener("submit", function (e) {
      e.preventDefault();
      const formData = new FormData(form);
      const object = Object.fromEntries(formData);
      const json = JSON.stringify(object);

      result.textContent = "Sending...";

      fetch("https://api.web3forms.com/submit", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Accept: "application/json",
        },
        body: json,
      })
        .then(async (response) => {
          const data = await response.json();
          if (response.status === 200) {
            result.textContent = data.message;
          } else {
            result.textContent = data.message;
          }
        })
        .catch(() => {
          result.textContent = "Something went wrong.";
        })
        .then(() => {
          form.reset();
        });
    });
  });
</script>

El guard if (!form) return; previene errores en páginas que no tienen el formulario de contacto. Con routing del lado del cliente, Astro re-ejecuta el evento astro:page-load en cada navegación, así que la comprobación importa.

Paso 4: Añade un redirect tras el envío (opcional)

En vez de AJAX, puedes redirigir a una página de gracias tras el envío. Añade este input oculto a tu formulario:

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

Web3Forms redirigirá al usuario ahí tras procesar el envío.

Protección anti-spam gratis: hCaptcha vs honeypot

Los docs de Web3Forms ahora marcan el honeypot (botcheck) como obsoleto y “no recomendado”. Sigue funcionando y no cuesta nada, así que déjalo en el snippet base, pero la opción gratis que ellos mismos recomiendan es su hCaptcha zero-config.

<form action="https://api.web3forms.com/submit" method="POST" data-astro-reload>
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY_HERE" />
  <div class="h-captcha" data-captcha="true"></div>
  <!-- ...fields... -->
  <button type="submit">Send</button>
</form>
<!-- before </body> -->
<script src="https://web3forms.com/client/script.js" async defer></script>

<input type="checkbox" name="botcheck" style="display: none;" />

Paso 5: Dale estilo al formulario

El markup de formulario de arriba es HTML pelado. Dalo estilo con tu enfoque preferido: Tailwind, CSS vainilla, o una librería de componentes. Web3Forms es solo un endpoint de API. No inyecta UI ni estilos.

Los docs de Web3Forms para Astro tienen un ejemplo completo con estilo Tailwind si quieres un punto de partida. Y ya que estás editando esta página de todas formas, es buen momento para añadir vídeos de YouTube a tu blog Astro o limpiar otras páginas del deploy.

Costes, límites y qué se rompe

El único gotcha real con Web3Forms gratis es el tope. Aquí el modo de fallo explicado:

Lo que necesitas por plan:

• La mayoría de formularios de contacto: Free. 250/mes es de sobra para un sitio personal o página de negocio pequeña.
• Subidas de archivos o autoresponders: Pro (15 $/mes o 149 $/año). Starter no los incluye.
• Volumen mayor (5k/mes) sin subidas: Starter a 49 $/año es un valor decente.
• Red de recuperación cuando un email se pierde: gratis guarda envíos 30 días, Pro 1 año. Ese historial es la diferencia entre “reenvíalo” y “se perdió” cuando un mensaje aterriza en spam.

La restricción de dominio (anti key-scraping) es solo-Pro, como se anotó arriba.

Opción 2: formsubmit.co (gratis, sin registro)

Formsubmit.co es otro servicio gratis de formulario-a-email. Sin registro requerido. Apuntas el atributo action de tu formulario a su endpoint con tu dirección de email, envías el formulario una vez, haces clic en un enlace de confirmación, y listo. Su homepage declara más de 6 millones de envíos de más de 400.000 sitios registrados.

Setup

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

Envía el formulario una vez. Revisa tu bandeja buscando un email de confirmación de Formsubmit.co. Haz clic en el enlace. Desde ese punto, todos los envíos van a tu email.

Campos ocultos útiles

<!-- Redirect after submission -->
<input type="hidden" name="_next" value="https://yourdomain.com/thanks" />

<!-- CC another email (comma-separated for several) -->
<input type="hidden" name="_cc" value="[email protected]" />

<!-- Set subject line -->
<input type="hidden" name="_subject" value="New contact form submission" />

<!-- reCAPTCHA is ON by default; set to "false" to disable -->
<input type="hidden" name="_captcha" value="false" />

<!-- POST the submission as JSON to your own webhook -->
<input type="hidden" name="_webhook" value="https://yourdomain.com/hooks/form" />

<!-- Email template: "basic" (default), "clean", or "table" -->
<input type="hidden" name="_template" value="table" />

<!-- Auto-reply to the submitter (does not work with AJAX or with reCAPTCHA disabled) -->
<input type="hidden" name="_autoresponse" value="Thanks, we got your message." />

<!-- Drop submissions containing blacklisted phrases (max about 20) -->
<input type="hidden" name="_blacklist" value="spammy phrase, another one" />

Ojo a la advertencia de _autoresponse de sus docs: no envía para formularios que desactivan reCAPTCHA, y no envía para envíos hechos por AJAX/fetch. POST HTML plano con reCAPTCHA encendido es la única ruta donde el auto-reply funciona.

formsubmit.co vs Web3Forms

Ambos funcionan bien. formsubmit.co no tiene tope mensual ni cuenta que gestionar, pero no tienes red de seguridad cuando un email se pierde. Web3Forms tiene una API más limpia y guarda envíos 30 días en gratis, lo cual es útil si un email se pierde.

Opción 3: OpnForm (constructor de formularios open-source, autoalojable)

OpnForm es un constructor de formularios open-source con editor drag-and-drop. Diseñas el formulario visualmente, luego lo incrustas como un iframe.

Qué es gratis vs de pago (planes actuales): el plan gratis es más generoso de lo que era. Tienes formularios y envíos ilimitados, subidas de 10MB, lógica de formulario, campos computados, acceso API e integraciones básicas (email, webhook, Zapier, Google Sheets) en un workspace con branding de OpnForm. Pro cuesta 25 $/mes y añade quitar-branding, dominios propios, SMTP propio, notificaciones Slack/Discord/Telegram, captcha, analíticas y más. Business cuesta 67 $/mes (roles/permisos, límites de subida mayores) y Enterprise 220 $/mes (SSO, audit logs, almacenamiento externo).

Si te va bien que OpnForm envíe los emails por su servicio por defecto, el plan gratis funciona para formularios de contacto básicos. Si necesitas SMTP propio o captcha anti-spam, eso es Pro. O autoalójalo (siguiente sección).

Cómo usar OpnForm en Astro

1. Crea una cuenta en opnform.com y construye tu formulario.
2. Ve a la página Share del formulario y copia el código de embed.
3. Pégalo en tu página Astro:

---
// src/pages/contact.astro
import Layout from "../layouts/Layout.astro";
---

<Layout title="Contact">
  <iframe
    style="border:none;width:100%;"
    height="500px"
    src="https://opnform.com/forms/your-form-slug"
  ></iframe>
</Layout>

Ajusta el valor de height para encajar tu formulario. El enfoque iframe significa que no tienes control sobre el estilo del formulario. OpnForm lo maneja en el embed. El iframe también es inmune al router del lado del cliente de Astro, así que nada de gimnasia con data-astro-reload.

Autoaloja OpnForm con Docker

OpnForm es open source: el repo ahora es OpnForm/OpnForm (movido desde JhumanJ/OpnForm), unas 3,7k estrellas, open core AGPLv3, activamente mantenido. Autoalojar con Docker es la escotilla de escape del paywall Pro: SMTP propio y captcha se convierten en config que gestionas en vez de funciones de 25 $/mes. Incrustar una instancia autoalojada en Astro es idéntico. El mismo iframe, solo apuntando a tu propio dominio.

Enfoque de costes: un VPS pequeño corre todo el stack por más o menos 4-5 EUR/mes. Un Hetzner Cloud VPS (clase CX22) es de sobra para un formulario personal o de negocio pequeño, y tienes control total sobre dónde se guardan los envíos y qué relay SMTP manda el correo. Eso es más barato que Pro a 25 $/mes, y puedes correr una docena de contenedores más en la misma máquina.

Solo vale las piezas móviles extra si necesitas control de SMTP/captcha/branding. Si el plan alojado gratis te cubre, tómalo. Menos cosas que parchear.

Para correrlo: clona el repo, docker compose up -d el stack, pon un reverse proxy delante, y apunta el src del iframe a tu instancia. Si ya corres Dokploy, el camino más corto es autoalojar OpnForm con Docker Compose en Dokploy como app compose.

¿Qué formulario de contacto Astro deberías usar?

¿Solo quieres emails en tu bandeja gratis? Usa Web3Forms. Lleva 5 minutos, el plan gratis maneja 250 envíos/mes (más que suficiente para un formulario de contacto), y hCaptcha es gratis cuando aparece el spam. El único gotcha real: al tope, los envíos se paran hasta el mes siguiente.

¿Necesitas envíos ilimitados y ninguna cuenta? Usa formsubmit.co. La confirmación por email de una vez es el único paso de setup. Acepta que nada se guarda. Si el correo se pierde, el envío se pierde.

¿Quieres un constructor visual con lógica y campos condicionales? Usa OpnForm. El plan gratis incluye notificaciones por email básicas e incluso subidas de 10MB. SMTP propio y captcha son Pro (25 $/mes), o autoalójalo y paga con tiempo de ops.

Aquí la comparación completa, las tres a la vez:

Para un formulario de contacto simple que te envíe un email, Web3Forms es el mejor equilibrio de sencillez y funciones. Aquí el código mínimo otra vez:

<form action="https://api.web3forms.com/submit" method="POST" data-astro-reload>
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY_HERE" />
  <!-- Honeypot still works, but Web3Forms docs now recommend hCaptcha instead -->
  <input type="checkbox" name="botcheck" style="display: none;" />
  <!-- Free hCaptcha: uncomment both lines, then enable it in the dashboard
  <div class="h-captcha" data-captcha="true"></div>
  -->
  <input type="text" name="name" placeholder="Name" required />
  <input type="email" name="email" placeholder="Email" required />
  <textarea name="message" placeholder="Message" required></textarea>
  <button type="submit">Send</button>
</form>
<!-- <script src="https://web3forms.com/client/script.js" async defer></script> -->

Otras opciones, por completar: Formspree, StaticForms y Formspark son servicios alojados con el mismo modelo (el formulario hace POST a su endpoint). Si ya despliegas Astro con un adaptador y quieres poseer el handler, una función serverless más Resend (tier gratis de unos 100 emails/día) también funciona. Más piezas móviles, más control. Yo solo iría ahí después de que las opciones alojadas dejen de encajar.

Una vez la página de contacto esté sólida, lo siguiente que vale cablear en un sitio Astro es normalmente contenido: mejores opciones de headless CMS para Astro.

Verifica tu formulario antes de entregar

No confíes en el camino feliz. Corre esta checklist tras desplegar:

FAQ

Eso es un formulario de contacto Astro funcional sin backend, gratis, en unos cinco minutos. Si aún estás construyendo el sitio, despliega un blog Astro en Cloudflare. El mismo código de formulario funciona igual dondequiera que se sirva el HTML.