How to build a contact form in Astro

Astro is a modern static site generator that allows you to create fast, content-focused websites. Building a contact form in Astro is a straightforward process that involves setting up a basic site, adding a contact page, and then integrating the form with a form backend service. In this guide, we will walk you through the steps to create a contact form in Astro using Web3Forms, a free form API that sends form submissions to your email without requiring server or backend code.

Sample contact form by Web3Templates

Setting Up a Basic Astro Site

To start, you need to set up a basic Astro site using npm. Run the following command in your terminal:

npx create-astro@latest

This command will create a new Astro project in a directory named after your project. Navigate into the project directory and run the following command to start the development server:

npm run start

Adding a Contact Page

Next, you need to add a contact page to your Astro site. Create a new file in the src/pages directory and name it contact.astro. This file will contain the HTML and JavaScript code for your contact form.

Adding a Simple Form with Inputs

In the contact.astro file, add the following code to create a simple form with inputs for name, email, and message:

<form id="form" method="POST">
  <label>First Name</label>
  <input type="text" name="name" placeholder="First name" required />

  <label>Email</label>
  <input type="email" name="email" inputmode="email" placeholder="Email Address" required />

  <label>Message</label>
  <textarea name="message" rows="4" placeholder="Message" required></textarea>

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

Setting Up Web3Forms

To begin using Web3Forms, the first step is to acquire an Access Key by visiting the Web3Forms and entering your email address. Upon submission, you will receive the Access Key in your email inbox. It’s important to note that this Access Key is a public key, not a secret API key.

Once you have obtained your access_key, follow the steps:

1. Change the form action to this URL: https://api.web3forms.com/submit
2. Add a hidden access_key input field and the replace with your actual `access_key` received in the email.

In your contact.astro file, add the following code:

<form id="form" action="https://api.web3forms.com/submit" method="POST">

  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY_HERE" />

  <!-- rest of the form code -->

</form>

Now, submit the form and you will get an email with the submitted data. Easy right? Web3forms provides a lot of customization options like changing subject, from_name, and pro features like CC Email, Attachments, Autoresponder, etc.

Check out the docs for the advanced customization option: docs.web3forms.com

Advanced Example with JavaScript

To send the form data to Web3Forms using JavaScript, you can use the Fetch API to make a POST request to their API endpoint. Here’s an example of how you can do this:

const form = document.getElementById('form');
const url = 'https://api.web3forms.com/submit';

form.addEventListener('submit', (e) => {
  e.preventDefault();
  const formData = new FormData(form);
  fetch(url, {
    method: 'POST',
    body: formData,
  })
   .then(async (response) => {
      let json = await response.json();
      if (response.status == 200) {
        alert('Form submitted successfully!');
      } else {
       alert('Error submitting form!');
       console.log(response);
      }
    })
    .catch((error) => {
      console.error('Error submitting form:', error);
    });
});

Conclusion

In this guide, we have shown you how to build a contact form in Astro using Web3Forms. Following these steps, you can quickly set up a contact form on your Astro site without requiring server or backend code. Astro and Web3Forms make it easy to create a contact form that sends form submissions to your email, allowing you to stay connected with your visitors and customers.