R
React contact form
Verified against React 19.x · June 2026
In a plain React SPA (Vite, CRA, etc.) you don't have a backend — which is exactly the case FormLoom is built for. Wire an `onSubmit` handler that serializes the form and `fetch`es FormLoom. You get a stored submission, a spam score, and a transactional email without standing up an API.
The code
Use an uncontrolled form with `new FormData(e.currentTarget)` for the least code, or controlled inputs with `useState` if you need validation UI. POST JSON with `Accept: application/json`.
React component (client)
ContactForm.tsx
// ContactForm.tsx — React (works in Vite, CRA, Next 'use client')
"use client";
import { useState } from "react";
export function ContactForm() {
const [status, setStatus] = useState<"idle" | "ok" | "error">("idle");
async function onSubmit(e: React.FormEvent<HTMLFormElement>) {
e.preventDefault();
const form = e.currentTarget;
const res = await fetch("https://formloom.vercel.app/api/submit/YOUR_ACCESS_KEY", {
method: "POST",
headers: { "Content-Type": "application/json", Accept: "application/json" },
body: JSON.stringify(Object.fromEntries(new FormData(form))),
});
setStatus((await res.json()).success ? "ok" : "error");
if (status !== "error") form.reset();
}
if (status === "ok") return <p>Thanks — we got your message.</p>;
return (
<form onSubmit={onSubmit}>
<label>
Name
<input type="text" name="name" required />
</label>
<label>
Email
<input type="email" name="email" required />
</label>
<label>
Message
<textarea name="message" required placeholder="How can we help?"></textarea>
</label>
<!-- honeypot: bots fill this, humans don't see it -->
<input type="checkbox" name="botcheck" style="display:none" tabindex="-1" autocomplete="off" />
<button type="submit">Send</button>
</form>
);
}@formloom/client (typed SDK)
submit.ts
// npm i @formloom/client
import { createForm } from "@formloom/client";
type Contact = {
name: string;
email: string;
message: string;
};
const form = createForm<Contact>("YOUR_ACCESS_KEY");
// End-to-end typed: TS errors if you send the wrong shape.
const { success, message } = await form.submit({
name: form.name.value,
email: form.email.value,
message: form.message.value,
});AJAX fetch (vanilla JS)
contact.html
<form id="contact-form">
<label>
Name
<input type="text" name="name" required />
</label>
<label>
Email
<input type="email" name="email" required />
</label>
<label>
Message
<textarea name="message" required placeholder="How can we help?"></textarea>
</label>
<!-- honeypot: bots fill this, humans don't see it -->
<input type="checkbox" name="botcheck" style="display:none" tabindex="-1" autocomplete="off" />
<button type="submit">Send</button>
</form>
<script>
const form = document.getElementById("contact-form");
form.addEventListener("submit", async (e) => {
e.preventDefault();
const res = await fetch("https://formloom.vercel.app/api/submit/YOUR_ACCESS_KEY", {
method: "POST",
headers: { "Content-Type": "application/json", Accept: "application/json" },
body: JSON.stringify(Object.fromEntries(new FormData(form))),
});
const data = await res.json();
if (data.success) {
form.reset();
alert("Thanks — we got your message.");
} else {
alert(data.message || "Something went wrong.");
}
});
</script>Gotchas
- Call `e.preventDefault()` so the browser doesn't do a full navigation.
- Mark the component `"use client"` if you're inside Next.js App Router.
- For file uploads, send the raw `FormData` (don't JSON.stringify) and omit the `Content-Type` header so the browser sets the multipart boundary.
Form types for React
Tailored field sets and code for common use cases.
FAQ
No. FormLoom is the backend — your React app POSTs directly to it from the browser.