Building a Dynamic Contact Form for Your Hugo Static Website
Tags: webdev, hugo, tutorial, forms
Published: 2024-01-12 04:04:25

# Building a Dynamic Contact Form for Your Hugo Static Website

Pro Tip. Another great tutorial on how to create a [Hugo Contact Form](https://fabform.io/)

Creating a dynamic contact form for your Hugo static website can be a rewarding endeavor that enhances user interaction. In this step-by-step guide, we'll walk through the process of integrating a contact form using Hugo, HTML, and a sprinkle of JavaScript. Get ready to add a touch of interactivity to your static site!

## Prerequisites

Before we dive in, ensure you have the following tools and dependencies installed:

- [Hugo](https://gohugo.io/getting-started/installing/) - Our static site generator.
- A Hugo theme (or your custom theme).
- Basic knowledge of HTML, CSS, and JavaScript.

## Step 1: Create a Contact Page

Start by creating a new Hugo content file for your contact page. Open your terminal and navigate to your Hugo site's root directory. Run the following command:

```bash
hugo new contact.md
```

This will generate a new Markdown file (`content/contact.md`).

## Step 2: Design the Form

Edit your `contact.md` file and add the HTML structure for the contact form. Here's a simple form template to get you started:

```html
---
title: "Contact"
date: 2024-01-12T12:00:00+00:00
---

<form id="contact-form">
    <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">Submit</button>
</form>
```

## Step 3: Add JavaScript for Form Submission

Let's make the form interactive by handling form submissions. Create a new JavaScript file (e.g., `contact.js`) in your site's static directory. Add the following code:

```javascript
document.addEventListener('DOMContentLoaded', function () {
    const contactForm = document.getElementById('contact-form');

    contactForm.addEventListener('submit', function (event) {
        event.preventDefault();

        // Your form submission logic goes here

        // For now, let's just log the form data
        const formData = new FormData(contactForm);
        for (let [key, value] of formData.entries()) {
            console.log(`${key}: ${value}`);
        }
    });
});
```

Include this JavaScript file in your contact page by adding the following line to the front matter of `contact.md`:

```yaml
---
title: "Contact"
date: 2024-01-12T12:00:00+00:00
js: ["contact.js"]
---
```

## Step 4: Implement Backend for Form Submission

For simplicity, let's use a [Form backend service](https://fabform.io/) to handle form submissions. Update the form's opening tag in `contact.md` to include your FabForm endpoint:

```html
<form id="contact-form" action="https://fabform.io/f/your-fabform-endpoint" method="POST">
   <form action="https://fabform.io/f/xxxxx" method="post">
  <label for="firstName">First Name</label>
  <input name="firstName" type="text" required>
  <label for="lastName">Last Name</label>
  <input name="lastName" type="text" required>
  <label for="email">Email</label>
  <input name="email" type="email" required>
  <button type="submit">Send</button>
</form>        
</form>
```

Replace `xxxxx` with your actual fabform form id.

## Step 5: Test Your Contact Form

Serve your Hugo site using the following command:

```bash
hugo server -D
```

Visit `http://localhost:1313/contact` in your browser and test the contact form. Fill in the details and click the submit button. Open your browser console to see the logged form data.

## Conclusion

Congratulations! You've successfully integrated a dynamic contact form into your Hugo static website. Customize the form's design, implement a serverless backend, or explore other form-handling services to suit your needs. Enjoy the enhanced interactivity and engagement on your static site!