Vite

Vite contact form without a backend

Add a Vite contact form with @formsreach/js. Import submitForm in a vanilla JS or TS module. No API route and no custom server. Deliver submissions by email with spam filtering and to WhatsApp in seconds, metered with monthly credits.

HTML
Bootstrap
JavaScript
Vite
React
Next.js
Astro
Vue
Nuxt
Angular
Svelte
Gatsby
Hugo
Remix
SolidJS
TanStack Start
Get Started

Set up FormsReach with Vite

Connect your form in a few steps. No custom backend required.

  1. 1

    Get your API key

    Create an account at FormsReach and copy your form API key.

  2. 2

    Install the JS SDK

    In your Vite app run npm i @formsreach/js. Put the key in .env as VITE_FORMSREACH_API_KEY.

  3. 3

    Call submitForm

    Import submitForm from @formsreach/js in a vanilla JS or TS module. Pass apiKey from import.meta.env.VITE_FORMSREACH_API_KEY and a data map of name, email, and message. Submit once and confirm the row in Submissions.

JavaScript snippet

Copy this into your project, then swap in your FormsReach API key.

          // npm install @formsreach/js
import { submitForm } from "@formsreach/js";

const { id, redirectUrl } = await submitForm({
  apiKey: import.meta.env.VITE_FORMSREACH_API_KEY,
  data: {
    name: "Ada Lovelace",
    email: "ada@example.com",
    message: "Hello from Vite",
  },
});

Why Vite does not need a form API route

Vite is a bundler and dev server, not a form backend. Import submitForm from @formsreach/js in a client module and post to FormsReach. You do not add an /api route or a mailer in the Vite repo.

If you scaffolded React or Vue with create-vite, use those framework pages instead of this vanilla recipe.

Platform notes

Troubleshooting

What you get

Monthly credits for submissions and delivery. Scale when volume grows.

Free

500 credits every month for form submissions, email, webhooks, and workflow rules. Spam filtering included. No credit card required.

Starter, Pro & Agency

Larger monthly credit pools (2,000 / 5,000 / 18,000). WhatsApp via Meta Business API unlocks on Pro and Agency. See pricing.

FAQ

Common questions about FormsReach with Vite.

Is there a Vite plugin or @formsreach/vite package?+

No. Use the official @formsreach/js package and call submitForm from a vanilla Vite module.

Does this work with JavaScript and TypeScript?+

Yes. The import is the same. TypeScript uses the types shipped with @formsreach/js.

How do I store the API key in Vite?+

Add VITE_FORMSREACH_API_KEY to a .env file and read import.meta.env.VITE_FORMSREACH_API_KEY. Restart the Vite dev server after changing env files.

Does Free include WhatsApp and email?+

Free includes email, webhooks, and workflow rules with 500 credits every month. WhatsApp is available on Pro and Agency.

Related frameworks

More framework guides that use the same FormsReach form API.

Ready to receive form leads?

Create a free API key. Upgrade when you need more monthly credits.

Get started →Docs guide