> ## Documentation Index
> Fetch the complete documentation index at: https://docs.surveyowl.co/llms.txt
> Use this file to discover all available pages before exploring further.

# Hugo

> Add an Endpoint form to a Hugo site with a reusable shortcode.

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:

```toml hugo.toml theme={null}
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

```html layouts/shortcodes/contact-form.html theme={null}
<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:

```markdown content/contact.md theme={null}
---
title: Contact
---

{{< contact-form >}}
```

And the page visitors land on afterwards:

```markdown content/thank-you.md theme={null}
---
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](/developer-api/javascript) inside the shortcode.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.