DEV Community

Po O
Po O

Posted on

1

How to create a hugo theme with contact form

Here’s a step-by-step guide to creating a Hugo theme and integrating a fabform.io contact form:


1. Create a Hugo Site and Theme

Step 1: Install Hugo

Ensure Hugo is installed on your system. Follow Hugo's installation guide.

Step 2: Create a New Hugo Site

hugo new site my-hugo-site
cd my-hugo-site
Enter fullscreen mode Exit fullscreen mode

Step 3: Create a New Theme

hugo new theme my-theme
Enter fullscreen mode Exit fullscreen mode

This creates a basic theme in the themes/my-theme directory.

Step 4: Apply the Theme

Edit the config.toml file to use your new theme:

theme = "my-theme"
Enter fullscreen mode Exit fullscreen mode

2. Design the Theme Layout

Step 1: Set up a basic structure

Inside the themes/my-theme/layouts directory, create the following files:

  • layouts/_default/baseof.html: Base template.
  • layouts/_default/single.html: Template for single pages.

Example for baseof.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{ .Title }}</title>
</head>
<body>
    {{ block "main" . }}{{ end }}
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Example for single.html:

{{ define "main" }}
<main>
    <h1>{{ .Title }}</h1>
    {{ .Content }}
</main>
{{ end }}
Enter fullscreen mode Exit fullscreen mode

3. Add the Fabform.io Contact Form

Step 1: Create a Contact Page

Generate a new contact page:

hugo new contact.md
Enter fullscreen mode Exit fullscreen mode

Edit the content/contact.md file:

---
title: "Contact"
---
<form action="https://fabform.io/f/YOUR_FORM_ID" method="POST">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>

    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>

    <label for="message">Message:</label>
    <textarea id="message" name="message" required></textarea>

    <button type="submit">Send</button>
</form>
Enter fullscreen mode Exit fullscreen mode

Step 2: Style the Form

Add custom CSS in the themes/my-theme/static/css/style.css file and link it in baseof.html:

<link rel="stylesheet" href="/css/style.css">
Enter fullscreen mode Exit fullscreen mode

Example CSS:

form {
    display: flex;
    flex-direction: column;
    max-width: 400px;
    margin: 0 auto;
}
label, input, textarea, button {
    margin-bottom: 10px;
}
button {
    padding: 10px;
    background-color: #007BFF;
    color: white;
    border: none;
    cursor: pointer;
}
button:hover {
    background-color: #0056b3;
}
Enter fullscreen mode Exit fullscreen mode

4. Test and Deploy

Step 1: Run Locally

hugo server
Enter fullscreen mode Exit fullscreen mode

Visit http://localhost:1313/contact/ to test the contact form.

Step 2: Deploy

Build the site:

hugo
Enter fullscreen mode Exit fullscreen mode

Deploy the public directory to your preferred hosting platform.


That's it! Your Hugo theme is ready with a functional Fabform.io contact form.

Imagine monitoring actually built for developers

Billboard image

Join Vercel, CrowdStrike, and thousands of other teams that trust Checkly to streamline monitor creation and configuration with Monitoring as Code.

Start Monitoring

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay