Guide
Astro contact form (no backend needed)
Astro renders to static HTML by default, which means an Astro contact form is just a plain HTML form with the right action attribute. You don't need a server endpoint or an Astro integration — paste the snippet into a .astro page and you're done.
The snippet
---
// src/pages/contact.astro
---
<form action="https://formhook.app/f/YOUR_API_KEY" method="POST">
<label>
Email
<input type="email" name="email" required />
</label>
<label>
Message
<textarea name="message" required></textarea>
</label>
<input type="text" name="_gotcha" tabindex="-1" autocomplete="off" hidden />
<input type="hidden" name="_redirect" value="/thanks" />
<button type="submit">Send</button>
</form>How it works
Because Astro ships static HTML by default, there's nothing client-side to wire up. The form's action POSTs straight to formhook.app/f/YOUR_API_KEY, where YOUR_API_KEY comes from your form's settings in the Formhook dashboard. The _gotcha field is a honeypot — bots fill it, humans don't see it, and anything with content there is silently dropped. The _redirect field sends users to a thank-you page after a successful POST, and the URL is validated against your allowed-origins list.
What happens next
- Submission appears in your Formhook dashboard within a second.
- Push notification fires on every device you've enabled it on.
- Reply directly from the dashboard (Pro and above) without leaking your real email address.
Ship your Astro contact form today.
Sign up free, create a form, paste the API key. Five minutes.
Start freeFree tier: 5 forms · 250 submissions/month · No credit card.
Astro contact form — FAQ
- Do I need an Astro integration or a server adapter?
- No. The form POSTs to Formhook directly, so it works with the default static Astro output. No SSR mode, no @astrojs/node adapter required.
- Can I have multiple contact forms across different Astro pages?
- Yes. Create one Formhook form per use case — contact, careers, newsletter — and paste each form's action into the right .astro page. The Free tier covers five forms.
- How do I show a thank-you page after submission?
- Add a hidden _redirect input pointing at your Astro thank-you route. The URL must be on the form's allowed-origins list. Or, if you'd rather show inline success without a page reload, use the fetch pattern shown in the Next.js or SvelteKit guides.