> ## 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.

# Eleventy

> Add an Endpoint form to an Eleventy (11ty) site.

Eleventy outputs static HTML, so a plain `<form>` can post to your endpoint. The Public Key goes in a global data file so every template can use it.

## 1. Save your Public Key

Copy the Public Key from the Endpoint form's **General** tab. Create a global data file inside your input directory's `_data` folder:

```json _data/site.json theme={null}
{
  "url": "https://example.com",
  "surveyowlKey": "YOUR_FORM_PUBLIC_KEY"
}
```

Anything in `_data` is available to every template as a variable named after the file—here, `site`.

## 2. Create the contact page

This example uses Nunjucks, but the `{{ }}` tags work the same in Liquid.

```html contact.njk theme={null}
---
layout: base.njk
title: Contact
permalink: /contact/
---

<h1>Contact us</h1>

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

  <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>
```

## 3. Create the thank-you page

```html thank-you.njk theme={null}
---
layout: base.njk
title: Thank you
permalink: /thank-you/
---

<h1>Thanks — your message was sent.</h1>
```

Run `npx @11ty/eleventy --serve`, open `/contact/`, and send a test response. Confirm it appears in **Submissions**.

## Good to know

* Change `layout: base.njk` to the layout your site already uses.
* While testing locally, the redirect points to `site.url`, so you will land on your live address. Temporarily set `url` to `http://localhost:8080`, or leave out the `redirect` field while you test.
* To show a message without leaving the page, use the [JavaScript example](/developer-api/javascript) in your template.


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