Skip to content
Docs
Français formerie.com Sign up
 Docs

Try a topic, a function name, or an error code such as FORM_CLOSED.

 Français formerie.com

React Router quickstart

Add a working contact form to a React Router app. You write the form, and Formerie checks it, stores it, and emails you.

Install

Install @formerie/react @formerie/client
Shell 
npm install @formerie/react @formerie/client

Formerie packages are in alpha, so APIs can still change between releases.

Add the form

Use this as a route component, such as app/routes/contact-form.tsx.

TSX
import { useFormerieSubmit } from "@formerie/react";

export default function ContactForm() {
  const { submit, state } = useFormerieSubmit({ workspace: "acme", form: "contact" });

  return (
    <form
      onSubmit={(event) => {
        event.preventDefault();
        submit({ fields: Object.fromEntries(new FormData(event.currentTarget)) });
      }}
    >
      <input name="name" placeholder="Name" required />
      <input name="email" type="email" placeholder="Email" required />
      <textarea name="message" placeholder="Message" required />
      <button disabled={state.status === "submitting"}>Send</button>
      {state.result?.ok === true && <p>Thanks!</p>}
      {state.result?.ok === false && <p>{state.result.error.message}</p>}
    </form>
  );
}

Each input’s name is the field it fills in Formerie.

Set up the form in the app

  1. Open app.formerie.com and create a form named Contact. It comes with the name, email, and message fields this code sends.
  2. On the Delivery tab, add your email address, then choose Save delivery. Confirm the email Formerie sends you.
  3. On the Publish tab, choose API-only and add the address your dev server prints, such as http://localhost:5173, under Your website addresses. localhost and 127.0.0.1 count as different addresses. Add your live site’s address the same way when you deploy.
  4. Choose Publish form.
  5. In the code above, replace acme with the workspace handle shown on the Publish tab.

Check it arrived

Run your app, fill in the form, and send it. “Thanks!” appears on the page. In the app, your response shows under Submissions, and its email under Deliveries.

Seeing a CORS error, or NETWORK_ERROR? Your site’s address isn’t on the Publish tab yet, or you haven’t published since adding it. See Troubleshooting.

Going further

From your server

Use a route action, and a native form can post to it. Read what the server path costs before you choose it.

TypeScript
import { FormerieRuntimeClient } from "@formerie/client";
import type { Route } from "./+types/contact";

const formerie = new FormerieRuntimeClient();

export async function action({ request }: Route.ActionArgs) {
  const fields = Object.fromEntries(await request.formData());

  return formerie.submit("acme", "contact", { fields });
}

View as Markdown