Frameworks

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

If you scaffolded React or Vue, stop here and use React or Vue instead.

Steps

1. Install

npm i @formsreach/js

2. Add the env var

Create a .env file in the Vite project root:

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

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 is configured.

More detail: Programmatic submit.

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
React or Vue template Use the React or Vue guide, not this vanilla handler

Next

Previous
Next