How to add a contact form to your Hugo site

Hugo is a framework to build websites. In this guide we’ll show you how to add a form to your Hugo website.

Create a new Hugo app

Let’s go ahead by installing Hugo using Homebrew which is what they recommend on their website:

brew install hugo

After the installation is complete, we can create a new site by running:

hugo new site formbackend-hugo

Where formbackend-hugo is the directory we want the Hugo site to be created in.

We need to add a theme before we’ll really see anything. You can find one at https://themes.gohugo.io - we’re just going to go with ananke. We’re going to do this by using Git.

Go ahead and initialize a new git repository in the formbackend-hugo directory we just created by typing:

git init .

Now we’re going to add the theme as a submodule by running

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

We need to update the config file to specify that we want to use this team. So open up config.toml in the root and add the following line at the bottom:

theme = "ananke"

You can now start the server by running hugo server, this will start a hot-reloading development server that refreshes every time you make any changes.

You should see the following when visiting http://localhost:1313

Add a contact form

Log in to your FormBackend account and visit the forms index page. Go ahead and create a new form and give it a name you can remember it by.

After your form has been created, you’ll see the “Submissions” page which is where new submissions will appear. If you navigate to the “Set up” page you can see the unique URL for your form. We’ll copy that!

Create the contact us page using Hugo

Let’s add a new contact us page. There are a few things we need to do. Let’s start by creating a file named contact.md in the content directory.

Add the following at the top of that file:

---
title: "Contact"
layout: "contact"
---

Send us a message

Let’s go ahead and create a corresponding layout file for this page, which is needed since we want to add raw-HTML. Create a new file in layout/page/contact.html - you’ll most likely have to create the page directory inside of layout/page. The file should look like this:

{{ define "main" }}
<div class="w-60 center">
  {{ .Content }}

  <form action="https://www.formbackend.com/f/{your-identifier}" method="POST">
    <div class="mt2">
      <label for="name" class="db mb1">Name</label>
      <input type="text" id="name" name="name" required>
    </div>

    <div class="mt2">
      <label for="email" class="db mb1">Email</label>
      <input type="email" id="email" name="email" required>
    </div>

    <div class="mt2">
      <label for="message" class="db mb1">Message</label>
      <textarea type="email" id="message" name="message" required></textarea>
    </div>

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

</div>
{{ end }}

The theme we’re using is using Tachyons for styling, which is a CSS framework similar to TailwindCSS. So the classes like db and mb1 all come from Tachyons. But you can style it exactly the way you want it doing it your way :)

You need to change the action-attribute of your form to the unique URL we gave you when you created the form in FormBackend.

So what you see in the layout/page/contact.html file, is the form HTML and a {{ .Content }} placeholder. The “Send us a message” text you added in content/contact.md will be rendered instead of {{ .Content }}.

So if you visit http://localhost:1313/contact/ in your browser you should now see

It of course leaves something to be desired. But this part is up to you, you control the HTML, you control the styling. You can add as many fields as you want and of every type. All they need is a unique name attribute.

We can do more!

We’ve just scratched the surface of what you can do with FormBackend.

If you want to send an email to the submitter when they submit your form, navigate to the Notifications tab and go to the “Send email to the submitter” section. Here you can customize who the email is from, and what the Subject and email body should be. This way you can let the submitter know that you received their submission and will get back to them shortly - or maybe they signed up for a mailing list and you want to send them a link to some beginner content.

You can also send an email to yourself with the data that was submitted with your form. We even allow for attachments and will attach those to the email.

Or you can use webhooks, integrate with Zapier or send the submissions to Google Sheets or Slack using our native integrations.

Every submission is of course checked to see if it’s spam and if it is it’s filtered into the spam inbox.