How to add a contact form to your Hugo website

Mertcan Yücel
Dec 25, 2018 · 3 min read

Hugo is one of the most popular open-source static site generators built for blogs, docs, and portfolios. It was built in Go programming language and as its nature, generating static sites with Hugo is so fast.

With its robust theming system and hundreds of themes available for different uses, it’s really easy to get a website up and running within minutes. There are also hosting options through Amazon S3, CloudFront, Github Pages, and Heroku to deploy and serve your website after you set it up.

But one of the drawbacks of a static site generator like Hugo is to create and integrate form endpoints to your forms served on Hugo. That’s what Getform is here for when you need to set up a form for Jekyll, Hugo & Other Static Sites. All you need to do is to generate your unique form endpoint on Getform and use it while you are editing your HTML form on your Hugo site.

Most popular static site generators. Source: Devopedia

In this example, we will walk you through on how to set up a contact form on a Hugo site. If you don’t have a Hugo website yet, you can follow the official guide to get started.

Setup a form backend to your Hugo site using Getform

After you follow the Hugo documentation and get your Hugo site up and running, you’re ready to add a contact form. Now, let’s start setting up our Hugo contact form.

If you haven’t created one already, sign up to Getform. It is super easy and free. You don’t need to provide any credit card info to create an account.

After you log in to Getform, click to “+” button on your dashboard to create a new form then name it as e.g. “Contact Form for [MY HUGO SITE ]” as follows:

Creation of new form with its unique form endpoint on Getform. Source: https://getform.io/docs

You can use the boilerplate code provided on Getform to create your HTML form. It is a basic contact form with fullname, email and a message field like this:

Sample Contact form for your Hugo website

Go back to your Hugo template. Change the action part of your <form> tag in your Hugo template, to use the form endpoint URL you copied in step 2.

https://getform.io/{YOUR_UNIQUE_FORM_ENDPOINT}

The part of the endpoint URL will appear for your is highlighted in bold.

If you want to see how your form submissions being received you can check out the helper video below

That’s it! Your Hugo contact form is now using Getform.

Now Getform will handle the contact form submissions on your Hugo site, all with just a few lines of code.

After you finish the setup, based on your needs you can also set up an email notification from form settings, use the Zapier integration or send your form submission data to another web application or website using Webhook.

You can read more on Getform documentation.


Thanks for reading it! Don’t forget to click to Clap button if you like the post and subscribe to our Medium publication to keep updated for upcoming posts.

Getform Blog

Form backend platform for designers and developers

Mertcan Yücel

Written by

Co-creator @getformio

Getform Blog

Form backend platform for designers and developers

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade