Embedding forms

npm install @usefillo/react

import { FilloForm } from "@usefillo/react";
import "@usefillo/react/styles.css"; // optional default theme

export function Feedback() {
  return (
    <FilloForm
      formId="your-form-id-or-slug"
      onSubmitted={(id) => console.log("response", id)}
    />
  );
}

import { FilloForm, createClient } from "@usefillo/react";

// No visual builder — the form is just an object.
const form = {
  version: 1,
  title: "Start a project",
  pages: [{ id: "p1", blocks: [
    { id: "name", kind: "short_text", label: "Project name", required: true },
    { id: "plan", kind: "select", label: "Plan", options: [
      { id: "hobby", label: "Hobby" },
      { id: "pro", label: "Pro" },
    ]},
  ]}],
  settings: {},
};

// A client collects responses into your Fillo workspace.
const client = createClient({ key: "pk_…" });

// onSubmitted runs your own code right after Fillo records the response:
<FilloForm form={form} client={client} onSubmitted={(id, data) => track(data)} />

import { FilloForm, createClient, defineForm } from "@usefillo/react";

const client = createClient({
  key: "pk_…",                       // Settings → Code-defined forms
});

const feedback = defineForm({
  id: "conversion-failed",           // stable handle in your workspace
  title: "Conversion failed",
  pages: [{ id: "p1", blocks: [
    { id: "reason", kind: "select", label: "What went wrong?",
      allowOther: true, options: [
        { id: "crash", label: "It crashed" },
        { id: "wrong", label: "Wrong output" },
      ] },
    { id: "details", kind: "long_text", label: "Tell us more" },
    { id: "email", kind: "email", label: "Email me when it's fixed" },
  ]}],
});

<FilloForm form={feedback} client={client} />

<FilloForm
  client={client}
  formId="cust-feedback"
  components={{
    rating: ({ field, value, setValue, error }) => (
      <MyEmojiRating
        label={field.label}
        value={value}
        onChange={setValue}
        error={error}
      />
    ),
  }}
/>

import { FilloProvider, FormField, useField, useFillo } from "@usefillo/react";

// <FilloProvider> runs the engine but renders no layout — you build it
// all. Works with a schema, or a defineForm() form (which also syncs).
<FilloProvider form={feedback} client={client}>
  <div className="grid grid-cols-2 gap-4">
    <FormField id="first" />        {/* default render, placed by you */}
    <FormField id="last" />
  </div>

  <YourMarketingBlock />            {/* anything, anywhere */}
  <BareEmail />                     {/* a field rendered from scratch */}
  <SubmitButton />                  {/* your button → useFillo().submit() */}
</FilloProvider>

// A field rendered with zero Fillo chrome:
function BareEmail() {
  const { value, error, setValue } = useField("email");
  return <input value={value ?? ""} onChange={(e) => setValue(e.target.value)} />;
}

function MyWizard() {
  const {
    blocks,          // blocks on the current page, after visibility logic
    pageIndex, pageCount, isFirstPage, isLastPage,
    next, back, submit, status,
  } = useFillo();

  return (
    <>
      {blocks.map((b) => <FormField key={b.id} id={b.id} />)}

      <nav>
        {!isFirstPage && <button onClick={back}>Back</button>}
        <button onClick={() => (isLastPage ? submit() : next())}>
          {isLastPage ? "Submit" : `Next (${pageIndex + 1} of ${pageCount})`}
        </button>
      </nav>
    </>
  );
}

import { createFormController, createClient } from "@usefillo/dom";

const client = createClient({ key: "pk_…" });
const form = { version: 1, title: "Bug report", settings: {}, pages: [{ id: "p1", blocks: [
  { id: "summary", kind: "long_text", label: "Summary", required: true },
  { id: "email", kind: "email", label: "Email" },
]}]};

// The engine: validation, conditional logic, pages, spam checks, submit.
// It renders nothing — you do.
const fillo = createFormController({ form, formId: "bug-report", client });

// Your layout, your markup, fields wherever you want:
root.innerHTML = `
  <h2>Tell us what broke</h2>
  <textarea id="summary"></textarea>
  <aside class="callout">📎 Screenshots help.</aside>   <!-- your markup, mid-form -->
  <input id="email" type="email" />
  <p id="err" class="err"></p>
  <button id="send">Send</button>`;

root.querySelector("#summary").oninput = (e) => fillo.setValue("summary", e.target.value);
root.querySelector("#email").oninput   = (e) => fillo.setValue("email", e.target.value);
root.querySelector("#send").onclick    = () => fillo.submit();

// Re-read getState() and repaint the reactive bits on every change:
fillo.subscribe(() => {
  const s = fillo.getState();                 // { data, errors, status, blocks, … }
  root.querySelector("#err").textContent = s.errors.summary ?? "";
  root.querySelector("#send").disabled = s.status === "submitting";
  if (s.status === "submitted") root.innerHTML = "<p>Thanks!</p>";
});

// 1. Define a field kind we don't ship, in your schema:
{ id: "accent", kind: "custom", component: "color",
  label: "Brand color", config: { swatches: ["#5240FF", "#16a34a"] } }

// 2. Render it with your own component:
<FilloForm
  form={form}
  customComponents={{
    color: ({ field, value, setValue }) => (
      <SwatchPicker
        swatches={field.config.swatches}
        value={value}
        onChange={setValue}
      />
    ),
  }}
/>