React

Formulir React dengan state pending, error, dan sukses, error per field, dan pemeriksaan manusia opsional.

Ini berfungsi di aplikasi React apa pun: Vite, Remix, React Router, Gatsby, atau client component Next.js. Formulir mengirim langsung dari browser, jadi setiap pengunjung dihitung dalam rate limit-nya sendiri.

Pasang SDK

Terminal

npm install @ikiform/sdk

Formulir lengkap

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

Berikan humanCheck saat pemeriksaan spam formulir diatur ke Ikiform. Jika pemeriksaan mati, hilangkan saja.
challenge me-reject dengan ChallengeError jika pemeriksaan gagal atau dibatalkan, yang diubah catch menjadi pesan.
Tanpa SDK, ganti submit dengan fetch seperti di JavaScript dan fetch.

Sebagai form action

Di React 19, nilai yang dikembalikan submit juga memenuhi tipe form action, jadi bisa langsung diberikan ke action. Field internal React $ACTION_ dibuang sebelum dikirim.

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

Validasi sebelum mengirim

validate memakai aturan dan pesan yang sama seperti server untuk ke-12 tipe field, jadi Anda bisa menampilkan error sebelum request. Server tetap menjadi sumber kebenaran.

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