Developers

Code-first integration patterns with HTML, Fetch, React, and Next.js

integration
developers javascript react nextjs html fetch

Developers

Code-first integration patterns with HTML, Fetch, React, and Next.js.

HTML (form-encoded)

<form action="https://api.formfeeder.io/v1/form/abcd1234" method="POST">
  <input type="text" name="name" required />
  <input type="email" name="email" required />
  <button type="submit">Send</button>
</form>

HTML (multipart/form-data with files)

<form action="https://api.formfeeder.io/v1/form/abcd1234" method="POST" enctype="multipart/form-data">
  <input type="text" name="name" required />
  <input type="file" name="attachment" accept=".png,.jpg,.pdf" />
  <button type="submit">Send</button>
</form>

Fetch (JSON)

await fetch("https://api.formfeeder.io/v1/form/abcd1234", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ name: "Ada", email: "[email protected]" })
});

React

function ContactForm() {
  const onSubmit = async (e) => {
    e.preventDefault();
    const fd = new FormData(e.currentTarget);
    const res = await fetch("https://api.formfeeder.io/v1/form/abcd1234", { method: "POST", body: fd });
    const data = await res.json();
    console.log(data);
  };
  return (
    <form onSubmit={onSubmit}>
      <input name="name" required />
      <input type="email" name="email" required />
      <button type="submit">Send</button>
    </form>
  );
}

Next.js (app router)

// app/api/submit/route.ts
export async function POST(req: Request) {
  const formData = await req.formData();
  const ffRes = await fetch("https://api.formfeeder.io/v1/form/abcd1234", { method: "POST", body: formData });
  return new Response(await ffRes.text(), { status: ffRes.status });
}

On this page