Add a form to an Astro site
Astro islands are optional here: a plain HTML form works out of the box, and an Astro Action or API route keeps the Public Key server-side.
- Free plan
- No plugin to install
- Set up in minutes
Astro in three steps.
- 1
Create a form and copy its Public Key
Sign up and copy the Public Key. For a static form it goes at the end of the action URL; for the proxied route it stays in an env var.
- 2
Drop in a plain form
Astro components are HTML. Set the action to the form-specific endpoint, add named inputs, and the static build is done.
- 3
Or proxy with an API route
Add pages/api/contact.js that builds the endpoint URL from an environment variable and forwards the body when you want the Public Key off the client.
Copy this into Astro.
Swap in your form’s key and submissions start landing in your inbox.
---
// src/pages/contact.astro — zero client JS needed
---
<form action="https://api.surveyowl.co/v1/submit/sk_live_…" method="POST">
<input name="email" type="email" required />
<textarea name="message"></textarea>
<button type="submit">Send</button>
</form>What people build with it.
Contact forms on content-driven Astro sites with no client JS.
Astro islands where a React or Vue form component needs a destination.
Static Astro builds deployed to Netlify, Vercel, or Cloudflare Pages.
Astro forms, answered.
1. Create a form and copy its Public Key: Sign up and copy the Public Key. For a static form it goes at the end of the action URL; for the proxied route it stays in an env var. 2. Drop in a plain form: Astro components are HTML. Set the action to the form-specific endpoint, add named inputs, and the static build is done. 3. Or proxy with an API route: Add pages/api/contact.js that builds the endpoint URL from an environment variable and forwards the body when you want the Public Key off the client.
Astro ships zero JavaScript by default, and the endpoint honors that: a <form> with an action attribute works on a fully static Astro build. When you would rather keep the Public Key server-side, Astro API routes run at the edge and proxy the call.
The static version redirects to the endpoint after submit, so style a thank-you page or use the proxied API route when you want to render your own success state without any client JavaScript.