Next.js

Static HTML form

In a Server Component page, a normal form works:

export default function ContactPage() {
  const endpoint = process.env.NEXT_PUBLIC_SENDULER_ENDPOINT!;
  return (
    <form action={endpoint} method="POST">
      <input type="email" name="email" required />
      <textarea name="message" required />
      <input type="text" name="_gotcha" hidden tabIndex={-1} autoComplete="off" />
      <button type="submit">Send</button>
    </form>
  );
}

Add to .env.local:

NEXT_PUBLIC_SENDULER_ENDPOINT=https://senduler.com/f/your-key

Client-side fetch

For SPA-style UX, set the form to JSON in the dashboard and post from a client component:

"use client";

export function ContactForm() {
  async function onSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    const data = Object.fromEntries(new FormData(e.currentTarget));
    const res = await fetch(process.env.NEXT_PUBLIC_SENDULER_ENDPOINT!, {
      method: "POST",
      headers: { "Content-Type": "application/json", Accept: "application/json" },
      body: JSON.stringify(data),
    });
    if (res.ok) alert("Sent!");
  }
  return (
    <form onSubmit={onSubmit}>
      <input name="email" type="email" required />
      <textarea name="message" required />
      <button type="submit">Send</button>
    </form>
  );
}

See React & JavaScript for CORS and file uploads.