How to Add a Contact Form to an Astro Site (No Server Needed)

A contact form seems simple until you remember what an Astro site is: a folder of files with no computer behind it to receive anything. The fix is a form service. Your form posts to them, they email you. Free, and about ten lines.

Step 1: Get an access key

We’ll use Web3Forms because it needs no account to start. Go to web3forms.com, type the email address that should receive messages, and it sends you an access key. The key is a long string of letters and numbers. It’s safe to put in your page. It only says where messages go.

Formspree works the same way with an account, and its free plan allows 50 messages a month. If you’d rather use it, the form below is almost the same. Swap the action for the address Formspree gives you.

Step 2: Make the page

Create src/pages/contact.astro:

---
import Layout from '../layouts/Layout.astro';
---
<Layout>
  <main>
    <h1>Contact</h1>
    <form action="https://api.web3forms.com/submit" method="POST">
      <input type="hidden" name="access_key" value="YOUR-ACCESS-KEY-HERE" />
      <input type="checkbox" name="botcheck" style="display: none;" tabindex="-1" autocomplete="off" />
      <label>Your name <input type="text" name="name" required /></label>
      <label>Your email <input type="email" name="email" required /></label>
      <label>Message <textarea name="message" required></textarea></label>
      <button type="submit">Send</button>
    </form>
  </main>
</Layout>

Replace YOUR-ACCESS-KEY-HERE with the key from step 1.

Three lines are doing the work:

• The action is where the form sends its contents. That’s the service.
• The hidden access_key tells the service which inbox to use.
• The botcheck box is a honeypot. People never see it, so they never tick it. Bots fill in every field, including this one, and the service throws those away.

Step 3: Try it

Run npm run dev, open localhost:4321/contact, fill in the form, and press Send. The service shows a thank-you page, and the message lands in your inbox within a minute.

We built this page on Astro 7.4 and the form rendered exactly as written. We didn’t send a test message, because that needs a real key tied to a real inbox. Yours will.

Add a thank-you page

Make src/pages/thanks.astro with a short message. Then add this line inside the form:

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

Use your real address. After sending, people land on your own page instead of the service’s.

If spam gets through

The honeypot stops most bots. If some still arrive, both services support a captcha. Web3Forms works with hCaptcha and Cloudflare Turnstile. It’s a few more lines and their docs show them. Turn it on only if you need it. Every extra step loses a few real messages.

Where to go next

• How to start a newsletter, which uses the same idea: a form that posts to a service.
• Astro Actions, in Astro’s docs, for when you’re ready to handle forms with your own code on a server.

Frequently asked questions

Why can't my Astro form just send me an email?

An Astro site is a folder of files. Files can't send email. A form service receives the message and emails it to you. Web3Forms and Formspree both do this for free.

Will I get spam?

Some. The hidden honeypot field in this guide catches most bots. If more gets through, both services offer a captcha you can switch on.

Can I style the form?

Yes. It's normal HTML, so your site's CSS applies to it like anything else.