Written by: Geoffrey Callaghan

How To Create A Contact Form In Astro

How To Create A Contact Form In Astro

Astro is a modern static site generator, and incorporating a contact form with FabForm.io in an Astro project is quite straightforward. Here’s a step-by-step guide:

PRO Tip: You can download the Astrolize Astro Starter Template. It’s a smart looking responsive astro starter template that has a FabForm contact form already baked in. It will jumpstart your next project.

  1. Create a FabForm.io Account:

    • Sign up or log in to your FabForm.io account and create a new form. Take note of the form endpoint (URL).
  2. Create an Astro Project:

    • If you haven’t already, create a new Astro project using the following commands in your terminal:

      npx create-astro my-astro-app
      cd my-astro-app
  3. Install Axios:

    • Install Axios, a library for making HTTP requests, by running the following command:

      npm install axios
  4. Create a Contact Form Component:

    • In your src folder, create a new file for your contact form component, for example, ContactForm.astro. You can use Astro’s .astro file extension for mixed HTML and JavaScript components.

      import { defineState } from "astro-state";
      let state = defineState({
        name: '',
        email: '',
        message: '',
      const handleSubmit = async (e) => {
        try {
          await fetch('YOUR_FABFORM_ENDPOINT', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json',
            body: JSON.stringify(state),
          console.log('Form submitted successfully');
        } catch (error) {
          console.error('Error submitting form:', error);
      <form on:submit={handleSubmit}>
          <input bind:value={state.name} type="text" />
          <input bind:value={state.email} type="email" />
          <textarea bind:value={state.message}></textarea>
        <button type="submit">Submit</button>

    • Replace 'YOUR_FABFORM_ENDPOINT' with the actual endpoint URL you obtained from FabForm.io.
  6. Use the Contact Form Component:

    • Import and use the ContactForm component in your desired Astro page or layout:

      // src/pages/contact.astro
      import ContactForm from '../ContactForm.astro';
        <h1>Contact Us</h1>
        <ContactForm />
  7. Run Your Astro App:

    • Run your Astro application using the following command:

      npm run start

    Visit your contact page (http://localhost:3000/contact by default) and test the contact form.

By following these steps, you should be able to integrate a contact form with FabForm.io into your Astro project. Remember to customize the form and styling according to your needs.