Form generators

Free Next.js Form Generator

Generate a Next.js form as a client component that posts with fetch and shows success and error states. Edit the fields and copy the code.

No signup neededExport HTML or ReactPreview as you type

Form title

Description

Submit button text

Fields

Field 1 label
Field 1 type
Field 1 name
Required
Field 2 label
Field 2 type
Field 2 name
Required
Field 3 label
Field 3 type
Field 3 name
Required

Style

Code format

Preview only. Replace YOUR_PUBLIC_FORM_KEY in the exported code with your own endpoint before publishing. In Next.js, use the exported component as a client component.

Your output

"use client";
import { useRef, useState } from "react";

export default function ContactForm() {
  const [status, setStatus] = useState("");
  const [busy, setBusy] = useState(false);
  const request = useRef(null);
  const submitting = useRef(false);


  async function submit(event) {
    event.preventDefault();
    if (submitting.current) return;
    const form = event.currentTarget;
    const body = new FormData(form);
    
    submitting.current = true;
    setBusy(true);
    setStatus("");
    const controller = new AbortController();
    const timeout = setTimeout(() => controller.abort(), 20000);
    try {
      const fingerprint = JSON.stringify([...body.entries()].filter(([name]) => name !== "cf-turnstile-response"));
      if (request.current?.fingerprint !== fingerprint) {
        request.current = { fingerprint, id: crypto.randomUUID() };
      }
      const response = await fetch("https://api.formkoi.com/f/YOUR_PUBLIC_FORM_KEY", {
        method: "POST",
        headers: { "Idempotency-Key": request.current.id },
        body,
        signal: controller.signal,
      });
      const result = await response.json().catch(() => null);
      if (!response.ok || result?.success !== true) {
        throw new Error(result?.error?.message || "We could not confirm receipt. Your details are still here. Please try again.");
      }
      setStatus("Thanks! Your message has been received.");
      form.reset();
      request.current = null;
    } catch (error) {
      setStatus(controller.signal.aborted
        ? "This is taking longer than expected. We could not confirm receipt. Your details are still here; please try again."
        : error instanceof Error && !(error instanceof TypeError)
          ? error.message
          : "We could not complete the request. Your details are still here. Please try again.");
    } finally {
      clearTimeout(timeout);
      submitting.current = false;
      setBusy(false);
    }
  }

  return (
    <section className="formkoi-form" aria-label="Next.js form">
      <style>{".formkoi-form, .formkoi-form * { box-sizing: border-box; }\n.formkoi-form { width: 100%; max-width: 560px; padding: clamp(20px, 5vw, 36px); background: #ffffff; color: #233c34; font: 16px/1.5 system-ui, sans-serif; border: 1px solid #233c3430; border-radius: 8px; }\n.formkoi-form h2 { margin: 0 0 8px; font: inherit; font-size: 28px; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }\n.formkoi-form > p { margin: 0 0 20px; overflow-wrap: anywhere; }\n.formkoi-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 15px; }\n.formkoi-field { grid-column: 1 / -1; display: grid; gap: 6px; min-width: 0; }\n.formkoi-field--half { grid-column: span 1; }\n.formkoi-fields label, .formkoi-fields legend { font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }\n.formkoi-fields input:not([type=checkbox]):not([type=radio]):not([hidden]), .formkoi-fields textarea, .formkoi-fields select { display: block; width: 100%; min-width: 0; padding: 12px; border: 1px solid #233c3470; border-radius: 8px; background: #ffffff; color: #233c34; font: inherit; }\n.formkoi-fields select { appearance: auto; }\n.formkoi-fields textarea { min-height: 120px; resize: vertical; }\n.formkoi-fields input::placeholder, .formkoi-fields textarea::placeholder { color: #233c3480; }\n.formkoi-fields input[type=file] { padding: 10px; }\n.formkoi-choices { margin: 0; padding: 0; border: 0; min-width: 0; }\n.formkoi-choices legend { padding: 0; margin-bottom: 6px; }\n.formkoi-choices label, .formkoi-check { display: flex; align-items: flex-start; gap: 10px; font-weight: 400; cursor: pointer; }\n.formkoi-choices label + label { margin-top: 8px; }\n.formkoi-choices input, .formkoi-check input { width: 18px; height: 18px; margin: 3px 0 0; flex: none; accent-color: #233c34; }\n.formkoi-help { margin: 0; font-size: 13px; opacity: .75; overflow-wrap: anywhere; }\n.formkoi-fields .cf-turnstile { grid-column: 1 / -1; }\n.formkoi-fields button { grid-column: 1 / -1; justify-self: start; margin-top: 12px; padding: 12px 22px; border: 0; border-radius: 8px; background: #233c34; color: #ffffff; font: inherit; font-weight: 600; cursor: pointer; overflow-wrap: anywhere; max-width: 100%; }\n.formkoi-fields button:hover { filter: brightness(.94); }\n.formkoi-fields :focus-visible { outline: 2px solid #233c34; outline-offset: 3px; }\n@media (max-width: 480px) { .formkoi-field--half { grid-column: 1 / -1; } }"}</style>
      <h2>Next.js form</h2>
      <p>Leave your details and we will be in touch.</p>
    <form className="formkoi-fields" onSubmit={submit}>
        <fieldset disabled={busy} aria-label="Contact details" style={{ border: 0, margin: 0, padding: 0, display: "contents" }}>
        <div className="formkoi-field">
        <label htmlFor="name">Name</label>
        <input id="name" name="name" autoComplete="name" required />
        </div>
        <div className="formkoi-field">
        <label htmlFor="email">Email address</label>
        <input id="email" name="email" type="email" autoComplete="email" required />
        </div>
        <div className="formkoi-field">
        <label htmlFor="message">Message</label>
        <textarea id="message" name="message" required />
        </div>
        <input name="botcheck" type="text" tabIndex={-1} autoComplete="off" style={{ display: "none" }} hidden />
        </fieldset>
        <button disabled={busy}>{busy ? "Sending…" : "Send message"}</button>
        <p role="status" style={{ gridColumn: "1 / -1" }}>{status}</p>
      </form>
    </section>
  );
}

