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 is the first post for a project to build a contact form with Hugo and host it with Netlify.

Objective

In this post we’ll outline the overall approach for the project.

There are many ways to accomplish this task offering various tradeoffs.

Here we’ll discuss the solution that was selected and the reasons for that choice.

Why make a contact form?

Assuming you want to provide a simple way for others to contact you via a website, there are basically two options:

• publish your contact details, or
• provide some sort of contact form.

You can publish your contact details by simply listing your email, phone number, etc. Or you can mask them slighty by providing an image of the details or human-readable instructions for reproducing them in an attempt to thwart bots.

Alternatively, if you provide any sort of interactive component or element requiring action by a server, we’ll consider that a contact form for the purposes of this post.

While both options can be implemented in several ways, those are the two core approaches. And each approach has characteristic tradeoffs.

Those tradeoffs are basically between ease of setup and privacy. In other words, do you want the simplest option or do you want to avoid spam?

Publishing your email address is a very simple way to provide a means of contact, but it makes it far more likely you’ll receive spam.

Conversely, setting up a contact form takes additional work, but allows you to implement tools that screen for bots and spam while simultaneously keeping your contact information private.

Because of those benefits, for this project, we’ll create a contact form.

What’s special about a contact form?

For basic websites like personal pages, blogs, and portfolios a static site serves most needs quite well.

Static site generators (like Hugo and many others) make the task of creating a static webpage relatively fast and straightforward.

Furthermore, some web hosting services like GitHub Pages host static content for free.

But contact forms have interactive elements that require a different type of service than hosting of static websites. They require more resources and there are fewer places that offer those resources for free.

With a traditional architecture you would have to setup and run a server to handle the requests coming from a contact form.

With Jamstack and serverless architecture you can utilize other resources to handle those requests cheaply, and, in some cases, even for free.

For example, Netlify provides “built-in form handling that’s enabled by default.” Even on Netlify’s free tier the serivec provides 100 form submissions per month.

So, using a Jamstack architecture we’ll have options to easily and cheaply build and host a simple site with a contact form.

Designing the solution

Now that we have a solution architecture in minde, we’ll build the solution path in stages. Each step is complicated enough that we’ll address them individually in separate posts:

• Building a Prototype Contact Form with Hugo

• Setting Up a Website Subdomain to Host Content with Different Providers

• Building a Contact Form with Netlify

• Separating the Content of 2 Websites Generated by 1 Hugo Project with a Bash Script

• Improving the Contact Form UI

Conclusion

This approach allows us to build a functioning contact form while retaining the benefits of a static site.