At a glance
- Output mode
- Static
- SSR adapter
- Not needed
- JavaScript
- Optional
- Where it goes
src/components/Contact.astro- Hosts
- Any static host
The integration
Drop this HTML straight into your .astro component. Because the form posts to an external endpoint, the page stays fully static: no SSR adapter, no server output mode. The visitor lands on a branded success page, or on your own with a hidden _mtf_redirect field.
---
// src/components/Contact.astro
---
<form action="https://mtform.co/f/your-form-key" method="POST">
<label>
Name
<input name="name" autocomplete="name" required>
</label>
<label>
Email
<input type="email" name="email" autocomplete="email" required>
</label>
<label>
Message
<textarea name="message" required></textarea>
</label>
<!-- Spam trap: hidden from people, tempting to bots. Leave it empty. -->
<input
type="text"
name="_mtf_honeypot"
tabindex="-1"
autocomplete="off"
aria-hidden="true"
style="position:absolute;left:-9999px"
>
<button type="submit">Send</button>
</form>Step by step
- 1
Create the endpoint
Create a MakeTheForm form to get your public endpoint URL and inbox.
- 2
Point the form’s action at it
In your .astro component, set the <form> action to the endpoint and method to POST. Include the honeypot field named exactly _mtf_honeypot.
- 3
Keep it static, or go AJAX
Leave the page static for a full-page success redirect, or add the small client script above to show an inline message without reloading.
- 4
Verify and deploy
Verify your recipient email once, deploy to Netlify, Vercel, Cloudflare Pages, or GitHub Pages, and submit to confirm delivery.
Common pitfalls
Adding an SSR adapter just to catch a form
It’s tempting to switch Astro to server output and write an endpoint under src/pages/api. That turns a static site into a running server you deploy and maintain. Posting to an external endpoint keeps the whole site static.
Astro Actions still need a destination
Astro Actions handle the wiring, but they don’t send email, filter spam, or store anything. That logic is yours to write and host. If email plus spam plus a searchable inbox is all you want, an endpoint is less to build than an Action plus a mail service.
Troubleshooting
| Symptom | What’s happening | Fix |
|---|---|---|
| full page reload | The plain HTML form does a normal browser POST and navigates away. | That’s expected: add a hidden _mtf_redirect field pointing at your own page (on an allowed domain), or use the client-script version to stay on the page. |
| script does nothing | The <script> ran before the form existed, or lived in a different file. | Keep the script in the same .astro file as the form; Astro bundles component scripts and runs them after parse. |
| 403 | Allowed-domains is on and your deployed Astro domain isn’t listed. | Add your production domain in the form’s spam settings, or leave the form public. |
Frequently asked questions
How do I add a contact form to an Astro site?
Put a normal <form> in a .astro component, set its action to a form endpoint and method to POST, and include a honeypot field. The endpoint receives the submission, filters spam, and emails it to you: no server code in Astro.
Can an Astro static site send form submissions to email?
Yes. A static Astro build can’t email anything itself, but its form can POST to a hosted endpoint that does. You keep the site fully static and still get email delivery, spam filtering, and stored submissions.
Does Astro have built-in form handling?
Astro renders forms as plain HTML and, with server output, lets you read a POST in a page or an Action. It does not send email, filter spam, or store submissions. That part is yours to write, or you can post the form to an endpoint that does it.
Do I need Astro Actions or an SSR adapter for a form?
Not for a contact form. Actions and SSR let you run server code, but you’d still have to send email and filter spam yourself. Pointing the form at an endpoint keeps the site static and covers all of that.
Other platforms
Keep going
Last reviewed by the MakeTheForm team.