How do I reuse the form?

Put it in a Hugo partial or shortcode and include it wherever you need it.

Where do users land after submitting?

Add a hidden `redirect` field pointing at your thank-you page.

Hugo contact form

Verified against Hugo 0.140+ · June 2026

Hugo is the fastest SSG and it has no runtime server, which is exactly why a hosted form backend matters. Put a normal `<form method="POST">` in a partial or shortcode and you're done — no JavaScript needed.

Customize in the generator Full Hugo guide

The code

Add a `<form action method="POST">` to a Hugo partial or page template. Use a hidden `redirect` field to send users to a thank-you page.

Plain HTML (no JavaScript)

contact.html

<form action="https://formloom.vercel.app/api/submit/YOUR_ACCESS_KEY" method="POST">
  <label>
    Name
    <input type="text" name="name" required />
  </label>
  <label>
    Email
    <input type="email" name="email" required />
  </label>
  <label>
    Message
    <textarea name="message" required placeholder="How can we help?"></textarea>
  </label>
  <!-- honeypot: bots fill this, humans don't see it -->
  <input type="checkbox" name="botcheck" style="display:none" tabindex="-1" autocomplete="off" />
  <button type="submit">Send</button>
</form>

AJAX fetch (vanilla JS)

contact.html

<form id="contact-form">
  <label>
    Name
    <input type="text" name="name" required />
  </label>
  <label>
    Email
    <input type="email" name="email" required />
  </label>
  <label>
    Message
    <textarea name="message" required placeholder="How can we help?"></textarea>
  </label>
  <!-- honeypot: bots fill this, humans don't see it -->
  <input type="checkbox" name="botcheck" style="display:none" tabindex="-1" autocomplete="off" />
  <button type="submit">Send</button>
</form>

<script>
const form = document.getElementById("contact-form");
form.addEventListener("submit", async (e) => {
  e.preventDefault();
  const res = await fetch("https://formloom.vercel.app/api/submit/YOUR_ACCESS_KEY", {
    method: "POST",
    headers: { "Content-Type": "application/json", Accept: "application/json" },
    body: JSON.stringify(Object.fromEntries(new FormData(form))),
  });
  const data = await res.json();
  if (data.success) {
    form.reset();
    alert("Thanks — we got your message.");
  } else {
    alert(data.message || "Something went wrong.");
  }
});
</script>

@formloom/client (typed SDK)

submit.ts

// npm i @formloom/client
import { createForm } from "@formloom/client";

type Contact = {
  name: string;
  email: string;
  message: string;
};

const form = createForm<Contact>("YOUR_ACCESS_KEY");

// End-to-end typed: TS errors if you send the wrong shape.
const { success, message } = await form.submit({
  name: form.name.value,
  email: form.email.value,
  message: form.message.value,
});

Gotchas

Hugo has no server, so the browser POSTs directly to FormLoom — use the plain HTML form.
Wrap the form in a shortcode if you want to reuse it across content pages.
Use `redirect` to a `/thanks/` page since there's no JS by default.

Form types for Hugo

Tailored field sets and code for common use cases.

Hugo contact form Hugo newsletter form Hugo waitlist form Hugo feedback form Hugo support ticket form Hugo lead capture form Hugo rsvp form Hugo job application form Hugo survey form Hugo bug report form

FAQ

No. The plain HTML form POSTs to FormLoom directly from the visitor's browser.