← Blog

Add a contact or signup form to a Hugo site

Add a Hugo contact or signup form with a reusable partial that posts to a hosted endpoint — no server required.

To collect signups from a Hugo site, add a reusable partial with an HTML form that posts to a hosted endpoint, and read the endpoint and campaign id from site params. Hugo outputs static HTML, so there is no server to run — the form posts straight to Simple Signups.

A partial you can reuse

Keep the endpoint and public campaign id in config.toml params so every template shares one source of truth. Include the partial wherever you want the form.

Hugo partial + site params
{{/* layouts/partials/signup-form.html */}}
<form action="{{ .Site.Params.simpleSignups.endpoint }}" method="POST">
  <input type="hidden" name="campaignId" value="{{ .Site.Params.simpleSignups.campaignId }}" />
  <input type="email" name="email" required placeholder="you@example.com" />
  <input type="text" name="hp" tabindex="-1" autocomplete="off"
    style="position:absolute;left:-9999px" aria-hidden="true" />
  <button type="submit">Subscribe</button>
</form>


{{/* Use in any template */}}
{{ partial "signup-form.html" . }}


# config.toml
[params.simpleSignups]
  endpoint = "https://simple-signups.com/api/subscribe"
  campaignId = "pub_your_campaign_id"

Partial or shortcode?

Use a partial when the form belongs in layouts, footers, or shared sections across multiple pages. Use a shortcode when editors need to drop the form into markdown content. Either way, keep the endpoint and public campaign id in one config location so you do not drift across templates.

Deploy and lock it down

Deploy the static output to Pages, Netlify, or S3, then allow-list each hostname you serve from (apex and www separately; preview hosts too). See the quickstart for fields, tags, and error codes.

Related