Komponen shadcn/ui

Jika proyek Anda memakai shadcn/ui, Anda bisa memasang formulir siap pakai alih-alih menulis markup-nya. Ini satu pilihan di antara beberapa: formulir yang sama tetap berfungsi dengan HTML biasa dan fetch.

Instalasi

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

Perintah ini menyalin components/ikiform/form.tsx ke proyek Anda dan memasang komponen shadcn/ui yang dipakainya: button, checkbox, input, label, radio-group, dan textarea. File-nya bebas Anda ubah. Select memakai <select> native, jadi berfungsi dengan versi Radix maupun Base UI dari shadcn/ui.

Penggunaan

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

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

Saat di-mount, komponen mengambil skema publik formulir dan merender satu kontrol per field, memakai label, placeholder, teks bantuan, dan opsi yang Anda atur di dashboard. Definisikan field terlebih dahulu di tab Field formulir; formulir tanpa field tidak merender input apa pun.

• Komponen memvalidasi di browser dengan aturan dan pesan yang sama seperti server.
• Komponen mengirim JSON beserta honeypot dan timestamp render bertanda tangan, yang membantu penilaian spam.
• Error field dari server muncul di bawah field-nya; error lain muncul di atas tombol.
• Saat sukses, formulir diganti dengan pesan sukses formulir.

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

Field di kode

Berikan fields untuk merender tanpa definisi dari dashboard. Server tetap memvalidasi terhadap field formulir yang dipublikasikan, jadi jaga keduanya tetap sinkron.

<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 } },
  ]}
/>

Pemeriksaan manusia

Dengan pemeriksaan spam diatur ke Ikiform, komponen menyematkan frame kecil ikiform.com yang tetap tersembunyi sampai Turnstile butuh klik, dan meminta token baru setelah setiap percobaan. Jika frame gagal dimuat, komponen menawarkan untuk membuka pemeriksaan di jendela baru. Dengan key Turnstile Anda sendiri, komponen merender widget Turnstile dengan site key formulir.

Endpoint skema

Komponen membaca GET https://ikiform.com/f/<formId>/schema. Anda bisa memanggilnya sendiri untuk membuat renderer sendiri, atau memakai getSchema dari 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"
}

• Terbuka untuk origin mana pun (Access-Control-Allow-Origin: *) dan tidak pernah di-cache.
• Formulir yang dijeda, dinonaktifkan, dan tidak dikenal semuanya mengembalikan 404 yang sama.
• Hanya field yang dipublikasikan dan pengaturan tampilan yang keluar dari server. Domain yang diizinkan, URL redirect, pengaturan spam, dan rate limit tetap privat.
• challenge berupa { "provider": "ikiform", "url": ... }, { "provider": "custom", "site_key": ... }, atau null. ts adalah timestamp render bertanda tangan yang baru, untuk dikirim kembali sebagai _ikiform_ts.
• Endpoint ini mengizinkan 60 request per menit per pengunjung dan formulir, terpisah dari jatah kiriman.