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.