# Astro form to email

> Add a working form to an Astro site with FormDoc. A reusable component, no JavaScript or server endpoint, and a fix for View Transitions.

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](https://app.formdoc.dev/new):

ASTRO

```astro
---
// 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

ASTRO

```astro
---
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:

ASTRO

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

## Next

-   Send visitors to your own page after submitting: add a hidden `redirect` field (see [send an HTML form to email](https://www.formdoc.dev/docs/)).
-   Every field and error code: [API reference](https://www.formdoc.dev/docs/api-reference/).