React form to email
A React app running in the browser has no server to receive a form. Post it to FormDoc instead and each submission is emailed to you.
JSX
import { useState } from "react";
export default function ContactForm() {
const [status, setStatus] = useState("");
async function onSubmit(event) {
event.preventDefault();
const form = event.currentTarget; // React clears currentTarget after an await
setStatus("Sending…");
const res = await fetch("https://api.formdoc.dev/v1/submit", {
method: "POST",
headers: { Accept: "application/json" },
body: new FormData(form),
});
const result = await res.json();
setStatus(result.success ? "Thanks, message sent." : result.error.message);
if (result.success) form.reset();
}
return (
<form onSubmit={onSubmit}>
<input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
<label htmlFor="name">Name</label>
<input id="name" type="text" name="name" required />
<label htmlFor="email">Email</label>
<input id="email" type="email" name="email" required />
<label htmlFor="message">Message</label>
<textarea id="message" name="message" required />
<input type="checkbox" name="botcheck" style={{ display: "none" }} tabIndex={-1} autoComplete="off" />
<button type="submit">Send</button>
<p role="status">{status}</p>
</form>
);
}
Using Next.js? See the Next.js guide.