Hugo

Add a contact form to your Hugo site with a simple partial template. No JavaScript required.

Basic form partial

layouts/partials/contact-form.html
<form action="https://formfa.st/f/your_endpoint_id" method="POST">
  <div>
    <label for="name">Name</label>
    <input type="text" id="name" name="name" required />
  </div>

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

  <div>
    <label for="message">Message</label>
    <textarea id="message" name="message" rows="5"></textarea>
  </div>

  <!-- Spam protection -->
  <input type="hidden" name="_gotcha" style="display:none" />

  <!-- Redirect back to your site -->
  <input type="hidden" name="_next"
         value="{{ "thanks" | absURL }}" />

  <button type="submit">Send Message</button>
</form>

Using the partial

Include the form in any page template:

layouts/page/contact.html
{{ define "main" }}
  <h1>{{ .Title }}</h1>
  {{ .Content }}
  {{ partial "contact-form.html" . }}
{{ end }}

Configurable endpoint

Store the endpoint ID in your Hugo config to make it reusable across templates:

hugo.toml
[params]
  formfast_endpoint = "your_endpoint_id"
layouts/partials/contact-form.html
<form action="https://formfa.st/f/{{ .Site.Params.formfast_endpoint }}"
      method="POST">
  <!-- fields -->
</form>

Creating a thank-you page

content/thanks.md
---
title: "Thank You"
layout: "single"
---

Thanks for your message! We'll get back to you soon.

[Return to homepage](/)
Use Hugo's absURL function for the _next redirect to ensure it works in both development and production.
PreviousAstroNextAJAX / Fetch