Logo for FormBackend
« back to blog
guides

How to create a form using Astro

Astro is a modern web framework for building fast, content-driven websites. Since Astro generates static HTML by default, it doesn’t include a built-in way to handle form submissions. FormBackend fills that gap by giving your Astro forms a backend endpoint that handles submissions, sends notifications, and stores the data for you.

In this guide, we’ll create a contact form in Astro and connect it to FormBackend so you can start collecting submissions without writing any server-side code.

Create your form endpoint in FormBackend

First, create a FormBackend account if you don’t have one. Then create a new form and give it a name you can remember, for example “Astro Contact Form”. It can always be changed later and is only used for you to find your form.

After creating the form, go to the Set Up tab and copy the unique form URL. It will look something like https://www.formbackend.com/f/your-token-here. You’ll need this URL in a moment.

Create a new Astro app

If you already have an Astro site, skip to the next section. To create a new one, run:

npm create astro@latest

This will take you through a set of steps to create a new Astro app. Once the command finishes, cd into the directory you created your app in.

cd your-astro-app

Start the development server:

npm run dev

You can access your site on the URL shown in your terminal (usually http://localhost:4321).

Create the contact form page

Create a new file at src/pages/contact.astro. Astro uses .astro files for pages, which support a frontmatter section for imports and regular HTML for the template.

Add the following content:

---
import Layout from '../layouts/Layout.astro';
---

<Layout title="Contact us">
  <h1>Contact us</h1>
  <form method="POST" action="https://www.formbackend.com/f/your-token-here">
    <div>
      <label for="name">Name</label>
      <input type="text" id="name" name="name" required />
    </div>

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

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

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

Replace your-token-here with the form token you copied from FormBackend. Visit /contact in your browser and you should see the form.

This is a standard HTML form. The action attribute points to your FormBackend endpoint and method="POST" tells the browser to send the data as a POST request. No JavaScript needed.

Style the form with CSS

You can add styles directly in the Astro component using a <style> tag. Add this below the closing </Layout> tag:

<style>
  form {
    max-width: 480px;
  }

  div {
    margin-bottom: 1rem;
  }

  label {
    display: block;
    margin-bottom: 0.25rem;
    font-weight: 600;
  }

  input, textarea {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
  }

  button {
    background-color: #3498db;
    color: white;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
  }

  button:hover {
    background-color: #2980b9;
  }
</style>

Submit using JavaScript (optional)

The plain HTML form works perfectly, but if you want to avoid a page redirect after submission, you can submit the form with JavaScript using FormBackend’s AJAX support.

Add a <script> section to your Astro page:

<script>
  const form = document.querySelector('form');

  form.addEventListener('submit', async (e) => {
    e.preventDefault();

    const data = new FormData(form);
    const response = await fetch(form.action, {
      method: 'POST',
      body: data,
      headers: { 'accept': 'application/json' },
    });

    const result = await response.json();
    form.innerHTML = `<p>${result.submission_text}</p>`;
  });
</script>

This replaces the form with a thank-you message after successful submission, all without leaving the page.

Add spam protection

FormBackend includes built-in spam filtering on all forms, but you can add an extra layer of protection using one of the supported CAPTCHA services:

You can also add a honeypot field. Just include a hidden input with name="_honeypot" and FormBackend will reject submissions that fill it in:

<input type="text" name="_honeypot" style="display:none" tabindex="-1" autocomplete="off">

Set up notifications

Once your form is working, configure how you want to be notified about new submissions:

Next steps