Cómo agregar un formulario a un sitio estático sin backend

Los generadores de sitios estáticos como Astro, Hugo, Next.js, 11ty, Jekyll y Gatsby producen sitios web rápidos y seguros al renderizar previamente HTML en el momento de la compilación. La desventaja es que no hay un servidor para procesar los envíos de formularios.

Esta guía explica cómo agregar formularios completamente funcionales a cualquier sitio estático sin escribir código backend, funciones sin servidor o rutas API.

Por qué los sitios estáticos no pueden procesar formularios

A static site serves pre-built HTML files from a CDN or file host. When a visitor submits a form, the browser sends a POST request to the URL in the form’s action attribute. On a traditional server-rendered site, that URL points to a PHP script, Node.js route, or serverless function that processes the data.

En un sitio estático, no hay ningún servidor para recibir esa solicitud POST. Necesita un servicio externo para manejarlo.

El patrón del backend de formularios

Un servicio de backend de formularios proporciona un endpoint de API público que recibe envíos de formularios. El patrón es simple:

1. Cree su formulario con HTML estándar
2. Set the action attribute to the form backend URL
3. Incluya una clave de acceso público para identificar su formulario
4. El servicio recibe el envío, ejecuta comprobaciones antispam y entrega los datos

1
<form action="https://api.formsfort.com/submit" method="POST">
2
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
3
  <label for="email">Email</label>
4
  <input type="email" id="email" name="email" required />
5
  <label for="message">Message</label>
6
  <textarea id="message" name="message" required></textarea>
7
  <button type="submit">Send</button>
8
</form>

Esto funciona en todos los generadores de sitios estáticos porque es HTML simple. Sin complementos de compilación, sin código específico del marco, sin funciones sin servidor.

Agregar formularios a generadores de sitios estáticos populares

Astro

Astro generates static HTML by default. Add a form directly in any .astro file:

1
---
2
---
3

4
<form action="https://api.formsfort.com/submit" method="POST">
5
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
6
  <label for="name">Name</label>
7
  <input type="text" id="name" name="name" required />
8
  <label for="email">Email</label>
9
  <input type="email" id="email" name="email" required />
10
  <label for="message">Message</label>
11
  <textarea id="message" name="message" required></textarea>
12
  <button type="submit">Send message</button>
13
</form>

Exportación estática de Next.js

When using output: "export" in Next.js, your site produces plain HTML files. Add forms using standard HTML in any page component:

1
export default function ContactPage() {
2
  return (
3
    <form action="https://api.formsfort.com/submit" method="POST">
4
      <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
5
      <label htmlFor="email">Email</label>
6
      <input type="email" id="email" name="email" required />
7
      <label htmlFor="message">Message</label>
8
      <textarea id="message" name="message" required />
9
      <button type="submit">Send</button>
10
    </form>
11
  );
12
}

Hugo

Las plantillas de Hugo admiten HTML estándar. Agregue un formulario en cualquier archivo de diseño o contenido:

1
<form action="https://api.formsfort.com/submit" method="POST">
2
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
3
  <label for="name">Name</label>
4
  <input type="text" id="name" name="name" required />
5
  <label for="email">Email</label>
6
  <input type="email" id="email" name="email" required />
7
  <button type="submit">Send</button>
8
</form>

11ty (Eleventy)

Eleventy genera HTML estático. Agregue formularios en archivos Nunjucks, Liquid o Markdown:

1
<form action="https://api.formsfort.com/submit" method="POST">
2
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
3
  <label for="email">Email</label>
4
  <input type="email" id="email" name="email" required />
5
  <button type="submit">Subscribe</button>
6
</form>

Jekyll

Los sitios Jekyll alojados en páginas de GitHub o cualquier host estático pueden usar backends de formulario:

1
<form action="https://api.formsfort.com/submit" method="POST">
2
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
3
  <label for="name">Name</label>
4
  <input type="text" id="name" name="name" required />
5
  <label for="email">Email</label>
6
  <input type="email" id="email" name="email" required />
7
  <label for="message">Message</label>
8
  <textarea id="message" name="message" required></textarea>
9
  <button type="submit">Send</button>
10
</form>

Proteger formularios de sitios estáticos del spam

Los formularios de sitios estáticos son visibles para los bots que rastrean el código fuente HTML. Protéjalos con múltiples capas:

Campo Honeypot

Agregue un campo oculto que los bots completan pero los humanos no ven:

1
<input
2
  type="text"
3
  name="botcheck"
4
  style="position: absolute; left: -9999px; opacity: 0;"
5
  tabindex="-1"
6
  autocomplete="off"
7
/>

Restricción de dominio

Configure el backend de su formulario para aceptar solo envíos de su dominio. Esto evita que otros sitios utilicen el endpoint de su formulario.

Limitación de velocidad

Los servidores de formulario imponen límites de velocidad por dirección IP, evitando que una sola fuente inunde su formulario con envíos.

CAPTCHA

Para formularios con mucho tráfico, agregue un desafío CAPTCHA. Cloudflare Turnstile es una opción respetuosa con la privacidad que no requiere rompecabezas de imágenes:

1
<div class="cf-turnstile" data-sitekey="YOUR_SITE_KEY"></div>
2
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>

Dónde entregar los envíos

Los servicios de backend de formularios admiten múltiples destinos de entrega:

Manejar estados de éxito y error

Redirigir después del envío

Add a hidden _redirect field to send users to a thank-you page:

1
<input type="hidden" name="_redirect" value="https://example.com/thanks" />

Envío AJAX

Para una experiencia más fluida sin recargas de páginas, use JavaScript:

1
document.querySelector("form").addEventListener("submit", async (e) => {
2
  e.preventDefault();
3
  const form = e.target;
4
  const response = await fetch(form.action, {
5
    method: "POST",
6
    body: new FormData(form),
7
  });
8
  if (response.ok) {
9
    document.getElementById("status").textContent = "Sent successfully.";
10
    form.reset();
11
  }
12
});

Resumen

Los sitios estáticos manejan formularios delegando el procesamiento de envío a un backend de formularios alojado. El patrón es universal en todos los generadores de sitios estáticos: escriba HTML estándar, dirija la acción a una URL de fondo de formulario e incluya una clave de acceso. Agregue protección antispam con campos de honeypot, restricciones de dominio y CAPTCHA. Configure la entrega por correo electrónico, webhooks, Google Sheets o plataformas de mensajería.

Sin código del lado del servidor, sin funciones sin servidor, no se requieren complementos de compilación.