How to Build an Astro Blog With a Fabform Contact Form

Astro has become one of the most popular static site frameworks thanks to its speed, simplicity, and ability to ship zero JavaScript by default. It is ideal for blogs, documentation sites, marketing pages, and lightweight content‑driven projects.

One common requirement for Astro sites is a contact form. But because Astro outputs static HTML by default, you cannot process form submissions without a backend. That is where Fabform provides a clean, backendless solution.

This guide walks you through building an Astro blog and adding a fully functional contact form powered by Fabform.

If you are exploring other static‑site form setups, these guides may also be helpful:

Why Astro needs a backendless form solution

Astro generates static HTML files unless you explicitly opt into server‑side rendering. This means:

  • no built‑in backend
  • no server‑side form handling
  • no email sending
  • no storage for submissions

A normal HTML form will not work without a backend to receive the data.

Fabform solves this by providing:

  • a secure form endpoint
  • spam protection
  • email, Slack, and webhook notifications
  • a submission dashboard
  • CSV export
  • GDPR‑friendly storage

Your Astro site stays static while your form becomes fully functional.

Step 1 — Create a new Astro project

If you do not already have an Astro project, create one:

npm create astro@latest

Follow the prompts to set up your blog.
Choose the blog template if you want a ready‑made structure.

Install dependencies:

npm install

Start the development server:

npm run dev

Your Astro blog is now running locally.

Step 2 — Create your Fabform endpoint

  1. Visit https://fabform.io
  2. Create a free account
  3. Click “Create New Form”
  4. Copy your unique form endpoint:
https://fabform.io/f/your-form-id

You will paste this into your Astro contact page.

If you want to compare Fabform with other services, see:
Fabform vs Formspree

Step 3 — Add a contact page to your Astro blog

Create a new file:

src/pages/contact.astro

Add the following markup:

---
title: "Contact"
---

<h1>Contact</h1>

<form action="https://fabform.io/f/your-form-id" 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" required></textarea>
  </label>

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

Your form is now live.

No JavaScript.
No serverless functions.
No backend code.

For a version without serverless functions, see:
Astro Contact Form Without Serverless Functions

Step 4 — Style your form

Astro supports any CSS approach you prefer.
Here is a simple example using a <style> block:

<style>
  form {
    max-width: 500px;
    margin: 2rem 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  input, textarea {
    padding: 0.75rem;
    border: 1px solid #ccc;
    border-radius: 6px;
  }

  button {
    padding: 0.75rem;
    background: #000;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
  }
</style>

Step 5 — Test your form

Start your local server:

npm run dev

Visit:

http://localhost:4321/contact

Submit a test message.
You will see it appear instantly in your Fabform dashboard.

Step 6 — Deploy your Astro blog

You can deploy Astro to:

  • GitHub Pages
  • Netlify
  • Vercel
  • Cloudflare Pages
  • Any static host

If you are using one of these platforms, you may find these guides useful:

Troubleshooting

Form not submitting

Verify your action attribute:

https://fabform.io/f/your-form-id

Not receiving notifications

Check your Fabform notification settings.

Want a prebuilt Astro template

See:
Astro Template With Fabform Contact Form

Final Thoughts

Astro is one of the best frameworks for building fast, content‑focused websites. By pairing it with Fabform, you can add a fully functional contact form without writing any backend code.

Your site remains static.
Your workflow remains simple.
Your forms remain powerful.

Create your first form at https://fabform.io.