Astrobuild tutorial with Contact Form

AstroBuild Tutorial with Contact Form Using Fabform

What is Astro?

Astro is a modern static site generator (SSG) built for speed and optimized for creating fast, SEO-friendly websites. It supports multiple front-end frameworks, making it easy to integrate technologies like React, Vue, Svelte, or even vanilla JavaScript in your project. Astro ships less JavaScript, meaning faster loading times and better performance overall.

In this tutorial, we will cover the following steps:

Setting up an Astro project
Creating pages and layouts
Adding components
Integrating a contact form using Fabform.io

Prerequisites

Before getting started, make sure you have the following installed:

Node.js (v16 or later)
A code editor (like VSCode)
Familiarity with HTML, CSS, and JavaScript

Step 1: Setting Up an Astro Project

1.1 Install Astro

First, you need to create a new Astro project. Open your terminal and run the following command:

npm create astro@latest

This will prompt you to give your project a name. Choose a name for your project and proceed with the setup. You can go with the default settings for simplicity.

1.2 Navigate to Your Project

Once the project has been set up, navigate into your project directory:

cd your-project-name

1.3 Run the Development Server

To start the development server, run the following command:

npm run dev

Your Astro project should now be running at http://localhost:3000.

Step 2: Creating Pages

2.1 Creating a Homepage

Astro uses a file-based routing system. To create a homepage, navigate to the src/pages/ directory and create a file called index.astro.

src/pages/index.astro

In index.astro, add the following code:

---
title = "Home"
---

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{title}</title>
  </head>
  <body>
    <h1>Welcome to My Astro Site</h1>
    <p>This is the homepage created using Astro.</p>
  </body>
</html>

Astro uses the frontmatter syntax (the --- block at the top) to declare variables that can be used within the file.

2.2 Creating an About Page

Similarly, create an about.astro file in the src/pages/ directory for an About page.

src/pages/about.astro

Add the following code:

---
title = "About"
---

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{title}</title>
  </head>
  <body>
    <h1>About Us</h1>
    <p>This is the About page of our Astro project.</p>
  </body>
</html>

Visit http://localhost:3000/about to see the new page.

Step 3: Adding Layouts

To avoid repetition, Astro supports layouts. Let’s create a basic layout for our site.

3.1 Creating a Layout

Create a src/layouts/ directory and a new file called MainLayout.astro.

src/layouts/MainLayout.astro

Add the following code for the layout:

---
title = "My Astro Site"
---

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{title}</title>
  </head>
  <body>
    <header>
      <h1>Welcome to {title}</h1>
      <nav>
        <a href="/">Home</a> | 
        <a href="/about">About</a>
      </nav>
    </header>
    <main>
      <slot />
    </main>
    <footer>
      <p>&copy; 2024 My Astro Site</p>
    </footer>
  </body>
</html>

3.2 Using the Layout in Pages

Now, let’s update the index.astro and about.astro files to use this layout.

For index.astro, replace the code with:

---
import MainLayout from '../layouts/MainLayout.astro';
title = "Home"
---

<MainLayout>
  <h2>Welcome to My Astro Site</h2>
  <p>This is the homepage created using Astro.</p>
</MainLayout>

Similarly, for about.astro, replace the code with:

---
import MainLayout from '../layouts/MainLayout.astro';
title = "About"
---

<MainLayout>
  <h2>About Us</h2>
  <p>This is the About page of our Astro project.</p>
</MainLayout>

Now, both pages share a common layout for consistency across the site.

Step 4: Adding a Contact Form Using Fabform.io

Fabform.io is a simple service that lets you add forms to your website without requiring a back-end. You just need to integrate their form endpoint, and Fabform handles the rest.

4.1 Create a Contact Page

Create a new file contact.astro inside the src/pages/ directory.

src/pages/contact.astro

Add the following code for a basic contact form:

---
import MainLayout from '../layouts/MainLayout.astro';
title = "Contact"
---

<MainLayout>
  <h2>Contact Us</h2>
  <form action="https://fabform.io/f/your-form-endpoint" method="POST">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required />

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

    <label for="message">Message:</label>
    <textarea id="message" name="message" required></textarea>

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

4.2 Customize Fabform Endpoint

Go to Fabform.io and sign up for an account.
Create a new form and copy the form endpoint URL they provide.
Replace the https://fabform.io/f/your-form-endpoint in the form action with your unique form URL.

Now, when users submit the form, Fabform will handle the submission and send you the results via email or a service you configure.

Step 5: Final Touches

You now have a simple, fast website with Astro, complete with multiple pages, a shared layout, and a contact form powered by Fabform.io.

Folder Structure:

├── src
│   ├── layouts
│   │   └── MainLayout.astro
│   ├── pages
│   │   ├── about.astro
│   │   ├── contact.astro
│   │   └── index.astro
└── package.json

Run npm run dev to preview your site again and ensure everything works as expected.

Conclusion

Astro makes it incredibly easy to build static websites with minimal JavaScript and high performance. By using its features like layouts and component-based architecture, we can keep our code clean and reusable. Adding a contact form using Fabform.io ensures you can easily collect user feedback without worrying about building a back-end.

Feel free to expand this project by integrating additional components or frameworks, like React or Svelte, to explore Astro's full capabilities!

Blog

Astrobuild tutorial with Contact Form

Geoff