How to Add a Contact Form to Hugo

Create a FormsList form endpoint

Sign up for a free FormsList account and create a new form. Copy the endpoint URL. You will use it as the action attribute in your Hugo form partial.

Create the contact form partial

Create a new partial template in your Hugo project. This HTML form posts directly to FormsList when submitted. Hugo partials live in the layouts/partials/ directory.

<!-- layouts/partials/contact-form.html -->
<form action="https://formslist.com/f/YOUR_FORM_HASH" method="POST" class="contact-form">
  <div class="form-group">
    <label for="name">Name</label>
    <input type="text" id="name" name="name" required />
  </div>

  <div class="form-group">
    <label for="email">Email</label>
    <input type="email" id="email" name="email" required />
  </div>

  <div class="form-group">
    <label for="message">Message</label>
    <textarea id="message" name="message" rows="5" required></textarea>
  </div>

  <!-- Optional: redirect after submission -->
  <input type="hidden" name="_redirect" value="{{ "thanks" | absURL }}" />

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

Use the partial in a page or shortcode

Include the partial in your contact page template. You can also create a Hugo shortcode so content editors can add the form to any Markdown page.

<!-- layouts/_default/contact.html -->
{{ define "main" }}
<div class="container">
  <h1>{{ .Title }}</h1>
  {{ .Content }}
  {{ partial "contact-form.html" . }}
</div>
{{ end }}

<!-- Or as a shortcode: layouts/shortcodes/contact-form.html -->
{{ partial "contact-form.html" . }}

<!-- Then use in any Markdown file: -->
<!-- {{< contact-form >}} -->