Adding a Form to Astro
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
Log in to your Formboost dashboard and create a new endpoint. Copy the endpoint URL:
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.
1---
2// src/pages/contact.astro
3---
4
5<form action="https://formboost.app/f/YOUR_ENDPOINT_ID" method="POST">
6 <label for="name">Name</label>
7 <input type="text" id="name" name="name" required />
8
9 <label for="email">Email</label>
10 <input type="email" id="email" name="email" required />
11
12 <label for="message">Message</label>
13 <textarea id="message" name="message" rows="5"></textarea>
14
15 <button type="submit">Send</button>
16</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:
1---
2// src/components/ContactForm.astro
3---
4
5<form id="contact-form">
6 <input type="text" name="name" placeholder="Name" required />
7 <input type="email" name="email" placeholder="Email" required />
8 <textarea name="message" placeholder="Message" rows="5"></textarea>
9 <button type="submit">Send</button>
10 <p id="success" style="display:none;">Message sent!</p>
11</form>
12
13<script>
14 const form = document.getElementById("contact-form") as HTMLFormElement;
15 form.addEventListener("submit", async (e) => {
16 e.preventDefault();
17 const data = Object.fromEntries(new FormData(form));
18 const res = await fetch("https://formboost.app/f/YOUR_ENDPOINT_ID", {
19 method: "POST",
20 headers: { "Content-Type": "application/json" },
21 body: JSON.stringify(data),
22 });
23 if (res.ok) {
24 form.reset();
25 document.getElementById("success")!.style.display = "block";
26 }
27 });
28</script>Step 3: Custom Redirect (Option A Only)
For the plain HTML form, redirect users to a custom page after submission:
1<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.