Contact form for Hugo

Hugo outputs pure HTML, so the integration is a partial template and a config value. Define the endpoint once in hugo.toml and reference it wherever a form appears.

layouts/partials/contact-form.html
{{/* hugo.toml:
[params]
  formEndpoint = "https://formdock.app/f/your-form-key"
*/}}

<form action="{{ .Site.Params.formEndpoint }}" method="POST">
  <input type="text" name="name" placeholder="Name" required>
  <input type="email" name="email" placeholder="Email" required>
  <textarea name="message" placeholder="Message"></textarea>
  <input type="text" name="_gotcha" style="display:none" tabindex="-1" autocomplete="off">
  <button type="submit">Send</button>
</form>
  • Include it anywhere with {{ partial "contact-form.html" . }}.
  • Create a /thanks/ page in your site and set it as the form's redirect URL for a fully branded flow.
  • Different environments? Override formEndpoint in config/production/hugo.toml so staging posts to a test form.

Get your endpoint: create a free FormDock account (100 submissions/month), add a form, and swap your-form-key for the real key.