Hugo Installation

Step 1 — Create new form endpoint on Getform

All that's required is a name for your form. You specify a name, and Getform will provide a unique form endpoint to identify your Hugo form.

Step 2 — Prepare your Hugo contact form for your website

You can use the boilerplate code provided on Getform to create your HTML form. It is a basic contact form with email address, name and message fields:

<form accept-charset="UTF-8" action="https://getform.io/f/{unique-endpoint-generated-on-step-1}" 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>

Step 3 — Create a new Hugo site

If you have a Hugo site already setup and running, you can skip to Step 4. If you are setting up your site from scratch, run the following commands to start setting up your Hugo site.

$ brew install hugo
$ hugo new site quickstart
$ cd quickstart
$ hugo server -D

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

Step 4 - Add a Contact Section to your Hugo site

Create a new markdown file and name it as contact.md file under content directory, change its content with the following code block:

---
title: Contact Us
date: 2020-11-27 17:30:49
---
<form accept-charset="UTF-8" action="https://getform.io/{unique-endpoint-generated-on-step-1}" 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>

Step 5 - Run your Hugo site locally to finalize setup

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 running Getform.