Astro Forms: Static and SSR Setup

Add a contact form to a static Astro site: HTML or a client script that posts to a Formboost endpoint, with a redirect, honeypot and email notifications.

Astro sites are static by default, which means no built-in form backend. Formboost gives you a form endpoint that works with plain HTML forms, fetch-based submissions, and any Astro integration (React, Svelte, Vue).

Prerequisites

A Formboost account (sign up free)
An Astro project

Step 1: Create a Formboost Endpoint

https://formboost.app/f/YOUR_ENDPOINT_ID

Step 2: Add the Form

Option A — Plain HTML Form (Simplest)

Add this directly to any .astro file. No JavaScript required.

---
// src/pages/contact.astro
---

<form action="https://formboost.app/f/YOUR_ENDPOINT_ID" 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" rows="5"></textarea>

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

Option B — Fetch Submit (Stay on Page)

Use client:load to handle the submission with JavaScript and show a success message without a page redirect:

---
// src/components/ContactForm.astro
---

<form id="contact-form">
  <input type="text" name="name" placeholder="Name" required />
  <input type="email" name="email" placeholder="Email" required />
  <textarea name="message" placeholder="Message" rows="5"></textarea>
  <button type="submit">Send</button>
  <p id="success" style="display:none;">Message sent!</p>
</form>

<script>
  const form = document.getElementById("contact-form") as HTMLFormElement;
  form.addEventListener("submit", async (e) => {
    e.preventDefault();
    const data = Object.fromEntries(new FormData(form));
    const res = await fetch("https://formboost.app/f/YOUR_ENDPOINT_ID", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(data),
    });
    if (res.ok) {
      form.reset();
      document.getElementById("success")!.style.display = "block";
    }
  });
</script>

Step 3: Custom Redirect (Option A Only)

For the plain HTML form, redirect users to a custom page after submission:

<input type="hidden" name="_redirect" value="https://yoursite.com/thank-you" />

Step 4: Test It

Run npm run dev and submit the form. Check your Formboost dashboard for the submission.