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 build a simple prototype of the contact form we want to use for the project.
Even though form fields are a basic part of HTML they are strangely complicated to build. And building them in Hugo adds a little further complication, so we’ll start with a simple prototype. Having that barebones prototype will be helpful for later steps.
Building the solution
Solution approach
To get started and keep things simple, we’ll create a new HTML file with only the form, style it with Bootstrap, and utilize a prebuilt template.
Lastly, we’ll integrate it into our Hugo project.
Step 1: A basic contact form in HTML
To get started we’ll refer to the example Bootstrap forms by TutorialRepublic and alter them for our project’s needs.
For our contact form, we’ll want fields for:
- name
- subject
- message
- submit button
We’ll make all fields required.
For now we’ll keep the form action empty since we haven’t setup a way to record form submissions.
Our basic HTML form file contains the following:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Test</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="m-4">
<h2>What's on your mind?</h2>
<form action="" method="POST">
<div class="mb-3">
<input type="text" class="form-control" id="inputName" placeholder="Name" required="required">
</div>
<div class="mb-3">
<input type="email" class="form-control" id="inputEmail" placeholder="Email" required="required">
</div>
<div class="mb-3">
<input type="text" class="form-control" id="inputSubject" placeholder="Subject" required="required">
</div>
<div class="mb-3">
<textarea type="textarea" class="form-control" id="inputMessage" placeholder="Message" rows="3" required="required"></textarea>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</body>
</html>
The HTML prototype page demonstrates a simple but sufficient approach.
Step 2: A basic contact form in Hugo
Now that we know what we want our form to look like in HTML, we need to bring that about within a Hugo project.
To do that, we’ll create a new layout file in a new directory. Specifically, we’ll create the single.html file located in the /layouts/contact/ directory. We’ll use the form code we created for the basic form in the previous step and incorporate the Hugo shortcodes our project uses to build pages:
{{ partial "header" . }}
<main>
<div class="m-4">
<h2>What's on your mind?</h2>
<form action="" method="POST">
<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>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</main>
{{ partial "footer" . }}
Next, we’ll create a contact.md file located in a new /content/contact/ directory.
This file doesn’t need to contain anything besides basic frontmatter. All the necessary information is already in the layout file.
Conclusion
That’s it. Now we have a basic prototype contact form working in Hugo.