FormDoc
Sign in Create your form

Astro form to email

Astro builds fast pages, but a static Astro site can’t receive a form submission on its own. Point the form at FormDoc and every submission is emailed to you, with no API route or adapter.

1. Create the component

Save this as src/components/ContactForm.astro and replace the key with yours from app.formdoc.dev/new:

---
// Works on static and server-rendered Astro sites. No JavaScript required.
const accessKey = "YOUR_ACCESS_KEY";
---
<form action="https://api.formdoc.dev/v1/submit" method="POST">
  <input type="hidden" name="access_key" value={accessKey}>

  <label for="fd-name">Name</label>
  <input type="text" id="fd-name" name="name" autocomplete="name" required>

  <label for="fd-email">Email</label>
  <input type="email" id="fd-email" name="email" autocomplete="email" required>

  <label for="fd-message">Message</label>
  <textarea id="fd-message" name="message" rows="5" required></textarea>

  <!-- Spam trap: leave this hidden and empty. -->
  <input type="checkbox" name="botcheck" style="display:none" tabindex="-1" autocomplete="off">

  <button type="submit">Send</button>
</form>

2. Use it on a page

---
import ContactForm from "../components/ContactForm.astro";
---
<ContactForm />

Using View Transitions?

Astro’s client-side router can try to handle form submissions itself. If submitting shows an error or does nothing, add data-astro-reload to the form so the browser posts it normally:

<form action="https://api.formdoc.dev/v1/submit" method="POST" data-astro-reload>

Next