Remix

Remix runs on React, so you can drop the @formstork/react hook straight into a route component. Nothing else to wire up: the hook collects the fields and posts them for you.

Route component

npm install @formstork/react

// app/routes/contact.tsx
import { useFormstork } from "@formstork/react";

export default function Contact() {
  const { submit, isSubmitting, isSuccess, message } = useFormstork({
    accessKey: "YOUR_ACCESS_KEY",
  });

  if (isSuccess) return <p>Thanks, {message}</p>;

  return (
    <form onSubmit={submit}>
      <input type="text" name="name" required />
      <input type="email" name="email" required />
      <textarea name="message" required />
      <button disabled={isSubmitting}>
        {isSubmitting ? "Sending..." : "Send"}
      </button>
    </form>
  );
}

Step by step

1. Create a form in the dashboard and copy its free access key.
2. Install the hook with npm install @formstork/react.
3. Add a route file like app/routes/contact.tsx and paste the component above.
4. Replace YOUR_ACCESS_KEY with your key. The access key is safe to ship to the browser, so no environment variable is required.
5. Visit the route and submit. The hook posts to https://api.formstork.com/submit, then flips isSuccess once the submission lands in your inbox and dashboard.

The Free plan covers 250 submissions a month.

Server-side with a Remix action

Prefer to keep the request off the client? A Remix action can POST to the same endpoint with fetch:

// app/routes/contact.tsx
export async function action({ request }: { request: Request }) {
  const form = await request.formData();
  form.append("access_key", "YOUR_ACCESS_KEY");

  await fetch("https://api.formstork.com/submit", {
    method: "POST",
    body: form,
    headers: { Accept: "application/json" },
  });

  return { ok: true };
}

Pair it with a plain <form method="post"> and Remix handles the submission without any client JavaScript.