send.webforms.toRead the docs →

WebForms

Static site generators

Add a contact form to Hugo

Hugo builds to static HTML, so there is nothing to run a form handler. The clean solution is a shortcode: define the form once in layouts/shortcodes, then drop it into any Markdown page. The endpoint lives in your site config so it is not repeated across content files.

Get an endpointRead the docs

Setup

  1. Add your endpoint to the site config

    Put it under params so content files never hard-code the URL.

  2. Create the shortcode

    Save the template below as layouts/shortcodes/contact-form.html.

  3. Use it in any page

    Call {{< contact-form >}} from Markdown. Rebuild and deploy as usual.

Hugo examples

Swap in your own endpoint and these run as-is.

hugo.toml
[params]
  formEndpoint = "https://send.webforms.to/wft_your_key"
  thanksURL = "https://example.com/thanks/"
layouts/shortcodes/contact-form.html
<form action="{{ .Site.Params.formEndpoint }}" method="POST" class="contact-form">
  <label>
    Name
    <input type="text" name="name" required>
  </label>

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

  <label>
    Message
    <textarea name="message" rows="5" required></textarea>
  </label>

  <input type="hidden" name="_next" value="{{ .Site.Params.thanksURL }}">
  <input type="hidden" name="_subject" value="New message from {{ .Site.Title }}">

  <input type="text" name="_gotcha" tabindex="-1" autocomplete="off"
         style="position:absolute;left:-9999px" aria-hidden="true">

  <button type="submit">Send</button>
</form>
content/contact.md
---
title: "Contact"
---

Drop us a line and we'll get back to you within a day.

{{< contact-form >}}

Hugo form FAQ

Yes, under params, then read it with .Site.Params.formEndpoint in the shortcode. It keeps the key in one place and lets a staging build point at a different form.

Related guides

Where Hugo submissions can go

The guide above gets the submission to your endpoint. From there it can land anywhere: one destination on Free, several on Pro.

Need the form markup too? The template gallery has complete forms for contact, waitlist, job application and more, and the form generator builds one field by field.

Ready to wire up your Hugo form?

Free for 300 submissions a month. Endpoint in under a minute, no card required.

Start free