Adding a contact form to an Astro site
July 22, 2026
Astro is built around the philosophy of shipping less client-side JavaScript. It generates incredibly fast, static HTML. But when you need to add a contact form, the standard documentation often steers you toward adding server-side rendering (SSR) adapters, configuring API endpoints, or deploying serverless functions.
You don't need to sacrifice Astro's static architecture just to receive emails. With NormForms, your Astro site remains 100% static, adds 0kb of client-side JavaScript, and captures customer inquiries reliably.
Step 1: Get your form endpoint
Create a free NormForms account (takes ~30 seconds, no credit card required). You will receive a private endpoint URL:
https://normforms.com/f/YOUR_TOKEN.
Step 2: Create a ContactForm.astro component
Create a new component at src/components/ContactForm.astro:
--- // src/components/ContactForm.astro: Pure semantic HTML, no client JS required --- <form action="https://normforms.com/f/YOUR_TOKEN" method="POST"> <label for="nf-name">Name</label> <input id="nf-name" type="text" name="name" autocomplete="name" required> <label for="nf-email">Email</label> <input id="nf-email" type="email" name="email" autocomplete="email" required> <label for="nf-message">Message</label> <textarea id="nf-message" name="message" required></textarea> <!-- Invisible honeypot stops bots before they reach your inbox --> <input type="text" name="_gotcha" style="display:none" tabindex="-1" autocomplete="off"> <button type="submit">Send Inquiry</button> </form>
You can style this component using Astro scoped styles, Tailwind CSS, or your existing stylesheet.
Keep the honeypot: The hidden _gotcha input acts as an invisible trap for bots. Automated scripts fill it in automatically, allowing NormForms to drop spam silently without interrupting real visitors with annoying CAPTCHA puzzles.
Step 3: Test locally in development
Start your local development server with npm run dev and submit the form from localhost:4321.
Submissions from localhost are automatically handled in test mode:
- Notifications arrive in your inbox with a [Test] subject prefix.
- Test submissions consume 0 quota against your monthly allowance.
Step 4: Lock to your production domain
When you deploy your Astro site (whether on Cloudflare Pages, Netlify, Vercel, or GitHub Pages), open your form settings in NormForms and enter your live website domain (e.g. example.com).
This activates our domain origin lock, ensuring that automated spammers attempting to submit directly to your endpoint from other servers are turned away.
Lead protection and peace of mind
Unlike DIY serverless setups that silently fail when mail tokens expire, NormForms archives every submission in your private dashboard before email delivery. Even if an email provider glitches, your prospective customer's message is preserved.