Get your free splitforms access key
Sign up at splitforms.com, verify your email, and copy your access key from the dashboard. No credit card required.
Contact form · Hugo
Contact form for Hugo websites
Hugo builds blazing-fast static sites — but ships zero backend. Drop a partial or shortcode in your theme, pull the access key from site params, and you have a working contact form without spinning up a Cloud Run service or wiring Netlify Functions. Pure HTML, zero JavaScript, full spam protection.
- 500 free total
- One endpoint
- No backend code
No backend code
No server, API route, or SDK. Your Hugo form posts straight to one endpoint.
Straight to your inbox
Every submission is emailed to you and saved to a searchable dashboard — spam filtered before it reaches you.
Design without limits
It's your own Hugo markup and styles. Splitforms is only the backend, so nothing constrains how the form looks.
Copy-paste ready
Your Hugo contact form, ready to paste.
Replace YOUR_ACCESS_KEY with the key from your dashboard — that's the whole integration. No SDK to install, no build step, just the html you already write.
{{/*
layouts/partials/contact-form.html
Use in any template with: {{ partial "contact-form.html" . }}
Set splitformsKey in your site config (hugo.toml):
[params]
splitformsKey = "YOUR_ACCESS_KEY"
*/}}
<form action="https://splitforms.com/api/submit" method="POST">
<input type="hidden" name="access_key" value="{{ .Site.Params.splitformsKey }}" />
<input type="text" name="name" placeholder="Name" required />
<input type="email" name="email" placeholder="Email" required />
<textarea name="message" placeholder="Message" required></textarea>
<input type="checkbox" name="botcheck" style="display:none" tabindex="-1" />
<button type="submit">Send</button>
</form>How to add it
How to add a contact form to a Hugo website.
To add a contact form to a Hugo website you need three things: a free splitforms access key, the html snippet above, and your key pasted into it. No backend, server, or SDK — the form posts to one URL and every submission lands in your inbox and dashboard.
Drop the Hugo snippet into your project
Copy the Hugo code example into your project and replace YOUR_ACCESS_KEY with the key from step 1.
Receive submissions in your dashboard
Submissions arrive in the splitforms dashboard within seconds. Free includes owner email notification attempts; Pro adds Slack, Discord, Sheets, or any signed webhook URL.
Where submissions go
Where do your Hugo form submissions go?
Every submission is emailed to you and saved to a searchable dashboard — spam filtered before it ever reaches you. Search, export to CSV, or forward it to a webhook or Slack on Pro.
- 500 submissions total, free to start
- Honeypot + automatic spam scoring on every plan
- Signed webhooks to Slack, Discord, your server
No backend needed
Do you need a backend for a Hugo form? No.
Your Hugo form posts standard FormData to one URL. Splitforms validates the access key, runs its spam checks, and forwards it to your email — so there's no server, API route, or database for you to build or maintain.
- Drop-in partial or shortcode — works with any Hugo theme
- Access key pulled from site Params, never hardcoded in templates
- Zero JavaScript shipped — pure HTML form action
Best practices
What a production-ready Hugo form needs.
The difference between a form that works in the demo and one that survives launch traffic — the production-tested defaults, in priority order.
- Define the access key in hugo.toml under [params] — don't commit it to a public repo. For private repos, this is fine. For public repos, override via env var: hugo --param splitformsKey=$SPLITFORMS_KEY.
- Build the form as a shortcode ({{< contact-form >}}) rather than a partial. Shortcodes are usable from Markdown content; partials only work in templates.
- Add a /thanks page (content/thanks/_index.md) with your normal layout, then set its absolute URL in Dashboard → Form settings → Redirect.
How SplitForms works
What happens after someone submits your form?
splitforms receives the submission, filters spam, saves it to your dashboard and emails you — then, on paid plans, sends it on to your webhooks and integrations. No backend infrastructure to build.
Add your endpoint
Point your form to your unique SplitForms endpoint. That's it.
Receive submissions
We instantly capture and organize every submission in your inbox.
Route anywhere
Send data to email, spreadsheets, CRMs, webhooks, and 7,000+ apps.
No credit card required. Set up in under 60 seconds.
Connect & automate
Where can submissions go besides email?
On paid plans, submissions can also go to Slack, Discord, Google Sheets, Notion, Airtable, Zapier or any signed webhook — and splitforms works on the platforms you build on, from WordPress and Shopify to Next.js. With Stripe connected, your forms can take payments too.
NewTake payments on your formsDeposits, bookings, order forms — submitters check out through Stripe and the money goes straight to your Stripe account. Included on every paid plan.See plans →Questions
Hugo contact form questions.
View all FAQsHow do I add a contact form to a Hugo site?
Save the snippet above as layouts/partials/contact-form.html in your project (NOT in the vendored theme). Add splitformsKey = "sk_live_…" to [params] in hugo.toml. Then call {{ partial "contact-form.html" . }} from any template, or use the shortcode variant for Markdown content.
Does splitforms work with Hugo's static-site output?
Yes — that's the default Hugo mode. The form is pure HTML, posts directly to splitforms.com from the browser, and doesn't need any Hugo server feature. Works with hugo --minify and any deployment target.
How do I handle form errors in Hugo?
Hugo doesn't render dynamic responses, so error UI is split between two paths. (1) Pure-HTML pattern: splitforms returns a generic error page on failure — customize it via splitforms dashboard → Settings → Error Page. (2) Hybrid: add a small inline <script> that intercepts submit, calls fetch, and renders inline errors (see the AJAX page).
Can I use splitforms with Hugo's PaperMod, Ananke, Doks, or other themes?
Yes — every Hugo theme. The partial lives in your project's layouts directory, which Hugo's lookup order prefers over the theme. No theme modifications required.
How do I customize the success / redirect behavior?
Build the thank-you page in Hugo, then either add a hidden redirect input to the partial pointing at its URL (works on every plan, and wins over the dashboard setting), or set a default in Dashboard → Form settings → Redirect, which applies per splitforms form.
Does the form survive Hugo's build pipeline (minify, fingerprint, etc.)?
Yes. The form is plain HTML — Hugo's HTML minifier compresses whitespace but doesn't touch attributes. Asset fingerprinting only affects linked CSS/JS files, not inline form markup.
Site.Params lookup is case-sensitive in some Hugo versions
If you set splitformsKey in hugo.toml under [params] but reference it as {{ .Site.Params.SplitformsKey }} in the template, recent Hugo versions still resolve it — but Hugo 0.110 and earlier don't. Use the exact case from your config file.
Markdown content stripping eats inline form HTML
If you put a <form> directly in a Markdown content file, Goldmark's HTML sanitizer strips it. Either set markup.goldmark.renderer.unsafe = true in your config, or wrap the form in a shortcode (recommended): {{< contact-form >}}.
The dashboard redirect must match Hugo's generated URL
Configure the exact absolute thank-you URL in the splitforms dashboard. Hugo normalizes trailing slashes according to uglyURLs; if the generated page is /thanks.html, a dashboard redirect to /thanks/ will 404. Check the built output before saving the redirect.
Hugo modules / theme overrides require partial in your project, not the theme
If you copy contact-form.html into a vendored theme's layouts/partials/, your changes get overwritten on the next theme update. Always put custom partials in your project's own layouts/partials/ — Hugo's lookup chain prefers project over theme automatically.
Hugo's `safeHTML` is needed when rendering the access key as raw output
If your splitforms key contains an underscore (it does — keys are sk_live_...), Hugo's HTML escaping is fine for input values, but if you echo it into JS contexts you may need safeJS. Sticking to <input value="…"> works as-is.
Hugo's --minify collapses whitespace inside the form's textarea default
If you build with hugo --minify, the HTML minifier strips whitespace and newlines aggressively — including the contents between <textarea>…</textarea> tags. A textarea pre-filled with \n\nWrite your message here… collapses to a single line, breaking the visual hint. The minifier respects <pre> but not <textarea> by default. Either avoid pre-filled textarea content (use a placeholder attribute instead — that's what placeholders are for) or disable minification of HTML via minify.tdewolff.html.keepWhitespace = true in your config.
How does Hugo handle forms without splitforms?
Hugo is a static site generator — there's no runtime, no /server/api, no way to handle a form POST without an external service. The native paths are: (a) a Cloudflare Worker / Lambda / Cloud Run service handling POST /contact and emailing you (~4 hours of setup, ongoing operation), (b) Netlify Forms when the Hugo site is hosted on Netlify, or (c) a third-party form backend like Formspree, Basin, or Web3Forms. Hugo's templating shines for the form's HTML — {{ partial }}, {{ .Site.Params }} for the access key, {{< shortcode >}} for Markdown reuse — but the delivery layer is always external. Splitforms is the simplest portable option that doesn't require a Cloud Run service.
Any deployment notes for shipping Hugo to production?
Hugo deploys to any static host: Vercel, Netlify, Cloudflare Pages, GitHub Pages, S3, Surge, plain Apache/nginx. The form posts cross-origin so the host is irrelevant. Set splitformsKey in hugo.toml under [params] for private repos; for public repos, build with hugo --param splitformsKey=$SPLITFORMS_KEY and read it from CI env. Hugo's local dev server runs on localhost:1313 — add that to splitforms allowed-domains for testing or use a separate dev key. hugo --minify compresses HTML but doesn't touch attribute values — the form works under minification.
Simple pricing
How much does splitforms cost?
Free gives you 500 submissions for $0 — no card, no time limit. Pro is $5/month for 5,000 submissions a month, and Annual is $49/year for 15,000 a month with every Pro feature.
Free
$0— 500 submissions
For side projects and indie devs.
- 500 free submissions
- Unlimited forms
- Email notifications included
- Smart spam filtering
- Submissions dashboard
- Redirect after submit
- MCP server included
Recommended
Pro
$5/ month
Billed monthly
Every paid feature, for agencies and growing products.
- 5,000 submissions / mo
- Unlimited forms
- Webhooks and integrations
- CC/BCC, auto-replies and routing
- File uploads with 500 MB storage
- Stripe payments on your forms
- 3 team seats
- Cancel anytime
Annual
$49/ year
About $4.08/mo, billed yearly
Every Pro feature with triple the volume — $0.27 per 1,000 at full use.
- 15,000 submissions / mo
- Unlimited forms
- Everything in Pro
- File uploads with 5 GB storage
- 3 team seats
- Priority email support
No credit card required on Free • Cancel anytime • Full pricing and FAQ