Hugo Guide

Add A Contact Form To Hugo

Here is a guide for integrating Fabform with a Hugo site:

---

Step 1: Create a new Hugo site

If you haven’t set up a Hugo site yet:

1. Install Hugo: You can install Hugo via Homebrew:

   brew install hugo

2. Create Hugo Site: Run the following commands to create a new Hugo site named quickstart:

   hugo new site quickstart
   cd quickstart

3. Start Hugo Server: Launch the Hugo development server:

   hugo server -D

Hugo will start a hot-reloading development environment accessible at http://localhost:1313/.

Step 2: Add a Contact Form to your Hugo site

1. Create Contact Page: Inside the content directory of your Hugo site, create a new markdown file named contact.md.

2. Update Contact Page Content: Replace the content of contact.md with the following code block:

   ---
   title: Contact Us
   date: 2020-11-27 17:30:49
   ---
   
   <form accept-charset="UTF-8" action="https://fabform.io/f/{your-form-endpoint}" method="POST">
       <input type="email" name="email" placeholder="Your Email">
       <input type="text" name="name" placeholder="Your Name">
       <input type="text" name="message" placeholder="Your Message">
       <button type="submit">Send</button>
   </form>

   Note: Replace {your-form-endpoint} with the unique form endpoint provided by Fabform.

Step 3: Run your Hugo site locally to finalize setup

1. Start Hugo Server: Run the following command to see your Hugo form in action at localhost:1313/contact/:

   hugo server -D

That’s it! Your Hugo site is now integrated with Fabform for handling form submissions.