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

1- Create a Getform account

2- Create a new form on Getform

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

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.

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.

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.

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

Getform

The modern way to build the form backend

Sign up for Getform Blog

By Getform

Guides, tips and stories for designers and developers. Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Getform

Collect submissions, receive emails and connect your HTML form with popular apps. Perfect for JAMStack and API-driven static websites.

Mertcan Yücel

Written by

Co-creator @getformio

Getform

Collect submissions, receive emails and connect your HTML form with popular apps. Perfect for JAMStack and API-driven static websites.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store