Hugo is a very popular and fast open source static site generator.
With Hugo you write your content in Markdown, a simple markup language that makes writing for the web fast and easy.
In this quick tutorial, we will show you on how to create a contact form on a Hugo site. If you don’t already have a Hugo website, you can follow the official guide to get started.
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.
Setup a form backend to your Hugo site using Fabform
1- Create a Fabform account
Sign Up for an account on fabform. It only takes a minute and it's free. You don’t need to provide any credit card info to create an account.
2- Create a new form endpoint on Fabform.io
After you log into Fabform, click the "Create Endpoint" button on your dashboard to create a new form endpoint and name it anything you want e.g. "Contact Form"
3- Make your Hugo contact form for your website
Here is some sample HTML code to create your contact form. It is a basic contact form, that you can modify to your liking.
<form action="https://fabform.io/f/{form-id}" method="post">
<label for="email">Your Email</label>
<input name="email" type="email">
<button type="submit">Submit</button>
</form>
4- Paste the endpoint URL that you created in step 2 into the action field of your HTML form tag.
Change the action part of your form tag in your contact form, to use the form endpoint URL you copied in step 2.
https://fabform.io/f/{insert-endpoint-here}
The part of the endpoint URL will appear for your is highlighted in bold.
That’s it! Your Hugo contact form is now up and running using Fabform.
Fabform will handle all the contact form submissions on your Hugo site, all with just a few lines of code.
If you are interested in hosting a static website with gitgub pages. check out the tutorial below.