Frameworks

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

Steps

1. Drop in the CDN (fastest)

<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

npm install @formsreach/js

Programmatic submit (custom UI):

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.

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

Previous
Next