Add a Contact Form to Your Hugo Site

Hugo generates static HTML, which means no built-in way to handle form submissions. staticq solves this — point your form at a staticq endpoint and submissions are captured and forwarded to your email.

Code example

Create a partial at layouts/partials/contact-form.html:

<form action="https://api.staticq.app/q/your-form-slug" method="POST">
  <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" required></textarea>

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

Include it in any template:

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

Setup steps

1. Create a form in the staticq dashboard. Name it and set your notification email.
2. Copy the endpoint — it looks like https://api.staticq.app/q/your-form-slug.
3. Add the partial to your Hugo site and reference it from your contact page layout.
4. Build and test. Run hugo serve, submit the form, and check your staticq dashboard for the submission.

Get started

staticq is free to start with — no credit card required. Create your first form and have submissions flowing in minutes. See pricing for plan details.