Hugo Integration
Add a contact form to any Hugo site
Hugo renders plain HTML at build time, so there is no server to receive a form. To add a contact form without a backend, put your key in hugo.toml, save the partial below as layouts/partials/contact-form.html, and call it from a layout or shortcode. The form posts straight to https://api.staticforms.dev/submit and each submission arrives in your inbox. It works with any theme and on the free plan.
1. Add your API key to the site config
2. Create the partial
redirectTo is optional and must be a full URL, which absURL produces from your baseURL. Remove it to show a plain confirmation instead. The visitor's email field becomes the reply-to address on the notification.
3. Add a contact page
Hugo doesn't render raw HTML inside Markdown by default, so call the partial from a layout. Create layouts/page/contact.html:
Then point a content page at it:
4. Use it anywhere with a shortcode
Any Markdown file can now include the form with {{< contact >}}.
Themes
Put the partial, layout and shortcode in your project's own layouts/ folder, not inside themes/, so theme updates don't overwrite them. This works the same with PaperMod, Ananke and other themes.
5. Build and test
Build with hugo --minify and deploy as usual to Netlify, Cloudflare Pages, GitHub Pages or any static host. Send a test message from the deployed contact page and check your inbox. A longer walkthrough with styling and a fetch-based version is in the Hugo contact form tutorial.
FAQ
Does this work on the free plan?
Yes. The snippet only uses Free plan features: 250 submissions a month, 1 form endpoint, email delivery, the built-in spam filter, a honeypot field and reCAPTCHA v2. No credit card is needed.
How do I keep spam out?
Every submission is checked by the built-in spam filter on every plan. The snippet adds a hidden honeypot field (any field whose name contains "honeypot"); bots fill it in and those submissions are dropped. reCAPTCHA v2 is available on Free. Cloudflare Turnstile, hCaptcha, ALTCHA and reCAPTCHA v3 are available from the Starter plan.
Is it safe to put the API key in my HTML?
Yes. The form API key is meant to be public. It cannot read your submissions or sign in to your dashboard. From the Starter plan you can also restrict submissions to your own domains.
Do I need a Hugo module or theme support?
No. The form is plain HTML in a partial, so it works with any Hugo theme and any static host. Hugo only renders the form; Static Forms receives the submission.
