← All guides

Astro guide

Astro contact form powered by Formserve

Use a plain HTML form in Astro or enhance it with client-side JavaScript.

No backend API route Honeypot spam trap Works with any host

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

1

Create the endpoint

Name it after the page or campaign the Astro form belongs to.

2

Paste the endpoint URL

Use it directly in the form action attribute.

3

Add fields and honeypot

Use named inputs and the hidden _honeypot field.

4

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.