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 a previous post we built a simple contact form. That form worked fine, but there were some elements of the user interface (UI) that weren’t optimal.

In this post we’ll improve the contact form by adding labels to the input fields, fixing the Message field width, and adding some additional spacing around a few elements.

Building the solution

Adding labels to input fields

Previously, the only indicator of what each field was for was the placeholder text. But that text disappears as soon as the user types something. A persistent label is more helpful.

Adding labels simply requires including a <label> tag and linking it by id to the field with which it is associated.

For example, for the Name field, the label and input elements look like the following:

<div class="mb-3">
    <label for="inputName">Name</label>
    <input type="text" class="form-control" id="inputName" name="name" placeholder="Name" required="required">
</div>

The site’s existing Bootstrap and custom CSS rules caused the labels to be centered above the input field. To address this we first added a class called form-label.

    <label class="form-label" for="inputName">Name</label>

Next, to left justify the labels we set two CSS properties for that class:

• display: grid;
• justify-items: baseline;

Setting the width of the Message field

The previous version of the form allowed resizing the textarea of the form Message field, but that caused the width of the other fields to change at the same time.

This can be avoided by only allowing the field to be resized vertically. Setting the textarea CSS property to resize: vertical; achieves that. However, that is a rule that we likely don’t want to apply site wide.

As this StackOverflow answer demonstrates, we can achieve the same result with inline styling and thereby isolate the change to only the field in question.

Adding margins

Several elements needed additional spacing.

This was achieved by setting the CSS property margin-top: 10px; for the relevant classes.

The updated code

The updated HTML

The form HTML is in the single.html file located in the /layouts/contact/ directory, and the updated 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">
            <label class="form-label" for="inputName">Name</label>
            <input type="text" class="form-control" id="inputName" name="name" placeholder="Name" required="required">
        </div>
        <div class="mb-3">
            <label class="form-label" for="inputEmail">Email</label>
            <input type="email" class="form-control" id="inputEmail" name="email" placeholder="Email" required="required">
        </div>
        <div class="mb-3">
            <label class="form-label" for="inputSubject">Subject</label>
            <input type="text" class="form-control" id="inputSubject" name="subject" placeholder="Subject" required="required">
        </div>
        <div class="mb-3">
            <label class="form-label" for="inputMessage">Message</label>
            <textarea type="textarea" class="form-control" id="inputMessage" name="message" placeholder="Message" rows="3" required="required" style="resize:vertical"></textarea>
        </div>
        <div class="field buffer">
            <div data-netlify-recaptcha="true"></div>
        </div>
        <button type="submit" class="btn btn-primary buffer">Submit</button>
    </form>
</div>

</main>

{{ partial "footer" . }}

A <label> element was added to each input field.

Inline CSS of style="resize:vertical" was added to the <textarea> element.

A new CSS class called buffer was added to the recaptcha <div> element.

A new CSS class called buffer was added to the <button> element.

The updated CSS

The relevant CSS is in the custom.css file located in the /static/css/ directory, and the following rules were added.

label.form-label {
    display: grid;
    justify-items: baseline;
    margin-top: 10px;
}

div.buffer {
    margin-top: 10px;
}

button.buffer {
    margin-top: 10px;
}

Conclusion

These changes make the contact form more comprehensible and attractive.