Creating a contact form in a Hugo site using FabForm involves several steps. Hugo is a popular static site generator, and FabForm is a form handling service. Here’s a step-by-step guide to integrate a contact form into a Hugo site using FabForm:

Step-by-Step Guide

1. Set Up Hugo Project:

   • If you haven’t already, install Hugo and create a new site:

     brew install hugo
     hugo new site my-website
     cd my-website

2. Install a Theme:

   • Choose a Hugo theme you like from the Hugo themes website and follow the instructions to install it. For this example, we’ll use the Ananke theme.
   • Install the Ananke theme:

     git init
     git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke

3. Configure Your Site:

   • Edit the config.toml file to use the Ananke theme:

     baseURL = "http://example.org/"
     languageCode = "en-us"
     title = "My New Hugo Site"
     theme = "ananke"

4. Create a Contact Page:

   • Create a new contact page:

     hugo new contact.md

   • Open the content/contact.md file and set its content:

     ---
     title: "Contact"
     draft: false
     ---
     
     <form action="https://fabform.io/f/YOUR_FORM_ID" method="POST">
       <div>
         <label for="name">Name:</label><br>
         <input type="text" id="name" name="name" required><br>
       </div>
       <div>
         <label for="email">Email:</label><br>
         <input type="email" id="email" name="email" required><br>
       </div>
       <div>
         <label for="message">Message:</label><br>
         <textarea id="message" name="message" required></textarea><br>
       </div>
       <div>
         <input type="submit" value="Submit">
       </div>
     </form>

5. Configure FabForm:

   • Sign up on FabForm.
   • Create a new form to get your form ID.
   • Configure the form settings on FabForm to handle submissions (e.g., set up email notifications, response messages, etc.).

6. Update Navigation:

   • Edit your config.toml file to add the contact page to the navigation:

     [[menu.main]]
     name = "Home"
     url = "/"
     weight = 1
     
     [[menu.main]]
     name = "Contact"
     url = "/contact/"
     weight = 2

7. Test Your Site:

   • Serve your Hugo site locally to test the form:

     hugo server

   • Navigate to http://localhost:1313/contact/ to ensure your contact form appears correctly and can submit data.

8. Deploy Your Site:

   • Build your Hugo site:

     hugo

   • Deploy the site using your preferred method (e.g., GitHub Pages, Netlify, Vercel, etc.).

Example Hugo Configuration (config.toml):

baseURL = "http://example.org/"
languageCode = "en-us"
title = "My New Hugo Site"
theme = "ananke"

[menu]
  [[menu.main]]
  name = "Home"
  url = "/"
  weight = 1

  [[menu.main]]
  name = "Contact"
  url = "/contact/"
  weight = 2

Example Contact Page (content/contact.md):

---
title: "Contact"
draft: false
---

<form action="https://fabform.io/f/YOUR_FORM_ID" method="POST">
  <div>
    <label for="name">Name:</label><br>
    <input type="text" id="name" name="name" required><br>
  </div>
  <div>
    <label for="email">Email:</label><br>
    <input type="email" id="email" name="email" required><br>
  </div>
  <div>
    <label for="message">Message:</label><br>
    <textarea id="message" name="message" required></textarea><br>
  </div>
  <div>
    <input type="submit" value="Submit">
  </div>
</form>

By following these steps, you will have a fully functional contact form on your Hugo site that integrates with FabForm for handling submissions.