Beginner4 min

How to Add a Contact Form to Astro

Add a working contact form to your Astro site in minutes. No server endpoints, no API routes — just HTML and FormsList.

Prerequisites

  • An Astro project
  • A FormsList account (free plan works)
1

Create a FormsList account

Sign up at formslist.com and create a new form. Copy the form hash from your dashboard — you'll need it for the form action URL.

2

Create the contact page

Create a new page in your Astro project at `src/pages/contact.astro`. Astro pages use `.astro` file format which supports standard HTML.

---
// src/pages/contact.astro
const title = 'Contact Us';
---

<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>{title}</title>
</head>
<body>
  <h1>{title}</h1>
  <form action="https://formslist.com/f/YOUR_FORM_HASH" method="POST">
    <label for="name">Name</label>
    <input id="name" name="name" type="text" required />

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

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

    <button type="submit">Send</button>
  </form>
</body>
</html>
3

Replace YOUR_FORM_HASH

Replace `YOUR_FORM_HASH` in the form action with the hash from your FormsList dashboard. This is the unique identifier for your form endpoint.

4

Add a redirect (optional)

Add a hidden input to redirect users after submission: `<input type="hidden" name="_redirect" value="https://yoursite.com/thanks" />`

5

Deploy and test

Deploy your Astro site (Vercel, Netlify, Cloudflare Pages, etc.) and submit a test entry. Check the FormsList dashboard to verify the submission arrived.

Frequently Asked Questions

Ready to collect form submissions?

Set up your form backend in under a minute. No server required, no complex configuration — just a simple endpoint for your forms.