Create contact form with hugo

To create a contact form with Hugo and FabForm, follow these steps:

Prerequisites:

• Hugo installed on your system.
• Basic knowledge of Markdown and HTML.
• A working Hugo project.
• Internet access for FabForm to process form submissions.

Step-by-Step Guide:

1. Set up your Hugo Project

If you don't have a Hugo project set up yet, you can create one using the following command:

hugo new site my-hugo-site

Navigate to your site directory:

cd my-hugo-site

You can use any Hugo theme, or create your own layout.

2. Install FabForm

FabForm provides a serverless form backend for handling form submissions.

Add the FabForm library by including its script in your contact form. It doesn’t require installing any libraries in Hugo since FabForm handles form submissions directly via HTML and POST.

3. Create the Contact Form

Create a new page for your contact form. Run this command to generate a new Markdown file in the content folder:

hugo new contact.md

In your contact.md file, add front matter and content. Example:

---
title: "Contact"
date: 2024-10-02
layout: "contact"
---

This will use a custom layout contact.html.

4. Design the Form in contact.html

Create a contact.html layout in layouts/_default/ (or layouts/partials/ depending on your theme structure).

Here’s a basic example of an HTML form integrated with FabForm:

<form action="https://fabform.io/f/<your-fabform-id>" 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" rows="5" required></textarea>

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

5. Configure FabForm

To use FabForm:

• Go to the FabForm website.
• Sign up and create a new form.
• Copy your FabForm endpoint (URL starting with https://fabform.io/f/).
• Replace <your-fabform-id> with your actual form ID in the HTML action.

6. Add a Success/Failure Page

FabForm lets you redirect users after submission. You can specify this in the form as:

<input type="hidden" name="_redirect" value="https://your-site.com/thank-you/">

Create a "Thank You" page in Hugo to handle the redirect after successful form submissions.

7. Test the Form

Run Hugo locally to test the form:

hugo serve

Ensure the form submits correctly, and FabForm processes the data. When deploying the site, the form will work as long as FabForm is live and your internet connection is functional.

8. Deploy Your Hugo Site

Once everything is working, deploy your Hugo site using any platform (e.g., Netlify, GitHub Pages, etc.). The form will send submissions to FabForm's backend.

Example Directory Structure:

my-hugo-site/
├── content/
│   └── contact.md
├── layouts/
│   └── _default/
│       └── contact.html

By following these steps, you'll have a contact form that works with Hugo and FabForm.

Checkout the form backend service
Fabform.io