Hugo contact form that sends email (no backend)

1Create a FormSMTP project

Sign up free and add a project. Pick your email provider so the SMTP host and port fill in, enter your login, and click Test connection. Not sure which provider? Your existing mailbox works: see the Gmail or Zoho guides.

2Lock the project to your site

In Settings → Security, set Allowed websites to https://yoursite.com and Allowed recipients to your own address. Now the key in your page can only email you, only from your site, and only up to your hourly limit.

3Add the key to your config

toml

# hugo.toml
[params.formsmtp]
  key = "YOUR_API_KEY"
  subject = "New message from my Hugo site"

4Create the partial

html

<!-- layouts/partials/contact-form.html -->
{{ with site.Params.formsmtp }}
<form class="contact" action="https://app.formsmtp.com/api/v1/form/{{ .key }}" method="POST">
  <label>Name <input name="name" autocomplete="name" required></label>
  <label>Email <input name="email" type="email" autocomplete="email" required></label>
  <label>Message <textarea name="message" rows="5" required></textarea></label>

  <input type="hidden" name="_subject" value="{{ .subject }}">
  <input type="hidden" name="_next" value="{{ "thanks/" | relURL }}">
  <input type="text" name="_gotcha" style="display:none" tabindex="-1" autocomplete="off">

  <button type="submit">Send message</button>
</form>
{{ end }}

Use it in any template with {{ partial "contact-form.html" . }}.

5Use it inside Markdown

Hugo doesn’t render raw HTML in content by default, so wrap the partial in a shortcode:

html

<!-- layouts/shortcodes/contact-form.html -->
{{ partial "contact-form.html" . }}

markdown

---
title: "Contact"
---

Questions, quotes or just hello:

{{< contact-form >}}

6Add the thank-you page

markdown

---
# content/thanks.md
title: "Thanks!"
sitemap:
  disable: true
---

Your message is on its way. We'll reply within a day or two.

[Back to the homepage](/)

After a successful submit, visitors land on /thanks/. FormSMTP only redirects back to the site the form is on. Build, deploy, and send a test message; it shows up in your inbox and under Logs.

FAQ

Does it work with any Hugo theme?

Yes. The partial is plain HTML, so it inherits your theme’s form styles. Add a class or a few lines of CSS if your theme doesn’t style forms.

Can I show a message without leaving the page?

Yes. Add a small script that submits the form with fetch() and an Accept: application/json header; the response tells you whether it was sent. See the static website guide for the snippet.

Why did my message land in spam?

Usually the From address and the SMTP account don’t match, or the domain has no SPF/DKIM records. Send from the address you log in with, and check the Deliverability panel in FormSMTP’s Settings.