How to create a form using Astro

Create your form endpoint in FormBackend

Go create a login and create a new form endpoint in FormBackend. Give it a name you can remember for example: “NextJS Contact Form” or something similar for this tutorial. It can always be changed later and is only used for you to remember your form.

Create a new Astro app

To create a new Astro app run the following

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 folder-to-your-astro-app

To start the server you can run npm run dev and access your site on the URL you see in your terminal.

Create our contact form page

Go ahead and create a new file named contact.js in the pages directory.

Let’s go ahead and add the following content which gives us a simple page with a heading and a form’

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

<Layout title="Contact us">
  <h1>Contact form</h1>
  <form method="POST" action="CHANGE_THIS">
    <div>
      <label>Name</label>
      <input type="text" name="name" />
    </div>

    <div>
      <label>Email</label>
      <input type="text" name="email" />
    </div>

    <div>
      <label>Message</label>
      <textarea name="message"></textarea>
    </div>

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

The above gives you a form with 3 fields: Name, Email and Message and a submit button with the text “Send message”.

If you go to your browser, you can add /contact to the url to the Astro server and you should be able to see the form.

Hook up the form to FormBackend

We need to change the form’s action-attribute to point to FormBackend. Go to FormBackend and if you don’t already have an account, create one and log in. Create a new form, and go to the Set up page and copy the unique form URL that we give you. Paste that as the value of the form’s action-attribute. Now when you submit the form, the submissions will be sent to FormBackend.