Contact form for React websites

Yes — all three. The component code is identical. Vite uses import.meta.env.VITE_SPLITFORMS_KEY, CRA uses process.env.REACT_APP_SPLITFORMS_KEY, Remix uses process.env.SPLITFORMS_KEY (server-side via loader/action).

Splitforms doesn't require a CSRF token because each access key has built-in domain locking (in dashboard → Settings → Allowed domains). Submissions from any other origin are rejected. That's CSRF protection without the token plumbing.

Yes — they're orthogonal. Use them for client-side validation, then on submit either pass the validated data through fetch to splitforms.com/api/submit, or have them call e.target.requestSubmit() to use the native form path. Splitforms only cares about field name → value pairs in the body.

Nothing — the request already went through. If you want to prevent the back-button from re-submitting, redirect to a /thanks page after success (using react-router or window.location).

Splitforms accepts requests from any origin during development if your access key has no domain restrictions. Add localhost to allowed domains for production-mode testing, or skip restrictions for the dev key.

RSC can't have onSubmit handlers — they're server-rendered. Either use the server-action pattern (supported in Next.js / experimental in Remix) or wrap the form in a Client Component ("use client").

If a user double-clicks submit before the first request settles, you'll fire two POSTs. Always disable the button while status === 'loading'. Better still, also use an AbortController to cancel the in-flight request if a re-submit happens.

If you control inputs via useState (value={name} onChange={...}), the FormData object you build with new FormData(e.target) won't see your state — it reads the actual DOM. Either use uncontrolled inputs (no value prop) or build the body manually from state.

If your site has a strict Content Security Policy with connect-src 'self', fetch to splitforms.com will be blocked. Add splitforms.com to your connect-src directive: connect-src 'self' https://splitforms.com.

React 18+ strict mode mounts components twice in development to surface side effects. If you put your fetch call in useEffect (don't), you'll see double-submits. Always trigger network calls in event handlers, not effects.

Without preventDefault, the browser does its own form submission to wherever the form's action attribute points (or the current page) AND your handler runs — you get an unexpected page reload + your fetch call.

If you read process.env.REACT_APP_SPLITFORMS_KEY (CRA) or import.meta.env.VITE_SPLITFORMS_KEY (Vite) inside a useCallback or memoized handler, rotating the key in .env and saving doesn't update the captured value during HMR — only a full page refresh does. The form keeps POSTing the old key for the rest of the dev session and silently 401s. Read env vars at the module top level, or accept the key as a prop so React's normal reactivity propagates the new value.

React itself ships nothing for form submission — it's a view layer. The historical baseline is one of: an Express/Hono/Fastify server you stand up just for POST /api/contact, a Function-as-a-Service (Vercel/Netlify/Cloudflare) that ends up needing the same SMTP wiring, or a third-party form library (React Hook Form, Formik) that handles validation but still leaves you to operate the backend. Vite, CRA, and Remix all default to assuming you have somewhere to POST — they just don't tell you where. Splitforms is the where: a single fetch call, no library install, no useEffect gymnastics, no Express boilerplate.

Vite-built React apps are static — they deploy to any static host (Vercel, Netlify, Cloudflare Pages, S3, GitHub Pages). The splitforms fetch is cross-origin, so configure your CSP to allow connect-src 'self' https://splitforms.com if you have one. Vite reads env vars from .env at build time and only exposes those prefixed VITE_ to the browser bundle. CRA uses REACT_APP_ instead. On Cloudflare Pages, the build output is served from the edge with sub-50ms cold starts; splitforms adds another ~30ms RTT — not noticeable in practice. Lock the access key to your live origin in the splitforms dashboard.