Astro Integration
Integrate Static Forms with your Astro application
To add a contact form to an Astro site without a backend, paste the form below into src/pages/contact.astro, replace YOUR_API_KEY with the key from your Static Forms dashboard, and deploy. The form posts straight to https://api.staticforms.dev/submit and each submission arrives in your inbox. You don't need an SSR adapter, an API endpoint or any JavaScript, and it works on the free plan.
Static HTML Form
The simplest approach: plain HTML that works without JavaScript. To keep the key out of the file, set PUBLIC_STATIC_FORMS_KEY (see Environment Variables below) and use {import.meta.env.PUBLIC_STATIC_FORMS_KEY} as the value.
redirectTo must be a full URL. Without it, the visitor sees a plain confirmation from Static Forms. Every submission goes through the built-in spam filter, and the honeypot field catches simple bots.
With Client-Side Enhancement
Add JavaScript for better user experience:
Environment Variables
Add your API key to environment variables:
React/Vue Component (Islands)
You can also use React or Vue components in Astro islands:
FAQ
Does this work on the free plan?
Yes. The snippet only uses Free plan features: 250 submissions every 30 days, 1 form endpoint, email delivery, the built-in spam filter, a honeypot field and reCAPTCHA v2. No credit card is needed.
How do I keep spam out?
Every submission is checked by the built-in spam filter on every plan. The snippet adds a hidden honeypot field (any field whose name contains "honeypot"); bots fill it in and those submissions are dropped. reCAPTCHA v2 is available on Free. Cloudflare Turnstile, hCaptcha, ALTCHA and reCAPTCHA v3 are available from the Starter plan.
Is it safe to put the API key in my HTML?
Yes. The form API key is meant to be public. It cannot read your submissions or sign in to your dashboard. From the Starter plan you can also restrict submissions to your own domains.
Do I need an Astro adapter or server output?
No. The browser posts the form directly to Static Forms, so the default static output works on any host, including Netlify, Vercel, Cloudflare Pages and GitHub Pages.
