Background

This project is built with Hugo and uses the Minimal Hugo theme.

This post is part of an ongoing effort to tailor the theme over time.

Specifically, this post is part of a project to build a contact form with Hugo and host it with Netlify.

Objective

In this post we’ll turn our prototype contact form from a previous post into a functioning contact form using Netlify.

As previously mentioned, Netlify provides “built-in form handling that’s enabled by default." Even on Netlify’s free tier the service provides 100 form submissions per month. It also makes form handling very simple.

Building the solution

As with setting up hosting on Netlify, Brad Traversy’s walkthrough for setting up form submission with Netlify provides an excellent outline of this process.

Making the form functional

To make our prototype contact form function we updated our single.html file located in the /layouts/contact/ directory according to Netlify’s documentation for setting up HTML forms.

Specifically, we updated the form opening tag to <form action="POST" data-netlify="true">.

Adding spam filtering

In order to prevent spam, we inserted a field that causes Netlify to add a reCaptcha element to the form by adding the line <div data-netlify-recaptcha="true"></div>. (See Netlify’s documentation for including a reCAPTCHA challenge.)

The updated code

The updated form code is below.

{{ partial "header" . }}

<main>

  <div class="m-4">
    <h2>What's on your mind?</h2>
    <form action="POST" data-netlify="true">
        <div class="mb-3">
            <input type="text" class="form-control" id="inputName" name="name" placeholder="Name" required="required">
        </div>
        <div class="mb-3">
            <input type="email" class="form-control" id="inputEmail" name="email" placeholder="Email" required="required">
        </div>
        <div class="mb-3">
            <input type="text" class="form-control" id="inputSubject" name="subject" placeholder="Subject" required="required">
        </div>
        <div class="mb-3">
            <textarea type="textarea" class="form-control" id="inputMessage" name="message" placeholder="Message" rows="3" required="required"></textarea>
        </div>
        <div class="field">
            <div data-netlify-recaptcha="true"></div>
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
    </form>
</div>

</main>

{{ partial "footer" . }}

Setting up email notifications for form submissions

Finally, we followed the steps outlined in Netlify’s documentation for setting up form notifications to receive emails when the form is submitted.

Conclusion

We now have a functioning contact form with spam filtering and email notifications all hosted for free, thanks to GitHub and Netlify.