Adding Formspree Contact Form to Hugo website

November 9, 2021

Formspree is a form backend, API and email service for HTML & Javascript forms. It’s a simple way to embed custom “contact us” forms on a static website, like Hugo. I’d like to add a reCAPTCHA to the form so I don’t recieve too much spam mail. It’s a simple process, but I’ll go through the steps in how I set it up for this Hugo website. And you can see my contact form in action right on this site.

The first step in using a free form is to sign up at https://formspree.io/register

If this is your first time signing up, you should immediately be taken to a Form details for a new form page, but if not you can click add new form on the https://formspree.io/forms page, provide a form name, project name and email and click create form.

Formspree Form details for a new form — First Formspree form

The formspree url can be posted right into your html form post attribute. This is listed as your Formspree endpoint where it directs you to you “Place this URL in the action attribute of your form.”

this URL action can be added to your contact form page

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


---
title: Contact
featured_image: "images/notebook.jpg"
omit_header_text: false
description: I'd love to hear from you
type: page
menu: main
---

I'd love to hear from you and your thoughts on IT, 
leadership, project management and life! Please fill out 
the form below and I'll get back to you as soon as I can! 
Thanks!

{{< form-contact action="https://formspree.io/f/fayrmjpryb" >}}

At this point the form should work!

But I would also like to add a reCAPTCHA with this form!

Go to https://www.google.com/recaptcha/admin and registering a new site.

Screenshot of Google Registering a new reCAPTCHA — Registering a new site for reCAPTCHA

Add a lable, recaptcha type ( chose reCAPTCHA v3, you can see more on Introducing reCAPTCHA v3), domain, owner, accept the terms of service and click submit

Expand the reCAPTCHA keys and take note of them. You’ll need the private key for formspree and the site key for your hugo shortcode.

Screenshot of Google reCAPTCHA site and secret keys screen — Attaining reCAPTCHA site and secret keys

Adding reCAPTCHA secret key to Formsspree form

Go to the setting of your Formspree form, enable reCAPTCHA and past the secret key into the field:

Screenshot of Adding reCAPTCHA secret key to Formspree form — Adding reCAPTCHA secret key to Formspree form

Adding reCAPTCHA site key to Hugo shortcode

A shortcode in the Hugo static site generator is a reusable piece of code that you can use as a template in your content markdown files. In the gohugo-theme-ananke theme for hugo there is a predefined shortcode that we can modify to add a recaptcha to our contact form. The initial file is locatee in the themes > layouts > shortcoes > form-contact.html. Copy this from the themes folder into your site’s layouts > shortcodes folder. Then you can modify this file. In line 17 “,” you need to replace the text above, “YOURRECAPTCHASITEKEYGOESHERE” with your key from the google reCAPTCHA admin screen.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21


{{ $.Scratch.Add "labelClasses" "f6 b db mb1 mt3 sans-serif mid-gray" }}
{{ $.Scratch.Add "inputClasses" "w-100 f5 pv3 ph3 bg-light-gray bn" }}
 
<form class="black-80 sans-serif" accept-charset="UTF-8" action="{{ .Get "action" }}" method="POST" role="form">
 
   <label class="{{ $.Scratch.Get "labelClasses" }}"  for="name">{{ i18n "yourName" }}</label>
   <input type="text" id="name" name="name" class="{{ $.Scratch.Get "inputClasses" }}"  required placeholder=" "  aria-labelledby="name"/>
 
   <label class="{{ $.Scratch.Get "labelClasses" }}" for="email">{{ i18n "emailAddress" }}</label>
   <input type="email" id="email" name="email" class="{{ $.Scratch.Get "inputClasses" }}"  required placeholder=" "  aria-labelledby="email"/>
   <div class="requirements f6 gray glow i ph3 overflow-hidden">
     {{ i18n "emailRequiredNote" }}
   </div>
 
   <label class="{{ $.Scratch.Get "labelClasses" }}" for="message">{{ i18n "message" }}</label>
   <textarea id="message" name="message" class="{{ $.Scratch.Get "inputClasses" }} h4" aria-labelledby="message"></textarea>
   <div class="g-recaptcha" data-sitekey="YOURRECAPTCHASITEKEYGOESHERE"></div>
   <input class="db w-100 mv2 white pa3 bn hover-shadow hover-bg-black bg-animate bg-black" type="submit" value="{{ i18n "send" }}" />
 
</form>
 