Astro Contact Form Without a Backend

Set up FormsReach with Astro

Create a free API key

Add a form component

Create a .astro component with a standard form, method POST, and action set to the FormsReach submit endpoint. Add a hidden input named api_key.

Import and ship

Import the component into any page. Deploy to any static host. Submit once - check email and/or WhatsApp depending on your delivery settings.

--- // src/components/ContactForm.astro --- <form action="https://api.formsreach.com/submit" method="POST"> <input type="hidden" name="api_key" value="YOUR_API_KEY"> <input type="text" name="name" required> <input type="email" name="email" required> <textarea name="message" required></textarea> <button type="submit">Submit Form</button> </form>

--- // src/components/ContactForm.astro --- <form action="https://api.formsreach.com/submit" method="POST"> <input type="hidden" name="api_key" value="YOUR_API_KEY"> <input type="text" name="name" required> <input type="email" name="email" required> <textarea name="message" required></textarea> <button type="submit">Submit Form</button> </form>

Static sites still need a form backend

Astro shines at shipping HTML-first pages. Contact forms still need somewhere safe to POST. FormsReach is that form API, so your component stays a normal form instead of a custom server route or third-party email widget.

Platform notes

Prefer a shared .astro form component so every page uses the same markup.
Works with static hosts (Netlify, Cloudflare Pages, GitHub Pages, Vercel static).
After submit, you get email and/or WhatsApp based on how you configure delivery.

Troubleshooting

Nothing arrives: Confirm the hidden api_key field and check spam on Free.
Full page navigation after submit: Expected for classic form POST; use a Pro custom redirect when you want a thank-you URL.
Wrong fields: Ensure each control has a name attribute.

What you get

Free

500 credits every month for form submissions, email, and WhatsApp. Spam filtering, webhooks, and workflow rules included. No credit card required.

Starter & Pro

Larger monthly credit pools (2,000 or 8,000) for growing sites and multi-site volume. Same channels - email, WhatsApp via the official Meta API, webhooks. See pricing.

FAQ

Do I need an Astro API endpoint or server adapter?+

Not for a basic contact form. The form posts to FormsReach from the browser, so you can stay on a fully static output.

Is an npm package required?+

No for the default HTML form POST path. You only need the endpoint and your API key.

Free vs Pro delivery?+

Email and WhatsApp via Meta WhatsApp Business API, with spam filtering. Usage is metered in monthly credits.

Can I use client islands instead?+

Yes - you can also use the JavaScript or framework SDKs inside islands. The default Astro snippet stays zero-JS form POST.

Astro contact form without a backend