FormSync

FormSync is the easiest way to accept and manage form submissions without building a backend.

FormSync lets you submit HTML & React forms directly to formsync.app with built-in spam protection, simple callbacks and zero server code.

👉 https://formsync.app

Installation

npm install formsync

or

yarn add formsync

Create a Form on FormSync

1. Go to https://formsync.app
2. Create a new form
3. Copy your Form ID

You’ll need this formId to submit data.

Basic Usage

import { FormSyncForm } from "formsync";

<FormSyncForm formId="YOUR_FORM_ID">
    <input name="email" />
    <button type="submit">Submit</button>
</FormSyncForm>

That’s it. No backend. No API routes.

With Success & Error Handling

import { FormSyncForm } from "formsync";

<FormSyncForm
    formId="YOUR_FORM_ID"
    onSuccess={(res) => console.log("Success:", res)}
    onSubmitError={(err) => console.error("Error:", err)}
>
    <input name="email" />
    <button type="submit">Submit</button>
</FormSyncForm>

Using the FormSync Button (Recommended)

FormSync provides a special submit button that automatically shows loading state.

import { FormSyncForm, FormSyncButton } from "formsync";

<FormSyncForm formId="YOUR_FORM_ID">
    <input name="email" />

    <FormSyncButton>
        Submit
    </FormSyncButton>
</FormSyncForm>

Default behavior

• Shows “Submit”
• On submit → shows “Submitting…”
• Button auto-disables while submitting

Spam Protection

FormSync automatically injects a hidden honeypot field:

<input type="text" name="_fs_hp" hidden />

Bots fill it → submissions are ignored. Humans never see it.

🧩 Works With

• React
• Next.js (App Router & Pages Router)
• Vite
• CRA
• Remix (client side)

API Reference

<FormSyncForm />

| Prop | Type | Description | | --------------- | --------------- | -------------------------------------- | | formId | string | Required Form ID from formsync.app | | onSuccess | (res) => void | Called on successful submission | | onSubmitError | (err) => void | Called on failed submission | | ...props | form props | All native <form> attributes |

<FormSyncButton />

| Feature | Supported | | ------------------ | --------- | | Loading state | yes | | Disabled on submit | yes | | Custom UI | yes | | Optional usage | yes |

Links

Website: https://formsync.app