Add a contact form to a Hugo site

Hugo builds static HTML, so the form posts straight to SiteBackend.

Add the endpoint to your config

[params]
  sitebackendForm = "https://api.sitebackend.com/forms/YOUR_FORM_ID"

Create a partial

<form action="{{ site.Params.sitebackendForm }}" method="POST">
  <input type="email" name="email" required>
  <textarea name="message" required></textarea>
  <input type="text" name="_gotcha" tabindex="-1" autocomplete="off" style="display:none">
  <button type="submit">Send</button>
</form>

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

Use it inside Markdown content

Hugo doesn't run partials inside Markdown. Wrap the partial in a shortcode:

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

Then write {{</* contact-form */>}} in any content file. If you use allowed origins, add http://localhost:1313 for local development.

Show testimonials too

SiteBackend can also collect testimonials from your customers and show them on your site, with two lines of embed code. See add testimonials to a Hugo site.