Building a Dynamic Contact Form for Your Hugo Static Website

Pro Tip. Another great tutorial on how to create a Hugo Contact Form

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 - 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:

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:

---
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:

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:

---
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 to handle form submissions. Update the form's opening tag in contact.md to include your FabForm endpoint:

<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:

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!