Vercel

Deploy sites with onsubmit.dev forms on Vercel. Works with any framework — Next.js, Astro, SvelteKit, and more.

Overview

onsubmit.dev works out of the box with Vercel deployments. Your forms submit directly to onsubmit.dev's API — no server-side configuration required.

Your form ID is available in the onsubmit.dev dashboard after creating a form.

With Next.js

For Next.js projects, use the nextjs-onsubmit package:

bash

npm install nextjs-onsubmit

tsx

// app/contact/page.tsx
import { OnSubmitForm } from 'nextjs-onsubmit';

export default function ContactPage() {
  return (
    <OnSubmitForm
      formId="YOUR_FORM_ID"
      successMessage="Thanks! We'll be in touch."
    >
      <input name="name" placeholder="Your name" required />
      <input name="email" type="email" placeholder="Email" required />
      <button type="submit">Send</button>
    </OnSubmitForm>
  );
}

Other frameworks

For other frameworks deployed on Vercel, use plain HTML forms or the appropriate framework package:

html

<form action="https://onsubmit.dev/f/YOUR_FORM_ID" method="POST">
  <input name="name" placeholder="Your name" required />
  <input name="email" type="email" placeholder="Email" required />
  <button type="submit">Send</button>
</form>

Environment variables

Store your form ID in environment variables for easier management across environments:

bash

# .env.local
NEXT_PUBLIC_CONTACT_FORM_ID=your-form-id

tsx

<OnSubmitForm formId={process.env.NEXT_PUBLIC_CONTACT_FORM_ID!}>
  {/* ... */}
</OnSubmitForm>