React

Ein React-Formular mit Lade-, Fehler- und Erfolgszuständen, Feldfehlern und optionaler Menschlichkeitsprüfung.

Das funktioniert in jeder React-App: Vite, Remix, React Router, Gatsby oder eine Next.js-Client-Komponente. Es sendet direkt aus dem Browser, sodass jeder Besucher auf sein eigenes Rate-Limit zählt.

SDK installieren

Terminal

npm install @ikiform/sdk

Ein vollständiges Formular

contact-form.jsx

import { challenge, submit } from "@ikiform/sdk";
import { useState } from "react";

const FORM_ID = "frm_xxxxxxxxxxxxxxxx";

export function ContactForm({ humanCheck = false }) {
  const [status, setStatus] = useState("idle");
  const [errors, setErrors] = useState({});
  const [message, setMessage] = useState("");

  async function onSubmit(event) {
    event.preventDefault();
    const data = new FormData(event.currentTarget);
    setStatus("sending");
    setErrors({});
    try {
      const turnstileToken = humanCheck ? await challenge(FORM_ID) : undefined;
      const result = await submit(FORM_ID, data, { turnstileToken });
      if (result.ok) return setStatus("sent");
      setErrors(result.error.fields ?? {});
      setMessage(result.error.message);
    } catch {
      setMessage("The human check didn't finish. Try again.");
    }
    setStatus("error");
  }

  if (status === "sent") return <p>Thanks, we got it.</p>;

  return (
    <form onSubmit={onSubmit}>
      <label>
        Email
        <input name="email" type="email" required />
      </label>
      {errors.email ? <p>{errors.email[0]}</p> : null}
      <label>
        Message
        <textarea name="message" />
      </label>
      {errors.message ? <p>{errors.message[0]}</p> : null}
      <input name="_gotcha" type="text" tabIndex={-1} autoComplete="off" hidden />
      {status === "error" && message ? <p role="alert">{message}</p> : null}
      <button disabled={status === "sending"}>Send</button>
    </form>
  );
}

Übergib humanCheck, wenn die Spamprüfung des Formulars auf Ikiform steht. Ist die Prüfung aus, lass es weg.
challenge lehnt mit einem ChallengeError ab, wenn die Prüfung fehlschlägt oder abgebrochen wird, was der catch in eine Meldung umwandelt.
Ohne das SDK ersetzt du submit durch fetch wie unter JavaScript und fetch.

Als Form Action

In React 19 erfüllt der Wert, den submit zurückgibt, auch den Form-Action-Typ, sodass er direkt an action übergeben werden kann. Reacts interne $ACTION_-Felder werden vor dem Senden verworfen.

newsletter.jsx

import { submit } from "@ikiform/sdk";

export function Newsletter() {
  return (
    <form action={(data) => submit("frm_xxxxxxxxxxxxxxxx", data)}>
      <input name="email" type="email" required />
      <button>Subscribe</button>
    </form>
  );
}

Vor dem Senden validieren

validate verwendet für alle 12 Feldtypen dieselben Regeln und Meldungen wie der Server, sodass du Fehler vor der Anfrage anzeigen kannst. Der Server bleibt die maßgebliche Instanz.

validate.js

import { getSchema, validate } from "@ikiform/sdk";

const schema = await getSchema("frm_xxxxxxxxxxxxxxxx");

function check(form) {
  if (!schema.ok) return {};
  return validate(schema.schema.fields, new FormData(form));
}