How to add a contact form to a Hugo site

Add a contact form to your Hugo site by posting plain HTML to a Lamofel endpoint -- the form needs no Hugo plugin and no server code of your own, because it posts straight to Lamofel.

1. Generate the form. Use the free contact form generator at lamofel.com/tools: pick the fields, and it gives you ready-to-paste plain HTML. No account is needed to generate a form.
2. Put the form in a shortcode. Hugo does not render raw HTML written inside Markdown content unless you turn that on, so the simplest way is a shortcode: a template that Hugo runs inside your content. Create the file layouts/_shortcodes/contact-form.html and paste the generator's HTML into it (the form action ends in the placeholder CLAIM_YOUR_ENDPOINT until you claim an endpoint):

<form action="https://lamofel.com/f/CLAIM_YOUR_ENDPOINT" method="POST">
  <label for="field-name">Name</label>
  <input id="field-name" type="text" name="name" required>
  <label for="field-email">Email</label>
  <input id="field-email" type="email" name="email" required>
  <label for="field-message">Message</label>
  <textarea id="field-message" name="message" rows="5" required></textarea>
  <input type="text" name="_gotcha" tabindex="-1" autocomplete="off" hidden>
  <button type="submit">Send message</button>
</form>

Then call it from a content page such as content/contact.md with {{< contact-form >}}. If your Hugo version is older than v0.146.0, the shortcode folder is named differently; check the docs for your version.

Keep the hidden _gotcha field as generated: it is the spam trap. A filled-in _gotcha field marks the post as spam.

Prefer to paste the form straight into a Markdown page? Hugo leaves raw HTML out of the output by default. Setting markup.goldmark.renderer.unsafe to true in your site configuration makes it render raw HTML mixed into Markdown, and it is unsafe unless you control all the content.

3. Claim your endpoint. On the generator's result page, enter the email address where submissions should arrive and press "Claim my endpoint". Your account, the form and the live endpoint are created right away; the claim result gives you the form HTML with your real endpoint in the form action -- paste that version in place of the placeholder. Delivery starts after you confirm that address from the email Lamofel sends you; submissions sent before you confirm are stored but not emailed. The confirmation link works for 7 days (see lamofel.com/privacy).
4. Build and deploy your Hugo site the way you normally do.
5. Send a test submission from the live page and check that it arrives in your confirmed inbox.

Limits

• Submissions are stored for 30 days, then deleted.
• The Free plan includes 100 messages a month and a "Powered by" footer on the thanks page.
• Paid plans (Starter and Pro) are available on lamofel.com/plans.
• Support is by email, with a reply within 2 business days (India time, Monday to Friday).

Generate a free form · See plans