Hugo

HTML Forms with Hugo

Hugo renders pure static HTML, which is exactly what a Formward form needs: set the endpoint once in your site config and reference it from any template or shortcode.

1. 01Create your form in Formward

   Sign up at formward.eu, create a new form, and copy the endpoint URL (https://forms.formward.eu/f/your-form-id). Store it in your Hugo config so templates can reference it.

   # hugo.toml
   [params]
     formwardEndpoint = "https://forms.formward.eu/f/your-form-id"

2. 02Add a contact shortcode

   Create layouts/shortcodes/contact-form.html with the markup below. The {{ .Site.Params.formwardEndpoint }} tag inserts the endpoint from your config at build time, so changing it later is a one-line edit.

   <form action="{{ .Site.Params.formwardEndpoint }}" 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>
   
     <!-- honeypot: keep hidden -->
     <input type="text" name="_gotcha" style="display:none" tabindex="-1" autocomplete="off" />
   
     <button type="submit">Send</button>
   </form>

3. 03Use the shortcode in any content page

   Drop the shortcode into content/contact.md (or any page). Hugo renders it to plain HTML; there is no JavaScript to add and nothing else to deploy.

   ---
   title: "Contact"
   ---
   
   Have a question? Send us a message.
   
   {{</* contact-form */>}}

4. 04Test a submission

   Run hugo server, open /contact/, and submit the form. The submission appears in your Formward dashboard and lands in your notification inbox. The honeypot field keeps naive bots out from day one; enable Turnstile in the form's settings if you want a challenge.