Contact form for Hugo websites

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.

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.

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).

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.

Build the thank-you page in Hugo, then set its absolute URL in Dashboard → Form settings → Redirect. The setting applies per splitforms form. Submitted redirect fields and shortcode arguments are ignored.

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.

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.

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 >}}.

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.

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.

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.

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.

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.

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.