Astro guide
Astro contact form powered by Formserve
Use a plain HTML form in Astro or enhance it with client-side JavaScript.
Overview
What you are building
Astro is ideal for static sites, and static sites still need working forms. Formserve lets your Astro page use plain HTML while the backend, inbox, spam protection, and notifications live outside the project.
Requirements
Before you start
Static form markup
A normal form in an .astro page is enough.
Endpoint action
Set action to the Formserve endpoint URL.
POST method
Use method='POST' for browser submissions.
Production domain
Add your deployed Astro domain to allowed domains.
Setup steps
Connect the form
Create the endpoint
Name it after the page or campaign the Astro form belongs to.
Paste the endpoint URL
Use it directly in the form action attribute.
Add fields and honeypot
Use named inputs and the hidden _honeypot field.
Deploy and submit
Test from the live Astro site, not only the local dev server.
Code
Minimal HTML contract
Every framework eventually sends these same fields. If your tool generates a component, ask it to preserve styling and only adjust the submission behavior.
---
// src/pages/contact.astro
---
<form action="https://formserve.io/f/YOUR_ENDPOINT_KEY" method="POST">
<input name="_honeypot" tabindex="-1" autocomplete="off" style="position:absolute;left:-9999px" />
<input name="email" type="email" required />
<textarea name="message" required></textarea>
<button type="submit">Send</button>
</form>
Testing checklist
- ✓ Use plain HTML first before adding client JavaScript.
- ✓ Confirm the form submits from the built site.
- ✓ Add allowed domains for the production URL.
- ✓ Check Formserve inbox and delivery status.
Common mistakes
- ! Adding a server adapter only for contact forms.
- ! Forgetting method='POST'.
- ! Testing only with astro dev.
- ! Using fields without names.