# Vite

Submit a Vite contact form with npm @formsreach/js and submitForm. No API route.

## What you will achieve

A vanilla Vite JS or TS module that submits a contact form with `submitForm` from `@formsreach/js`. No local API route.

## Prerequisites

- A [FormsReach form and API key](/docs/getting-started/create-form-api-key/)
- A Vite app (`npm create vite@latest`) using the vanilla JavaScript or TypeScript template

If you scaffolded React or Vue, stop here and use [React](/docs/frameworks/react/) or [Vue](/docs/frameworks/vue/) instead.

## Steps

### 1. Install

```bash
npm i @formsreach/js
```

### 2. Add the env var

Create a `.env` file in the Vite project root:

```bash
VITE_FORMSREACH_API_KEY=YOUR_ACCESS_KEY
```

Vite only exposes variables that start with `VITE_`. Restart the dev server after you change `.env`.

### 3. Submit from a vanilla module

```js
import { submitForm } from "@formsreach/js";

const form = document.querySelector("#contact");

form.addEventListener("submit", async (event) => {
  event.preventDefault();
  const formData = new FormData(form);
  try {
    const { id, redirectUrl } = await submitForm({
      apiKey: import.meta.env.VITE_FORMSREACH_API_KEY,
      data: {
        name: String(formData.get("name") ?? ""),
        email: String(formData.get("email") ?? ""),
        message: String(formData.get("message") ?? ""),
      },
    });
    console.log(id, redirectUrl);
  } catch (error) {
    console.error(error);
  }
});
```

TypeScript uses the same call. Types ship with `@formsreach/js`.

`apiKey` is the form public key. `data` is the field map (same names you would use as HTML `name` attributes). The return value includes submission `id` and optional `redirectUrl` when a [custom redirect](/docs/submit-api/redirect/) is configured.

More detail: [Programmatic submit](/docs/submit-api/json/).

## Verify

- Submit once from the browser (`npm run dev`)
- Confirm the row in **Submissions** for that form

## Common failures

| Symptom | Check |
|---|---|
| `apiKey` is undefined | Name must be `VITE_FORMSREACH_API_KEY`. Restart `vite` after editing `.env` |
| Submit during build | Call `submitForm` from a browser event, not from a module that runs in Node |
| Nothing in Submissions | Confirm the key and [domain allowlist](/docs/submit-api/domains/) |
| React or Vue template | Use the React or Vue guide, not this vanilla handler |

## Next

- [Email channel](/docs/channels/email/)
- [Programmatic submit](/docs/submit-api/json/)
- [JavaScript](/docs/frameworks/javascript/) for CDN + `data-formsreach`
- Marketing landing: [/frameworks/vite/](/frameworks/vite/)