Adding a contact form to a Hugo site
July 23, 2026
Hugo is known for its speed: it compiles complex websites into static HTML files in milliseconds. Because Hugo sites do not run an application server, adding a contact form often leads developers down an over-complicated path of deploying external serverless functions or relying on unreliable mailto: links.
You can keep your Hugo site 100% static while capturing verified customer inquiries by connecting a clean HTML form to NormForms.
Step 1: Get your form endpoint
Sign up for a free NormForms account. No credit card is required. You will receive an endpoint URL formatted like https://normforms.com/f/YOUR_TOKEN.
Step 2: Add a contact form partial
In your Hugo theme or site repository, create a partial at layouts/partials/contact-form.html:
<form action="https://normforms.com/f/YOUR_TOKEN" method="POST"> <label for="nf-name">Name</label> <input id="nf-name" type="text" name="name" autocomplete="name" required> <label for="nf-email">Email</label> <input id="nf-email" type="email" name="email" autocomplete="email" required> <label for="nf-message">Message</label> <textarea id="nf-message" name="message" required></textarea> <!-- Invisible honeypot traps spam bots silently --> <input type="text" name="_gotcha" style="display:none" tabindex="-1" autocomplete="off"> <button type="submit">Send Inquiry</button> </form>
Render the partial anywhere in your layouts or content templates:
{{ partial "contact-form.html" . }}
Tip: If you prefer to keep the token out of your template files, define normformsToken = "YOUR_TOKEN" in your hugo.toml (or config.toml) under [params] and interpolate it in the partial with {{ .Site.Params.normformsToken }}.
Step 3: Test locally during development
Run hugo server and test the form on localhost:1313.
Submissions originating from localhost are automatically handled in test mode:
- Delivered to your email with a [Test] subject line.
- Consume 0 quota against your monthly allowance.
Step 4: Lock to your production domain
Once deployed, open your form settings in NormForms and enter your website's domain (e.g. example.com). Submissions sent from unauthorized domains or automated direct-POST scripts are rejected immediately.
Zero maintenance, reliable lead protection
Your Hugo site remains completely static with zero client-side JavaScript. NormForms handles spam filtering (honeypots, rate limiting, and origin checks) and securely archives every message in your dashboard so you never miss a client inquiry.