React / Next.js Integration

Use FormSync with React and Next.js using the built-in FormSyncForm and FormSyncButton components.

Install the Package

Install FormSync using your preferred package manager:


npm installformsync

You can also use pnpm, yarn, or bun.

Please Note

FormSync is currently in development. We are actively working on improving the package. If you face any issues or have feedback, please create an issue on GitHub.

Basic Usage with React / Next.js

FormSync now provides a React-first API using the FormSyncForm component. You no longer need to manually create an instance or use the action attribute.

You can still use the action attribute if you prefer, but it is not recommended in React.

Example

jsx
1import { FormSyncForm } from "formsync";
2import { toast } from "react-toast-msg";
3
4export default function Example() {
5    return (
6        <main>
7            <FormSyncForm
8                formId="YOUR_FORM_ID"
9                onSuccess={(res) => toast.success(res.message)}
10                onSubmitError={(err) => toast.error(err.message)}
11            >
12                <input
13                    type="text"
14                    name="name"
15                    placeholder="Name"
16                    required
17                />
18                <button type="submit">
19                    Submit
20                </button>
21            </FormSyncForm>
22        </main>
23    );
24}

Handling Form States

Success Callback

The onSuccess prop is triggered when the form submission is successful.

jsx
1onSuccess={(res) => {
2    console.log(res.message);
3}}

Error Callback

The onSubmitError prop is triggered if the submission fails.

jsx
1onSubmitError={(err) => {
2    console.error(err.message);
3}}

Both callbacks receive a structured response object from FormSync.

FormSyncForm Props

Prop	Type	Required	Description
`formId`	`string`	`true`	Your unique Form ID from the dashboard.
`onSuccess`	`function`	`false`	Callback triggered on successful submission.
`onSubmitError`	`function`	`false`	Callback triggered when submission fails.
`className`	`string`	`false`	Custom CSS classes for the form element.

Loading State with FormSyncButton

If you want a built-in loading state for your submit button, use FormSyncButton.

Example

jsx
1import { FormSyncForm, FormSyncButton } from "formsync";
2
3<FormSyncForm formId="YOUR_FORM_ID">
4    <input name="name" required />
5    <input type="email" name="email" required />
6    <textarea name="message" required />
7
8    <FormSyncButton
9        loadingText="Submitting..."
10        className="bg-blue-500 text-white px-4 py-2 rounded"
11    >
12        Submit
13    </FormSyncButton>
14</FormSyncForm>

FormSyncButton Props

Prop	Type	Required	Description
`loadingText`	`string`	`false`	Text to display while submitting (defaults to "Loading...").
`className`	`string`	`false`	Custom CSS classes for the button.
`disabled`	`boolean`	`false`	Manually disable the button.

What FormSyncButton Does

Automatically disables the button during submission
Shows loadingText while the form is submitting
Re-enables the button after completion

No extra state management is required.

That’s It 🎉

Once your form is live:

Submissions appear instantly in your FormSync dashboard
No backend or API routes are needed
Works seamlessly with React, Next.js, and static sites

You can now focus entirely on your UI while FormSync handles the rest.

How is this guide?

HTML Forms

Overview