Form Integration

Contact Form for Hugo Websites

Easily add contact forms to your Hugo static site—no backend or JavaScript required. Use FormBold’s API endpoint to start collecting submissions in minutes.

Hugo Contact Form

Hugo Contact Form with Backend API

Create fully functional contact forms in your Hugo site without writing server-side code. With FormBold, you only need to paste your unique API endpoint into the form’s action attribute—setup is quick and backend-free.

hugo.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

See How It Works

FormBold makes it simple to integrate contact forms into Hugo sites—no plugins, JavaScript, or server configuration needed.

1

Create an Account

Generate your unique FormBold API endpoint after signing up.

2

Paste the Action URL

Copy the example form code and insert your endpoint into the action attribute.

3

Start Receiving Submissions

Submissions go straight to your FormBold dashboard, email inbox, or any connected third-party app.

Features

Key Features of FormBold

Enhance your Hugo forms with powerful features—without adding backend complexity.

No Backend Required

Works perfectly with static Hugo websites—no server or scripting needed.

Instant Email Notifications

Get submissions delivered to your inbox and integrated platforms in real-time.

Spam Protection Built-In

Includes server-side validation and optional Google reCAPTCHA to keep bots out.

File Upload Support

Allow users to upload files with auto-generated CDN links included.

Connect to 5+ Apps

Easily integrate with Slack, Notion, Sheets, Telegram, and more—no code required.

FAQ's

Frequently Asked Questions

Common queries about using FormBold with Hugo websites:

Use FormBold’s API endpoint as your form’s action URL and set the method to POST—no backend or JS needed.