nextjs-onsubmit

Drop-in Next.js component and hook for onsubmit.dev.
Works with both App Router and Pages Router — no backend required.

Installation

npm install nextjs-onsubmit

Quick start

App Router

// 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 />
      <textarea name="message" placeholder="Message" />
      <button type="submit">Send</button>
    </OnSubmitForm>
  );
}

Pages Router

// pages/contact.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>
  );
}

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

useOnSubmit hook

For full control over the form UI, use the hook directly:

'use client';
import { useOnSubmit } from 'nextjs-onsubmit';

export function ContactForm() {
  const { handleSubmit, isLoading, isSuccess, error, reset } = useOnSubmit({
    formId: 'YOUR_FORM_ID',
    onSuccess: (data) => console.log('Submitted!', data),
  });

  if (isSuccess) return <p>Thanks! We'll be in touch.</p>;

  return (
    <form onSubmit={handleSubmit}>
      <input name="email" type="email" required />
      <button type="submit" disabled={isLoading}>
        {isLoading ? 'Sending…' : 'Send'}
      </button>
      {error && <p>{error}</p>}
    </form>
  );
}

Next.js router redirects

If the API response includes a redirect URL, pass router.push via onRedirect to navigate using the Next.js router instead of a hard redirect:

'use client';
import { useRouter } from 'next/navigation';
import { OnSubmitForm } from 'nextjs-onsubmit';

export function ContactForm() {
  const router = useRouter();

  return (
    <OnSubmitForm formId="YOUR_FORM_ID" onRedirect={router.push}>
      <input name="email" type="email" required />
      <button type="submit">Send</button>
    </OnSubmitForm>
  );
}

OnSubmitForm props

| Prop | Type | Description | |---|---|---| | formId | string | Required. Your onsubmit.dev form ID. | | successMessage | string | Text to show in place of the form on success. | | endpoint | string | Override the default API endpoint. | | onSuccess | (data) => void | Callback fired on successful submission. | | onError | (error) => void | Callback fired on submission error. | | onRedirect | (url: string) => void | Called when the API returns a redirect URL. |

All standard <form> HTML attributes are also accepted.

useOnSubmit options

| Option | Type | Description | |---|---|---| | formId | string | Required. Your onsubmit.dev form ID. | | endpoint | string | Override the default API endpoint. | | onSuccess | (data) => void | Callback fired on successful submission. | | onError | (error) => void | Callback fired on submission error. | | onRedirect | (url: string) => void | Called when the API returns a redirect URL. |

useOnSubmit return values

| Value | Type | Description | |---|---|---| | handleSubmit | (e) => Promise<void> | Pass to the form's onSubmit. | | isLoading | boolean | true while the request is in flight. | | isSuccess | boolean | true after a successful submission. | | error | string \| null | Error message, or null. | | data | unknown | Raw response data. | | reset | () => void | Resets all state back to initial values. |

File uploads

File inputs are handled automatically. When the form contains a file field the data is sent as multipart/form-data. Otherwise, JSON is used.

License

MIT