React

Un formulaire React avec états d'attente, d'erreur et de succès, erreurs de champ et vérification humaine facultative.

Cela fonctionne dans toute app React : Vite, Remix, React Router, Gatsby ou un composant client Next.js. L'envoi part directement du navigateur, donc chaque visiteur compte dans sa propre limite de débit.

Installez le SDK

Terminal

npm install @ikiform/sdk

Un formulaire complet

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>
  );
}

Passez humanCheck quand le contrôle anti-spam du formulaire est réglé sur Ikiform. Si la vérification est désactivée, omettez-le.
challenge est rejeté avec une ChallengeError si la vérification échoue ou est interrompue, et le catch la transforme en message.
Sans le SDK, remplacez submit par fetch comme dans JavaScript et fetch.

En tant qu'action de formulaire

Avec React 19, la valeur renvoyée par submit satisfait aussi le type d'action de formulaire, donc elle peut être passée directement à action. Les champs internes $ACTION_ de React sont retirés avant l'envoi.

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>
  );
}

Valider avant l'envoi

validate utilise les mêmes règles et messages que le serveur pour les 12 types de champs, ce qui permet d'afficher les erreurs avant la requête. Le serveur reste la référence.

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));
}