How to Add a Contact Form to Your Astro Website
Astro is a modern web framework that generates fast, static HTML by default. While this is great for performance, it means your site has no built-in way to process form submissions. You need a form backend service to handle the server-side work — receiving data, sending emails, and protecting against spam.
In this tutorial, you will learn how to add a fully functional contact form to your Astro website using Static Forms. We will cover two approaches: a simple HTML form and a more interactive JavaScript-powered version.
Prerequisites
Before you begin, make sure you have:
- An Astro project set up and running
- A Static Forms account — sign up for free
- Your API key from the Static Forms dashboard
Approach 1: Simple HTML Form
The simplest way to add a contact form to Astro is with a plain HTML form. No JavaScript required — the form submits directly to the Static Forms endpoint.
Create a new page at src/pages/contact.astro:
Replace YOUR_API_KEY_HERE with your actual API key. The replyTo field set to @ uses the submitter's email as the reply-to address. The hidden honeypot field provides basic bot protection.
This approach works immediately with zero client-side JavaScript. When a user submits the form, they are redirected to a Static Forms confirmation page. You can customize this by adding a redirectTo hidden field with your own thank-you page URL.
Approach 2: Async Fetch with Client-Side JavaScript
For a smoother user experience without page redirects, you can use Astro's client-side scripting to submit the form via fetch:
Environment Variables
Instead of hardcoding your API key, store it in an environment variable. Create a .env file in your project root:
Astro exposes variables prefixed with PUBLIC_ to client-side code via import.meta.env. This keeps your key out of source control while still making it available in the browser. Note that form API keys are safe to expose client-side since they are tied to your verified email address.
Adding reCAPTCHA Spam Protection
For stronger spam protection, add reCAPTCHA to your form. First, get your site key from the Google reCAPTCHA Admin Console, then configure your secret key in your Static Forms CAPTCHA settings.
Add the reCAPTCHA script to your layout's <head> and include the widget in your form:
When submitting via JavaScript, include the reCAPTCHA response token in your request body:
For a deeper dive into reCAPTCHA, see our understanding reCAPTCHA guide.
Astro-Specific Documentation
For more detailed Astro integration instructions, including component examples and advanced configuration, check out our Astro documentation page.
Next Steps
You now have a working contact form on your Astro site. Static Forms handles email delivery, spam protection, and submission storage so you can focus on building your site.
On the Pro plan, you also get access to file uploads, webhooks, auto-responders, and custom email templates. Sign up for Static Forms to get started with 500 free submissions per month.
Related Articles
The Complete Guide to Contact Forms on JAMstack Sites
Learn how to add contact forms to JAMstack and static websites without a backend. Works with Next.js, Gatsby, Hugo, Jekyll, Astro, and more.
How to Add a Contact Form to GitHub Pages
Learn how to add a fully functional contact form to your GitHub Pages site without any backend code. Complete tutorial with working examples.
Adding Contact Forms to Static Websites Guide
Learn how to easily add fully functional contact forms to your static website without backend code using a form endpoint service.