# JavaScript

Add FormsReach with the @formsreach/js CDN or npm package - data-formsreach forms and programmatic submit.

## What you will achieve

A contact form that submits without a full page reload using the official JavaScript SDK.

## Prerequisites

- A [FormsReach form and API key](/docs/getting-started/create-form-api-key/)
- A page that can load a script (or a bundler for npm)

## Steps

### 1. Drop in the CDN (fastest)

```html
<script src="https://unpkg.com/@formsreach/js/dist/formsreach.min.js"></script>
<script>
 FormsReach.init({ apiKey: "YOUR_ACCESS_KEY" });
</script>

<form data-formsreach>
 <input type="text" name="name" required />
 <input type="email" name="email" required />
 <textarea name="message" required></textarea>
 <button type="submit">Submit</button>
</form>
```

`FormsReach.init` sets the default API key. Forms marked with `data-formsreach` are intercepted after init.

### 2. Or install with npm

```bash
npm install @formsreach/js
```

Programmatic submit (custom UI):

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

const { id, redirectUrl } = await submitForm({
 apiKey: "YOUR_ACCESS_KEY",
 data: {
 name: "Ada Lovelace",
 email: "ada@example.com",
 message: "Hello from JS",
 },
});
```

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

## Verify

- Submit once from the browser
- Confirm the row in **Submissions** for that form

## Common failures

| Symptom | Check |
|---|---|
| Form does a full navigation | Missing `data-formsreach` or `init` not called |
| Empty payload | Inputs need `name` attributes |
| Script 404 | CDN URL must be `formsreach.min.js` as above |

## Next

- [React](/docs/frameworks/react/) or [Vue](/docs/frameworks/vue/) for framework apps
- [Email channel](/docs/channels/email/)
- Marketing landing: [/integrations/javascript/](/integrations/javascript/)