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.

How to Create a Contact Form in Astro

Astro is one of the best frameworks for building fast, content-focused websites. Since Astro generates static HTML by default, adding a contact form requires pointing the form at an external backend service rather than processing submissions server-side.

This guide walks through building a production-ready contact form in Astro, from basic markup to AJAX submission with spam protection.

Basic Astro contact form

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>

This works immediately. Astro outputs the HTML as-is, and the browser handles the form submission to the external endpoint.

Adding spam protection

Honeypot field

Add a hidden field inside the form to catch basic bots:

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

Add Turnstile for stronger bot protection:

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>

Place the Turnstile widget before the submit button. The response token is automatically included in the form submission.

Adding validation

Use HTML5 validation attributes for client-side validation:

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>

AJAX submission in Astro

For a smoother experience without page reloads, add a client-side script:

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.

Using Astro environment variables for the access key

Store the access key in an environment variable instead of hardcoding it:

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.

Contact form with Astro islands (React, Vue, Svelte)

If you prefer using a framework component for the form, create an island:

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
}

Use it in your Astro page with a client directive:

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

6
<ContactForm client:load {accessKey} />

Redirect after submission

For standard (non-AJAX) submissions, redirect to a thank-you page:

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

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

Summary

Astro contact forms work by pointing standard HTML forms at a hosted form backend endpoint. No server adapters, API routes, or serverless functions are needed. Add spam protection with honeypot fields and CAPTCHA, validate with HTML5 attributes, and optionally handle submission via AJAX for a smoother user experience. The result is a fast, production-ready contact form that works with Astro’s static output.

How to create a contact form in Astro