Home > Web Front-end > JS Tutorial > body text

Astrobuild tutorial with Contact Form

Patricia Arquette
Release: 2024-10-04 22:23:30
Original
298 people have browsed it

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:

  1. Setting up an Astro project
  2. Creating pages and layouts
  3. Adding components
  4. 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


Copy after login

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


Copy after login

1.3 Run the Development Server

To start the development server, run the following command:


npm run dev


Copy after login

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


Copy after login

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>


Copy after login

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


Copy after login

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>


Copy after login

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


Copy after login

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>


Copy after login

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>


Copy after login

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>


Copy after login

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


Copy after login

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>


Copy after login

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


Copy after login

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!

The above is the detailed content of Astrobuild tutorial with Contact Form. For more information, please follow other related articles on the PHP Chinese website!

source:dev.to
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template