# SvelteKit Quickstart

Add a working contact form to a SvelteKit app. You write the form, and Formerie checks it, stores it, and emails you.

## Install

npm:

```sh
npm install @formerie/svelte
```

pnpm:

```sh
pnpm add @formerie/svelte
```

Yarn:

```sh
yarn add @formerie/svelte
```

Bun:

```sh
bun add @formerie/svelte
```

## Add The Form

Save this as `src/routes/contact/+page.svelte`, or add it to the page you already have.

```svelte
<script>
  import { createFormerieSubmit } from "@formerie/svelte";

  const contact = createFormerieSubmit({ workspace: "acme", form: "contact" });
  const { result, isSubmitting } = contact;

  function onsubmit(event) {
    event.preventDefault();
    contact.submit({ fields: Object.fromEntries(new FormData(event.currentTarget)) });
  }
</script>

<form method="post" {onsubmit}>
  <input name="name" placeholder="Name" required />
  <input name="email" type="email" placeholder="Email" required />
  <textarea name="message" placeholder="Message" required></textarea>
  <button disabled={$isSubmitting}>Send</button>
  {#if $result?.ok === true}<p>Thanks!</p>{/if}
  {#if $result?.ok === false}<p>{$result.error.message}</p>{/if}
</form>
```

Each input's `name` is the field it fills in Formerie.

## Set Up The Form In The App

1. Open [app.formerie.com](https://app.formerie.com) and create a form named **Contact**. It comes with the
   name, email, and message fields this code sends.
2. On the **Delivery** tab, add your email address, then choose **Save delivery**. Confirm the email
   Formerie sends you.
3. On the **Publish** tab, choose **API-only** and add the address your dev server prints, such as `http://localhost:5173`, under
   **Your website addresses**. `localhost` and `127.0.0.1` count as different addresses. Add your live site's address the
   same way when you deploy.
4. Choose **Publish form**.
5. In the code above, replace `acme` with the workspace handle shown on the **Publish** tab.

## Check It Arrived

Run your app, fill in the form, and send it. "Thanks!" appears on the page. In the app, your response shows
under **Submissions**, and its email under **Deliveries**.

Seeing a CORS error, or `NETWORK_ERROR`? Your site's address isn't on the **Publish** tab yet, or you haven't published since adding it.
See [Troubleshooting](/guides/troubleshooting/).

## Read Next

- [Recipes](/guides/recipes/): quote requests, surveys, and routing by topic
- [Show field errors and more](/guides/framework-entry-points/#going-further)
- [SvelteKit form actions](/guides/framework-entry-points/#sveltekit), if the form has to work without JavaScript
- [JavaScript SDK](/guides/javascript-sdk/) and [API](/guides/api-reference/): the full reference