Does this work on GitHub Pages or Netlify?

Yes. Hugo outputs static HTML and the form posts directly to FormSubmit.

How to add a contact form to a Hugo site

To add a contact form to Hugo, create a shortcode that renders an HTML form whose action is your FormSubmit endpoint. Hugo stays fully static, and FormSubmit receives submissions, filters spam and emails you.

1. Add the endpoint to your config

hugo.toml

[params]
  formsubmitEndpoint = "https://formsubmit.app/f/YOUR_FORM_ID"

2. Create a shortcode

layouts/shortcodes/contact-form.html

<form action="{{ site.Params.formsubmitEndpoint }}" method="POST" class="contact-form">
  <label for="name">Name</label>
  <input id="name" type="text" name="name" required>

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

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

  <input type="hidden" name="_redirect" value="{{ "thanks/" | absURL }}">
  <input type="hidden" name="_subject" value="New message from {{ site.Title }}">
  <input type="text" name="_gotcha" style="display:none" tabindex="-1" autocomplete="off">

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

3. Use it in content

content/contact.md

---
title: Contact
---

We'd love to hear from you.

{{</* contact-form */>}}

(Remove the /* */ — it's there so this page doesn't render the shortcode.)

4. Thank-you page

Create content/thanks.md with a short message. The _redirect field sends visitors there after submitting.

Styling

Hugo themes vary, so add a few lines of CSS in your theme's stylesheet — or export a styled form from the form generator and paste it into the shortcode.

Next steps

Configure the domain allowlist and notifications. If you'd like submissions in a spreadsheet, see Google Sheets.