Form Integration

Hugo contact form as a partial

Hugo builds plain HTML, and a plain HTML form is all Formbold needs. Save the form as a partial, point it at your endpoint, and every submission is emailed to you.

Hugo Contact Form

What do I put in the partial?

Save this as layouts/partials/contact-form.html and call it from any layout with {{ partial "contact-form.html" . }}. Replace FORM_ID with the ID from your Form Setup tab.

hugo.html
<!-- layouts/partials/contact-form.html -->
<form
  action="https://formbold.com/s/FORM_ID"
  method="POST"
  class="flex flex-col gap-4 max-w-[452px] mx-auto"
>
  <!-- Full Name -->
  <div class="flex flex-col gap-2">
    <label for="name" class="text-sm font-medium text-gray-700">
      Full Name<span class="ml-0.5 text-red-500">*</span>
    </label>
    <input
      type="text"
      name="name"
      id="name"
      placeholder="Enter your full name"
      required
      class="max-h-11 w-full rounded-xl border border-gray-300 bg-white px-4 py-2.5 text-base text-gray-900 transition-all placeholder:text-[#9ca3af] focus:border-[#5750f1] focus:ring-4 focus:ring-[#5750f1]/10 focus:outline-none"
    />
  </div>

  <!-- Email Address -->
  <div class="flex flex-col gap-2">
    <label for="email" class="text-sm font-medium text-gray-700">
      Email Address<span class="ml-0.5 text-red-500">*</span>
    </label>
    <input
      type="email"
      name="email"
      id="email"
      placeholder="Enter your email"
      required
      class="max-h-11 w-full rounded-xl border border-gray-300 bg-white px-4 py-2.5 text-base text-gray-900 transition-all placeholder:text-[#9ca3af] focus:border-[#5750f1] focus:ring-4 focus:ring-[#5750f1]/10 focus:outline-none"
    />
  </div>

  <!-- Subject -->
  <div class="flex flex-col gap-2">
    <label for="subject" class="text-sm font-medium text-gray-700">
      Subject<span class="ml-0.5 text-red-500">*</span>
    </label>
    <input
      type="text"
      name="subject"
      id="subject"
      placeholder="Enter your subject"
      required
      class="max-h-11 w-full rounded-xl border border-gray-300 bg-white px-4 py-2.5 text-base text-gray-900 transition-all placeholder:text-[#9ca3af] focus:border-[#5750f1] focus:ring-4 focus:ring-[#5750f1]/10 focus:outline-none"
    />
  </div>

  <!-- Message -->
  <div class="flex flex-col gap-2">
    <label for="message" class="text-sm font-medium text-gray-700">
      Message<span class="ml-0.5 text-red-500">*</span>
    </label>
    <textarea
      name="message"
      id="message"
      rows="5"
      placeholder="Type your message..."
      required
      class="w-full resize-y rounded-xl border border-gray-300 bg-white px-4 py-3 text-base text-gray-900 transition-all placeholder:text-[#9ca3af] focus:border-[#5750f1] focus:ring-4 focus:ring-[#5750f1]/10 focus:outline-none"
    ></textarea>
  </div>

  <!-- Submit Button -->
  <button
    type="submit"
    class="flex h-12 w-full cursor-pointer items-center justify-center gap-2 rounded-xl bg-[#111827] px-5 py-3 text-base font-medium text-white shadow-xs transition-all hover:bg-black active:scale-[0.99] disabled:opacity-50"
  >
    Submit Message
  </button>
</form>
How it works

Setting it up in Hugo

Create a form in Formbold, save the partial, test it locally.

1

Create a form

In Formbold, click Create New Form and copy the endpoint. Free gives you 10 forms.

2

Save the partial

Paste the form into layouts/partials/contact-form.html with your endpoint in the action attribute.

3

Test with hugo server

Submit once on localhost:1313 and check Submissions before you deploy.

Features

Formbold on a Hugo site

Hugo stays a static site generator. Formbold receives the post, stores it and sends it on.

No server in your stack

Deploy to Netlify, Cloudflare Pages, GitHub Pages or S3 as usual. Nothing new runs anywhere.

Captcha without keys

Hugo outputs a native HTML post, so Automatic reCAPTCHA works without any keys. Turn it on along with Basic Spam Filter.

Uploads on paid plans

Starter and up. Give the partial's form tag enctype="multipart/form-data" and add a named file input.

Thank-you page

On Starter and higher, set a Redirect URL to a Hugo page such as /thanks/.

FAQs

Shortcodes, Markdown and spam

Answers about shortcodes, Markdown and spam.

Not directly, because Hugo doesn't render raw HTML in Markdown by default. Save the form as layouts/shortcodes/contact-form.html and write {{< contact-form >}} in your content instead.

Still have a question?

The docs cover setup, framework guides, integrations and spam protection, step by step.

Read the docs