send.webforms.toRead the docs →

WebForms

Frameworks and libraries

Add a contact form to Remix

Remix (now React Router v7) is built around the platform's own form semantics, so a contact form is already progressive by default. All that is missing is the destination. Forward the FormData from your action to a WebForms endpoint and you get storage, spam filtering and fan-out without adding a mail provider to your stack.

Get an endpointRead the docs

Setup

  1. Copy your endpoint

    Create a form in the dashboard.

  2. Forward from your action

    Your action already receives FormData. Pass it straight through.

  3. Return the result

    Return validation issues to the component so useActionData can render them inline.

Remix / React Router examples

Swap in your own endpoint and these run as-is.

app/routes/contact.tsx
import { Form, useActionData, useNavigation } from "react-router";
import type { Route } from "./+types/contact";

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

  const res = await fetch("https://send.webforms.to/wft_your_key", {
    method: "POST",
    headers: { accept: "application/json" },
    body: formData,
  });

  const data = await res.json();
  if (!data.ok) return { error: data.message ?? "Submission failed" };
  return { ok: true };
}

export default function Contact() {
  const result = useActionData<typeof action>();
  const nav = useNavigation();
  const sending = nav.state === "submitting";

  if (result?.ok) return <p role="status">Thanks, we got it.</p>;

  return (
    <Form method="post">
      <input name="name" required />
      <input name="email" type="email" required />
      <textarea name="message" required />
      <button disabled={sending}>{sending ? "Sending…" : "Send"}</button>
      {result?.error && <p role="alert">{result.error}</p>}
    </Form>
  );
}

Worth knowing

Remix / React Router form FAQ

Yes. That is the point of Remix's <Form>. The action runs on a normal browser POST and the response is a normal navigation.

Related guides

Ready to wire up your Remix / React Router form?

Free for 300 submissions a month. Endpoint in under a minute, no card required.

Start free