Composant shadcn/ui

Si votre projet utilise shadcn/ui, vous pouvez installer un formulaire prêt à l'emploi au lieu d'écrire le markup. C'est une option parmi d'autres : le même formulaire fonctionne toujours avec du HTML simple et fetch.

Installation

npx shadcn@latest add https://ikiform.com/r/form.json

Cela copie components/ikiform/form.tsx dans votre projet et installe les composants shadcn/ui qu'il utilise : button, checkbox, input, label, radio-group et textarea. Le fichier vous appartient, modifiez-le à volonté. Les listes déroulantes utilisent un <select> natif, donc il fonctionne avec les variantes Radix et Base UI de shadcn/ui.

Utilisation

import { IkiForm } from "@/components/ikiform/form";

export default function Contact() {
  return <IkiForm form="frm_xxxxxxxxxxxxxxxx" />;
}

Au montage, le composant récupère le schéma public du formulaire et affiche un contrôle par champ, avec les libellés, placeholders, textes d'aide et options définis dans le tableau de bord. Définissez d'abord les champs dans l'onglet Fields du formulaire ; un formulaire sans champs n'affiche aucun input.

• Il valide dans le navigateur avec les mêmes règles et messages que le serveur.
• Il envoie du JSON avec le honeypot et un horodatage d'affichage signé, ce qui aide le scoring anti-spam.
• Les erreurs de champ du serveur apparaissent sous leur champ ; les autres erreurs apparaissent au-dessus du bouton.
• En cas de succès, il remplace le formulaire par son message de succès.

Props

import { IkiForm } from "@/components/ikiform/form";

export default function Waitlist() {
  return (
    <IkiForm
      form="frm_xxxxxxxxxxxxxxxx"
      submitLabel="Join the waitlist"
      successMessage="You're on the list."
      onSuccess={({ id }) => console.log("Submitted", id)}
    />
  );
}

Champs dans le code

Passez fields pour afficher le formulaire sans la définition du tableau de bord. Le serveur valide toujours selon les champs publiés du formulaire, alors gardez les deux synchronisés.

<IkiForm
  form="frm_xxxxxxxxxxxxxxxx"
  fields={[
    { id: "email", type: "email", label: "Work email", required: true },
    { id: "team_size", type: "number", label: "Team size", validation: { min: 1, integer: true } },
  ]}
/>

Vérification humaine

Avec le contrôle anti-spam réglé sur Ikiform, le composant intègre une petite frame ikiform.com qui reste masquée tant que Turnstile n'a pas besoin d'un clic, et demande un nouveau token après chaque tentative. Si la frame ne peut pas se charger, il propose d'ouvrir la vérification dans une nouvelle fenêtre. Avec vos propres clés Turnstile, il affiche le widget Turnstile avec la clé de site du formulaire.

L'endpoint de schéma

Le composant lit GET https://ikiform.com/f/<formId>/schema. Vous pouvez l'appeler vous-même pour construire votre propre rendu, ou utiliser getSchema du SDK.

{
  "id": "frm_xxxxxxxxxxxxxxxx",
  "title": "Contact",
  "description": null,
  "fields": [{ "id": "email", "type": "email", "label": "Email", "required": true }],
  "settings": { "submit_label": "Send", "success_message": "Thanks!" },
  "honeypot_field": "_gotcha",
  "turnstile_required": false,
  "turnstile_site_key": null,
  "challenge": null,
  "ts": "1792300000000.signature"
}

• Ouvert à toutes les origines (Access-Control-Allow-Origin: *) et jamais mis en cache.
• Les formulaires en pause, désactivés et inconnus renvoient tous le même 404.
• Seuls les champs publiés et les réglages d'affichage quittent le serveur. Les domaines autorisés, l'URL de redirection, les réglages anti-spam et les limites de débit restent privés.
• challenge vaut { "provider": "ikiform", "url": ... }, { "provider": "custom", "site_key": ... } ou null. ts est un horodatage d'affichage signé et récent, à renvoyer en _ikiform_ts.
• Il autorise 60 requêtes par minute par visiteur et par formulaire, indépendamment du quota d'envoi.