This content originally appeared on DEV Community and was authored by Geoff
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>© 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-endpointin 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!
This content originally appeared on DEV Community and was authored by Geoff
Geoff | Sciencx (2024-10-04T13:03:12+00:00) Astrobuild tutorial with Contact Form. Retrieved from https://www.scien.cx/2024/10/04/astrobuild-tutorial-with-contact-form/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.