Hugo newsletter form
Add a newsletter signup to your Hugo site with no backend. One email field, drop the markup in a shortcode or partial, and subscribers land in your inbox or your email tool. No server required.
How to build it
- Create a form in your Formpaste dashboard and copy its access key.
- Add the HTML above to a Hugo shortcode or partial.
- Replace YOUR_ACCESS_KEY_HERE with your access key, then rebuild and deploy.
Prompt for your AI coding agent
Give me a plain HTML newsletter signup form with a single email field for a Hugo site that POSTs to https://api.formpaste.com/submit with a hidden access_key input. I will place it in a shortcode. No server, no JavaScript.Or connect the Formpaste MCP server to Claude Code, Codex, Cursor, Claude Desktop, VS Code, or any mcp-remote client. See the setup guide.
Hugo gotchas
Hugo builds static HTML, so a Formpaste form is just markup you drop into a template or a shortcode. There is no server in a Hugo site, and you do not need one. The form posts straight to Formpaste.
Put the form in a partial or a shortcode
Add the form markup to a layout partial (layouts/partials) to reuse it, or wrap it in a shortcode so you can drop it into any content file with a single tag.
Raw HTML in Markdown needs a shortcode
Hugo's Goldmark renderer strips inline HTML in content files by default. Use a shortcode for the form, or enable unsafe rendering in hugo.toml, so the markup is not swallowed.
No server means no config to add
Because the form posts to an external endpoint, nothing changes in your Hugo build or your host. It works the same on Netlify, GitHub Pages, or anywhere you deploy the static output.
The hidden access_key stays in the markup
Keep the hidden access_key input exactly as generated. It identifies your form to Formpaste.
What to get right
One field converts best
A newsletter form should ask for email only. Every extra field lowers signups.
Confirm before you celebrate
Show a subscribed message on success. If you need double opt-in, send the confirmation from your email tool, not the form.
Push to your email tool
Forward submissions to your ESP with a webhook so new subscribers land where you send campaigns.
How it works
Three simple steps for form submissions to land in your email inbox.
Create your form, set your form's action URL to Formpaste's endpoint, and add your access key.
Create your form
Sign up, verify your email, and create an access key in your dashboard.
Copy the code
Paste the snippet above into your project. Pick CSS or Tailwind to match your site.
<form action="https://api.formpaste.com/submit" method="POST" class="mx-auto flex w-full max-w-md flex-col gap-4 rounded-xl border border-gray-200 bg-white p-6 shadow-sm dark:border-gray-800 dark:bg-gray-950">
<input type="hidden" name="access_key" value="YOUR_ACCESS_KEY_HERE">
<label class="flex flex-col gap-1.5 text-sm font-medium text-gray-900 dark:text-gray-100">Email
<input type="email" name="email" placeholder="you@example.com" required class="rounded-md border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 shadow-sm outline-none focus-visible:ring-2 focus-visible:ring-gray-900 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:focus-visible:ring-gray-100" />
</label>
<button type="submit" class="w-full rounded-md bg-gray-900 px-4 py-2 text-sm font-medium text-white shadow-sm transition-colors hover:bg-gray-800 disabled:opacity-60 dark:bg-white dark:text-gray-900 dark:hover:bg-gray-200">Subscribe</button>
</form>Add your access key
Replace the placeholder with your access key to start receiving submissions.
<input type="hidden" name="access_key" value="YOUR_ACCESS_KEY_HERE">Hugo newsletter form FAQ
Paste a form. Get submissions.
Instantly without setting up any backend, servers or databases. 250 submissions/mo free - no credit card.