Add an Astro contact form that needs no adapter or SSR
An Astro contact form can stay fully static, with no adapter or server endpoint. A plain form in an .astro component posts to FormThunder, which stores the submission and emails you. Add a small script tag and it submits without leaving the page. Astro bundles that script, so you don't need a UI framework or a client directive.
Updated
The Astro code
---
const accessKey = import.meta.env.PUBLIC_FORMTHUNDER_KEY;
---
<form id="contact" action="https://formthunder.com/submit" method="POST">
<input type="hidden" name="access_key" value={accessKey} />
<input type="checkbox" name="botcheck" style="display:none" tabindex="-1" />
<label>Name <input name="name" required /></label>
<label>Email <input name="email" type="email" required /></label>
<label>Message <textarea name="message" required></textarea></label>
<button>Send</button>
<p id="contact-result" role="status"></p>
</form>
<script>
const form = document.querySelector<HTMLFormElement>("#contact")!;
const result = document.querySelector("#contact-result")!;
form.addEventListener("submit", async (event) => {
event.preventDefault();
const response = await fetch(form.action, {
method: "POST",
headers: { "Content-Type": "application/json", Accept: "application/json" },
body: JSON.stringify(Object.fromEntries(new FormData(form))),
});
const data = await response.json();
result.textContent = data.message;
if (data.success) form.reset();
});
</script>Replace YOUR_ACCESS_KEY with your free key. It's public by design, so it's safe in client code.
Notes for Astro
- Variables must start with
PUBLIC_to reach client code, but this key is rendered into the HTML from the frontmatter, so it's available at build time either way. - With View Transitions (
<ClientRouter />), a script runs once per full load. Wrap the listener in anastro:page-loadhandler, or the form falls back to a normal post after a client-side navigation. - Delete the script tag if you'd rather not use any JavaScript, and add a hidden
redirectfield pointing at your thanks page.
Or have your AI add it
Connect the MCP server, then ask. The agent creates the form and writes the code for you, and it can send a real test when it's done.
Add a FormThunder contact form to this Astro site that emails hello@example.com. Send a test when you're done.Questions
Do I need @astrojs/node or another adapter?
No. The form's target is FormThunder, so your Astro site can be purely static.
Can I use this with a React or Svelte island?
Yes. Our React and Svelte pages have components you can hydrate with client:visible. The plain version just ships less JavaScript.
Get your Astro form sending
The free plan covers 250 submissions a month, with MCP, the CLI and the brand kit included.