Guide

Add a contact form to an Astro site

Astro's default output is static HTML, which is great for speed and useless for receiving a POST. Point the form at an endpoint instead and it works with zero client-side JavaScript, exactly how Astro likes it.

Step 1: Get an endpoint

Create a form in the dashboard, copy the endpoint, and verify the email address you want notified.

Step 2: Make a component

Drop this in src/components/ContactForm.astro and replace YOUR_FORM_ID:

---
// src/components/ContactForm.astro
const endpoint = "https://forms.scrolltheory.media/f/YOUR_FORM_ID";
---
<form action={endpoint} method="POST">
  <label>Name
    <input type="text" name="name" required />
  </label>

  <label>Email
    <input type="email" name="email" required />
  </label>

  <label>Message
    <textarea name="message" rows="5" required></textarea>
  </label>

  <!-- hidden spam honeypot: leave empty -->
  <input type="text" name="_gotcha" tabindex="-1" autocomplete="off"
         style="position:absolute;left:-9999px" aria-hidden="true" />

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

No client: directive needed. This renders to plain HTML at build time and submits like a normal form.

Step 3: Use it on a page

---
// src/pages/contact.astro
import Layout from "../layouts/Layout.astro";
import ContactForm from "../components/ContactForm.astro";
---
<Layout title="Contact">
  <h1>Contact</h1>
  <ContactForm />
</Layout>

Build, deploy, and send a test. The submission appears in your dashboard and arrives at your verified email.

Want an inline success state?

If you prefer to keep the visitor on the page, make the form an island and post JSON with fetch. The component in the React guide drops into Astro as-is with a client:load directive, or adapt the same fetch call for Svelte or Vue. The endpoint accepts cross-origin JSON posts and replies with { ok: true } on success.

Redirect to your own thank-you page

Add a hidden field inside the form and the visitor lands there after submitting:

<input type="hidden" name="_next" value="https://yoursite.com/thanks" />

Get your endpoint

Create a form on the free plan and you get an endpoint to drop into any of the examples above. Every submission is stored and spam is quarantined rather than deleted, so a false positive never costs you a real lead.

Start free Read the docs