React form backend — submit forms without an API route

Submit from a client component

React

async function handleSubmit(event) {
  event.preventDefault();
  const data = Object.fromEntries(new FormData(event.currentTarget));

  const response = await fetch(
    'https://freelyform.com/f/FORM_ID',
    {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json',
      },
      body: JSON.stringify(data),
    },
  );

  const result = await response.json();
  if (!response.ok) {
    // result.error, result.fields
    return;
  }
  // result.id, result.status
}

The response is JSON when you ask for it. Include an Idempotency-Key header when a retry could create a duplicate ticket or charge.

Where the endpoint fits

Client-side apps: post directly; add the deployed origin to the allowlist.
Next.js app router: call the endpoint from a client component, or proxy it through a server action if you need to hide extra logic.
Vite and CRA: no build plugin is required; a normal fetch works.
Forms with files: send FormData with multipart/form-data; do not set the Content-Type header manually.

Validation layers

Client-side validation improves the experience, but it is not a security boundary. Configure require rules on the form so the endpoint rejects missing or malformed fields even when JavaScript is bypassed.

Inline status without a redirect

If you use a plain HTML form inside React, add /embed.js to get inline success and error text without writing a submit handler. The script intercepts forms that point at /f/ and posts them with fetch.

React form questions

Can I use FreelyForm with React Hook Form or Formik?

Yes. Those libraries manage client state and validation; the submit handler can send the same values to the FreelyForm endpoint with fetch. Server-side rules still apply as a second layer.

Do I need a Next.js API route?

No. A client component can post directly to the endpoint. A server action or route handler is optional if you want to proxy the request or add server-only logic.

How do I show field errors?

Send Accept: application/json and read the response body. A failing require rule returns a 422 response with the fields that need attention.

A form backend for React apps, without another API route.