Adding a contact forms to a Hugo website

What is Hugo?

Hugo is a static site generator, written in Go. Based on one or more themes, you can easily build an entire site, by just focusing on the content. Hugo is our favourite static site generator and CMS! In fact, the site you are visiting right now, is fully generated with Hugo!

Contact Form for Hugo

Even on static sites that you’ve built with Hugo, you still want to be able to interact with your visitors. And in most cases that involves forms. Form handling requires a script on your server to handle the form. But the power of Hugo static sites is that they don’t need code and are often hosted on servers that don’t support scripts. That’s the whole reason we built Un-static Forms. So you can offload the form handling for your Hugo-based site to us and we’ll deliver the form submission to you!

Example Hugo Contact Form

Here are the simple steps to set-up a Hugo contact form on your site generated with Hugo!

Step 1. Register a Form

Step 2. Take the content below and place it in content/contact.md (or something similar)

Step 3. Replace the YOUR_ENDPOINT_REFERENCE in the content with your form’s endpoint

Step 4. You should probably also update the date in the page’s front-matter, so that it’s published at the right time.

And you are done..

You can now reference the contact page from any of your other pages with for instance [Contact us](/contact/) or [Contact us](/contact/).

---
title: "Contact"
date: "2020-02-25"
---
You can contact us here!

<form method="post" action="https://forms.un-static.com/forms/YOUR_ENDPOINT_REFERENCE">
  <div class="form-group row">
    <label for="name" class="col-4 col-form-label">Name</label>
    <div class="col-8">
      <div class="input-group">
        <div class="input-group-addon">
          <i class="fa fa-user"></i>
        </div>
        <input id="name" name="name" placeholder="Please enter your name" type="text" required="required" class="form-control">
      </div>
    </div>
  </div>
  <div class="form-group row">
    <label for="email" class="col-4 col-form-label">E-mail address</label>
    <div class="col-8">
      <div class="input-group">
        <div class="input-group-addon">
          <i class="fa fa-envelope"></i>
        </div>
        <input id="email" name="email" placeholder="Your e-mail address" type="text" required="required" class="form-control">
      </div>
    </div>
  </div>
  <div class="form-group row">
    <label for="message" class="col-4 col-form-label">Message</label>
    <div class="col-8">
      <textarea id="message" name="message" cols="40" rows="10" required="required" class="form-control"></textarea>
    </div>
  </div>
  <div class="form-group row">
    <div class="offset-4 col-8">
      <button name="submit" type="submit" class="btn btn-primary">Send</button>
    </div>
  </div>
  <div class="text-center">
    <p><small>(Powered by <a rel="nofollow" href="Un-static Forms">Un-static Forms</a>)</small></p>
  </div>
</form>

Of course you can remove the Powered by link, but we would appreciate if you keep it to support us in providing this to you for free.