Hugo Quick Start

Overview

Hugo sites are static HTML deployed to any hosting provider. RizzForms accepts standard HTML form submissions cross-origin, so integration is a single HTML form with your endpoint URL. Works on Netlify, Vercel, Cloudflare Pages, GitHub Pages, or any static host.

HTML Form

Add a contact form to any Hugo page or layout. Point the action to your RizzForms endpoint.

<!-- In any Hugo template or content file -->
<form action="https://forms.rizzness.com/f/YOUR_TOKEN" method="POST">
  <!-- Honeypot: hidden from users, catches bots -->
  <input type="text" name="_hp" style="display:none" tabindex="-1" autocomplete="off">

  <label for="name">Name</label>
  <input type="text" id="name" name="name" required>

  <label for="email">Email</label>
  <input type="email" id="email" name="email" required>

  <label for="message">Message</label>
  <textarea id="message" name="message"></textarea>

  <button type="submit">Send</button>
</form>

Using Site Params

Store your endpoint token in Hugo's site configuration so you can change it without editing templates. Add it to hugo.toml (or config.toml):

# hugo.toml
[params]
  rizzforms_token = "your_endpoint_token"

Then reference it in your templates with Hugo's template syntax:

<form action="https://forms.rizzness.com/f/{{ .Site.Params.rizzforms_token }}" method="POST">
  <input type="text" name="_hp" style="display:none" tabindex="-1" autocomplete="off">

  <label for="email">Email</label>
  <input type="email" id="email" name="email" required>

  <label for="message">Message</label>
  <textarea id="message" name="message"></textarea>

  <button type="submit">Send</button>
</form>

Reusable Partial

Create a reusable form partial at layouts/partials/rizzforms-contact.html so you can include it on any page:

<!-- layouts/partials/rizzforms-contact.html -->
<form action="https://forms.rizzness.com/f/{{ .Site.Params.rizzforms_token }}" method="POST">
  <input type="text" name="_hp" style="display:none" tabindex="-1" autocomplete="off">

  <label for="name">Name</label>
  <input type="text" id="name" name="name" required>

  <label for="email">Email</label>
  <input type="email" id="email" name="email" required>

  <label for="message">Message</label>
  <textarea id="message" name="message"></textarea>

  <button type="submit">Send</button>
</form>

Include it in any template:

{{ partial "rizzforms-contact.html" . }}