How to add a contact form to your Hugo website

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.

1- Create a Getform account

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.

2- Create a new form on Getform

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

3- Make 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 fullname, email and a message field like this:

Sample Contact form for your Hugo website

4- Paste the endpoint URL that you obtained in step 2 to the action field of your HTML form tag.

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.

LOOKING TO HANDLE FILE UPLOADS FOR HUGO WEBSITE, HEAD OVER HERE:

Creating file upload forms in Hugo using shortcodes and Getform.io

WANT TO DO THE SAME FOR JEKYLL? You can head over here:

How to add a contact form to your Jekyll website