Next.js

Client component

The simplest approach uses the @formstork/react hook in a client component.

"use client";
import { useFormstork } from "@formstork/react";

export function Contact() {
  const { submit, isSubmitting, isSuccess } = useFormstork({
    accessKey: process.env.NEXT_PUBLIC_FORMSTORK_KEY!,
  });

  if (isSuccess) return <p>Thanks for reaching out.</p>;
  return (
    <form onSubmit={submit}>
      <input type="email" name="email" required />
      <textarea name="message" required />
      <button disabled={isSubmitting}>Send</button>
    </form>
  );
}

The access key is safe to expose, so NEXT_PUBLIC_ is fine.

Server action

Prefer to keep the request server-side? Use a server action:

async function send(formData: FormData) {
  "use server";
  await fetch("https://api.formstork.com/submit", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({
      access_key: process.env.FORMSTORK_KEY,
      email: formData.get("email"),
      message: formData.get("message"),
    }),
  });
}

export default function Page() {
  return (
    <form action={send}>
      <input type="email" name="email" required />
      <textarea name="message" required />
      <button>Send</button>
    </form>
  );
}