How to use this tool

Edit the fields, labels and required flags for your form.
Choose a style and keep the code format on React / Next.js.
Paste the component into your app directory as a client component and set your endpoint.

Related free tools

Form generators

React form generator

Generate a React form component with controlled fields, submit handling and success and error states. Preview it, then copy the JSX into your app.

Open tool ↗Form generators

HTML form generator

Generate a clean HTML form with labels, validation attributes and CSS. Edit fields, preview the result and download the HTML in seconds.

Open tool ↗Form utilities

Form action checker

Paste your form HTML to check the action URL, method and encoding. Catch GET submissions, missing HTTPS and file uploads without multipart encoding.

Open tool ↗

Frequently asked questions

Next.js form generator
questions.

How do I make this Next.js form actually send submissions?

The exported code posts to a placeholder endpoint. Create a free Form Koi form, copy its endpoint into the form action, and submissions arrive in your inbox and in the Form Koi dashboard with spam filtering included.

Can I style the exported form to match my site?

Yes. Pick one of the style presets before exporting, then edit the CSS or replace the class names. The markup uses plain labels, inputs and fieldsets with no framework dependency.

Does this work with the app router and server components?

Yes. The export is a client component, so import it from any page or layout. Submissions go straight from the browser to your endpoint, so no API route is needed.

Is anything I enter saved or sent to Form Koi?

No. Everything you type or upload stays in this browser tab and is processed locally. Copy or download anything you want to keep before leaving the page.

Start with Form Koi Free

Start receiving
form submissions.

Create a free form Read the quickstart

Free Next.js Form Generator

Build your form

Fields

How to use this tool

Related free tools

React form generator

HTML form generator

Form action checker

Next.js form generator
questions.

Start receiving
form submissions.

Build your form

Fields

Free Next.js Form Generator

Build your form

Fields

How to use this tool

Related free tools

React form generator

HTML form generator

Form action checker

Next.js form generatorquestions.

Start receivingform submissions.

Build your form

Fields

Next.js form generator
questions.

Start receiving
form submissions.