Hugo

Hugo builds plain HTML, so the form can post straight to your endpoint without JavaScript. You will store the Public Key once in your site config and use a shortcode to place the form on any page.

1. Save your Public Key

Copy the Public Key from the Endpoint form’s General tab and add it to your site configuration:

hugo.toml

baseURL = "https://example.com/"

[params]
  surveyowlKey = "YOUR_FORM_PUBLIC_KEY"

Older sites may call this file config.toml. Put the setting in whichever one you already have.

2. Create the shortcode

layouts/shortcodes/contact-form.html

<form action="https://api.surveyowl.co/v1/submit/{{ site.Params.surveyowlKey }}" method="POST">
  <input type="hidden" name="redirect" value="{{ "thank-you/" | absURL }}" />

  <label for="name">Name</label>
  <input id="name" name="name" required />

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

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

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

The hidden redirect field sends visitors to your own thank-you page after a successful submission. It is not stored as an answer.

3. Add the pages

Create the page that shows the form:

content/contact.md

---
title: Contact
---

{{< contact-form >}}

And the page visitors land on afterwards:

content/thank-you.md

---
title: Thank you
---

Thanks — your message was sent.

Run hugo server, open /contact/, and send a test response. Then check Submissions in the dashboard.

Good to know

Make sure baseURL is set to your live address before you deploy; absURL uses it to build the redirect link.
You can use the shortcode on as many pages as you like. To collect from a second form, create a second Endpoint form and a second shortcode with its own key.
Want a message on the same page instead of a redirect? Use the JavaScript example inside the shortcode.

Welcome

Hosted forms

Endpoint forms

Responses

Integrations

Build your form

Publish and share

Settings

Payments

Account and billing

1. Save your Public Key

2. Create the shortcode

3. Add the pages

Good to know

​1. Save your Public Key

​2. Create the shortcode

​3. Add the pages

​Good to know

1. Save your Public Key

2. Create the shortcode

3. Add the pages

Good to know