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

# SvelteKit

> Submit a SvelteKit page to an Endpoint form.

This guide uses Svelte 5 (`$state` and the `onsubmit` attribute), which is what new SvelteKit projects create.

## 1. Save your Public Key

Copy the Public Key from the Endpoint form's **General** tab and add it to `.env` in your project root:

```bash .env theme={null}
PUBLIC_SURVEYOWL_KEY=YOUR_FORM_PUBLIC_KEY
```

SvelteKit only exposes variables that start with `PUBLIC_` to browser code. The key is safe to expose; it can only add responses to this form.

## 2. Create the page

```svelte src/routes/contact/+page.svelte theme={null}
<script lang="ts">
  import { PUBLIC_SURVEYOWL_KEY } from '$env/static/public';

  const endpoint = `https://api.surveyowl.co/v1/submit/${PUBLIC_SURVEYOWL_KEY}`;

  let status = $state('');
  let sending = $state(false);

  async function onsubmit(event: SubmitEvent) {
    event.preventDefault();
    const form = event.currentTarget as HTMLFormElement;
    sending = true;
    status = '';

    try {
      const response = await fetch(endpoint, {
        method: 'POST',
        body: new FormData(form),
      });
      const result = await response.json();

      if (!response.ok) {
        const message =
          typeof result.error === 'string' ? result.error : result.error?.message;
        throw new Error(message || 'Could not send the form.');
      }

      form.reset();
      status = 'Thanks — your message was sent.';
    } catch (error) {
      status = error instanceof Error ? error.message : 'Something went wrong.';
    } finally {
      sending = false;
    }
  }
</script>

<h1>Contact us</h1>

<form {onsubmit}>
  <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" disabled={sending}>
    {sending ? 'Sending…' : 'Send message'}
  </button>
  <p role="status">{status}</p>
</form>
```

Open `/contact`, send a test response, and check **Submissions**.

## Good to know

* On Svelte 4, replace `$state(...)` with plain `let` variables and use `on:submit={onsubmit}` instead of `{onsubmit}`.
* This is a client-side request, so you do not need a `+server.ts` endpoint or a form action.
* Restart `vite dev` after editing `.env`.
* If you enable [domain restriction](/developer-api/submit-a-response#domain-restriction), allow `localhost` while you develop.


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