Hugo comment form

Add a comment form to your Hugo site with no backend or database. Drop the markup in a partial, and comments post to Formpaste where you moderate them before they appear. No server required.

How to build it

  1. Create a form in your Formpaste dashboard and copy its access key.
  2. Add the HTML above to a Hugo partial below your post content.
  3. Replace YOUR_ACCESS_KEY_HERE with your access key, then rebuild and deploy.

Prompt for your AI coding agent

Give me a plain HTML comment form with name, email, and a comment textarea for a Hugo site that POSTs to https://api.formpaste.com/submit with a hidden access_key input. I will place it in a partial. No server, no JavaScript, no database.

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

Static sites have no comment backend, so a form fills the gap

A statically generated page cannot store comments on its own. Posting to Formpaste gives you a place for them to land without adding a database or a CMS.

Moderate before you publish

Comments are a spam magnet. Formpaste filters obvious spam and quarantines borderline submissions in a folder you review, so you approve what actually appears on the page.

Keep the email private

Collect the commenter's email for moderation and reply, but label it as not published so people know it will not appear on the site.

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.

1

Create your form

Sign up, verify your email, and create an access key in your dashboard.

2

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">Name
    <input type="text" name="name" 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>
  <label class="flex flex-col gap-1.5 text-sm font-medium text-gray-900 dark:text-gray-100">Email (not published)
    <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>
  <label class="flex flex-col gap-1.5 text-sm font-medium text-gray-900 dark:text-gray-100">Comment
    <textarea name="comment" required class="min-h-28 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"></textarea>
  </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">Post comment</button>
</form>
3

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 comment form FAQ

Paste a form. Get submissions.

Instantly without setting up any backend, servers or databases. 250 submissions/mo free - no credit card.

Other Hugo forms