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

No. A shortcode and a config param is the whole integration.

Related guides

Ready to wire up your Hugo form?

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

Start free