Does Astro support form submissions?

Astro generates static HTML by default, so forms need an external backend to receive submissions. Point the form action at a hosted form endpoint like FormsFort, and Astro handles everything else as standard HTML.

Do I need Astro server adapters for forms?

No. With a hosted form backend, you do not need @astrojs/node, @astrojs/vercel, or any server adapter. The form posts directly to the external endpoint from the browser.

Can I use Astro content collections with forms?

Content collections are for managing markdown and data files, not for processing form submissions. Use a form backend service for submission handling.

How do I add a contact form to an Astro island?

Use a framework component (React, Vue, Svelte) with client:load or client:visible directive. The component handles form submission via fetch() to the form backend endpoint.

What is the best spam protection for Astro forms?

Combine a honeypot field, domain restriction, and Cloudflare Turnstile CAPTCHA. All three work with standard HTML forms in Astro without any server-side code.

Cómo crear un formulario de contacto en Astro

Astro es uno de los mejores frameworks para crear sitios rápidos centrados en contenido. Como Astro genera HTML estático por defecto, añadir un formulario de contacto requiere apuntar el formulario a un servicio backend externo en lugar de procesar los envíos en el servidor.

Esta guía explica cómo crear un formulario de contacto listo para producción en Astro, desde el marcado básico hasta el envío AJAX con protección antispam.

Formulario de contacto Astro básico

Create a new page at src/pages/contact.astro:

1
---
2
---
3

4
<html lang="en">
5
  <head>
6
    <title>Contact Us</title>
7
  </head>
8
  <body>
9
    <form action="https://api.formsfort.com/submit" method="POST">
10
      <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
11

12
      <label for="name">Name</label>
13
      <input type="text" id="name" name="name" autocomplete="name" required />
14

15
      <label for="email">Email</label>
16
      <input type="email" id="email" name="email" autocomplete="email" required />
17

18
      <label for="message">Message</label>
19
      <textarea id="message" name="message" rows="5" required></textarea>
20

21
      <button type="submit">Send message</button>
22
    </form>
23
  </body>
24
</html>

Esto funciona inmediatamente. Astro genera el HTML tal cual y el navegador maneja el envío del formulario al endpoint externo.

Agregar protección antispam

Campo Honeypot

Agregue un campo oculto dentro del formulario para detectar bots básicos:

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

Cloudflare Turnstile

Agregar Turnstile para una mayor protección contra bots:

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

Coloque el widget Turnstile antes del botón de enviar. El token de respuesta se incluye automáticamente en el envío del formulario.

Agregar validación

Utilice atributos de validación HTML5 para la validación del lado del cliente:

1
<label for="name">Name</label>
2
<input
3
  type="text"
4
  id="name"
5
  name="name"
6
  autocomplete="name"
7
  minlength="2"
8
  maxlength="100"
9
  required
10
/>
11

12
<label for="email">Email</label>
13
<input type="email" id="email" name="email" autocomplete="email" required />
14

15
<label for="message">Message</label>
16
<textarea id="message" name="message" rows="5" minlength="10" maxlength="5000" required></textarea>

Envío AJAX en Astro

Para una experiencia más fluida sin recargas de páginas, agregue un script del lado del cliente:

1
---
2
---
3

4
<form id="contactForm" action="https://api.formsfort.com/submit" method="POST">
5
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
6
  <input
7
    type="hidden"
8
    name="botcheck"
9
    style="position:absolute;left:-9999px;opacity:0"
10
    tabindex="-1"
11
    autocomplete="off"
12
  />
13

14
  <label for="name">Name</label>
15
  <input type="text" id="name" name="name" required />
16

17
  <label for="email">Email</label>
18
  <input type="email" id="email" name="email" required />
19

20
  <label for="message">Message</label>
21
  <textarea id="message" name="message" rows="5" required></textarea>
22

23
  <button type="submit" id="submitBtn">Send message</button>
24
  <p id="formStatus" aria-live="polite"></p>
25
</form>
26

27
<script>
28
  const form = document.getElementById("contactForm");
29
  const status = document.getElementById("formStatus");
30
  const btn = document.getElementById("submitBtn");
31

32
  form.addEventListener("submit", async (e) => {
33
    e.preventDefault();
34
    btn.disabled = true;
35
    btn.textContent = "Sending...";
36
    status.textContent = "";
37

38
    try {
39
      const response = await fetch(form.action, {
40
        method: "POST",
41
        body: new FormData(form),
42
      });
43

44
      if (response.ok) {
45
        status.textContent = "Message sent successfully. We will be in touch.";
46
        form.reset();
47
      } else {
48
        const data = await response.json().catch(() => null);
49
        status.textContent = data?.message ?? "Something went wrong. Please try again.";
50
      }
51
    } catch {
52
      status.textContent = "Network error. Please check your connection and try again.";
53
    } finally {
54
      btn.disabled = false;
55
      btn.textContent = "Send message";
56
    }
57
  });
58
</script>

The script intercepts the form submission, sends it via fetch(), and updates the UI with the result. The aria-live="polite" attribute ensures screen readers announce status changes.

Usar variables de entorno Astro para la clave de acceso

Almacene la clave de acceso en una variable de entorno en lugar de codificarla:

1
---
2
const accessKey = import.meta.env.PUBLIC_FORMSFORT_ACCESS_KEY;
3
---
4

5
<form action="https://api.formsfort.com/submit" method="POST">
6
  <input type="hidden" name="access_key" value="{accessKey}" />
7
  <!-- rest of form -->
8
</form>

Create a .env file:

1
PUBLIC_FORMSFORT_ACCESS_KEY=ff_your_key_here

Only variables prefixed with PUBLIC_ are exposed to the client bundle in Astro.

Formulario de contacto con islas Astro (React, Vue, Svelte)

Si prefiere usar un componente de framework para el formulario, cree una isla:

1
import { useState } from "react";
2

3
export default function ContactForm({ accessKey }: { accessKey: string }) {
4
  const [status, setStatus] = useState("");
5

6
  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
7
    e.preventDefault();
8
    setStatus("Sending...");
9

10
    const response = await fetch("https://api.formsfort.com/submit", {
11
      method: "POST",
12
      body: new FormData(e.currentTarget),
13
    });
14

15
    setStatus(response.ok ? "Message sent." : "Something went wrong.");
16
  }
17

18
  return (
19
    <form onSubmit={handleSubmit}>
20
      <input type="hidden" name="access_key" value={accessKey} />
21
      <input type="email" name="email" required placeholder="Email" />
22
      <textarea name="message" required placeholder="Message" />
23
      <button type="submit">Send</button>
24
      <p>{status}</p>
25
    </form>
26
  );
27
}

Úselo en su página Astro con una directiva de cliente:

1
---
2
import ContactForm from "../components/ContactForm";
3
const accessKey = import.meta.env.PUBLIC_FORMSFORT_ACCESS_KEY;
4
---
5

6
<ContactForm client:load {accessKey} />

Redirigir después del envío

Para envíos estándar (no AJAX), redirija a una página de agradecimiento:

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

Create the thank-you page at src/pages/thanks.astro.

Resumen

Los formularios de contacto en Astro funcionan apuntando formularios HTML estándar a un endpoint de backend de formularioss alojado. No hacen falta adaptadores de servidor, rutas API ni funciones serverless. Añada protección antispam con campos honeypot y CAPTCHA, valide con atributos HTML5 y, si lo necesita, gestione el envío con AJAX para una experiencia más fluida. El resultado es un formulario de contacto rápido, listo para producción y compatible con la build estático de Astro.