> ## Documentation Index
> Fetch the complete documentation index at: https://docs.introw.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Form Builder

> Build no-code, on-brand forms in minutes and put them in front of partners through links, embeds, and portal sections.

export const Headless = ({prompts = []}) => {
  const PromptRow = ({prompt}) => {
    const [copied, setCopied] = useState(false);
    const copy = () => {
      try {
        navigator.clipboard?.writeText(prompt);
      } catch {}
      setCopied(true);
      setTimeout(() => setCopied(false), 1600);
    };
    return <div className="group flex items-center justify-between gap-3 px-4 py-3 transition-colors hover:bg-[#FD90FF]/[0.06]">
        <span className="text-sm leading-relaxed text-zinc-700 dark:text-zinc-200">{prompt}</span>
        <button type="button" onClick={copy} aria-label={copied ? "Copied to clipboard" : "Copy prompt"} className={`shrink-0 rounded-md p-1.5 transition-all hover:bg-[#FD90FF]/10 focus:opacity-100 focus:outline-none ${copied ? "text-[#FD90FF] opacity-100" : "text-zinc-400 opacity-0 group-hover:opacity-100 dark:text-zinc-500"}`}>
          {copied ? <svg viewBox="0 0 24 24" fill="none" className="h-4 w-4" aria-hidden="true">
              <path d="M20 6L9 17l-5-5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
            </svg> : <svg viewBox="0 0 24 24" fill="none" className="h-4 w-4" aria-hidden="true">
              <rect x="9" y="9" width="11" height="11" rx="2" stroke="currentColor" strokeWidth="2" />
              <path d="M5 15V5a2 2 0 0 1 2-2h10" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
            </svg>}
        </button>
      </div>;
  };
  return <>
      <p>
        Introw is <strong>headless</strong> by design: run everything here in plain language from Claude, ChatGPT,
        Slack, Teams, or your own CRM through Introw's <a href="/features/developer/mcp">MCP server</a>, with every
        action written straight back to your CRM source of truth. The portal is one surface, never the only one.
      </p>

      {prompts.length > 0 ? <div className="not-prose my-6 overflow-hidden rounded-2xl border border-zinc-200/80 bg-white shadow-sm dark:border-white/10 dark:bg-white/[0.02]">
          <div className="flex items-center gap-2 border-b border-zinc-200/80 bg-gradient-to-r from-[#FD90FF]/10 via-[#FD90FF]/5 to-transparent px-4 py-2.5 dark:border-white/10">
            <svg viewBox="0 0 24 24" fill="none" className="h-4 w-4 text-[#FD90FF]" aria-hidden="true">
              <path d="M12 2.5l2 5.5 5.5 2-5.5 2-2 5.5-2-5.5L4.5 10l5.5-2 2-5.5z" fill="currentColor" />
              <path d="M18.5 14l1 2.6 2.6 1-2.6 1-1 2.6-1-2.6-2.6-1 2.6-1 1-2.6z" fill="currentColor" opacity="0.55" />
            </svg>
            <span className="text-xs font-semibold uppercase tracking-wider text-zinc-500 dark:text-zinc-400">
              Try it from your LLM
            </span>
          </div>

          <div className="flex flex-col divide-y divide-zinc-100 dark:divide-white/[0.06]">
            {prompts.map(prompt => <PromptRow key={prompt} prompt={prompt} />)}
          </div>

          <a href="/headless" className="flex items-center justify-between gap-2 border-t border-zinc-200/80 px-4 py-2.5 text-sm font-medium text-zinc-600 no-underline transition-colors hover:text-[#FD90FF] dark:border-white/10 dark:text-zinc-300">
            <span>See the full headless playbook</span>
            <svg viewBox="0 0 24 24" fill="none" className="h-4 w-4" aria-hidden="true">
              <path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </a>
        </div> : <Card title="See the headless motion" icon="wand-magic-sparkles" href="/headless">
          The agentic playbook - lifecycle deep dives and a Claude Code skill library that run your partner program
          from Claude, ChatGPT, Slack, and your CRM.
        </Card>}
    </>;
};

> The Form Builder lets your team create on-brand forms without code and deliver them anywhere partners are: a share link, an embed, or a section in the portal.

## What it does

The Form Builder is a no-code editor for the forms partners fill in. You add the fields you
need, from text and file uploads to CRM object pickers, set which are required, and lay them out
with headings, columns, and instructions. Forms inherit your portal branding, so they look like
your product without extra design work.

Once built, a form goes wherever partners work. Share a general or partner-specific link, embed
it on a page, or drop it into a portal experience as a section. Partners submit without a CRM
seat, and the structured data flows into your review and CRM-sync workflows. Because anyone on
your team can build a form, capturing new partner information never waits on engineering.

## The problem it solves

Collecting partner information usually means messy spreadsheets and email back-and-forth:

* **Building a form needs engineering** → A no-code builder lets your team create forms themselves.
* **Forms look off-brand** → Forms inherit your portal branding automatically.
* **Partners cannot easily reach the form** → Deliver it by link, embed, or portal section.
* **Input arrives unstructured** → Defined fields capture clean, structured data every time.

## From problem to solution

The Form Builder turns partner data capture into a self-serve, on-brand workflow. Build the
form, choose the fields, and deliver it wherever partners are. Structured submissions flow
straight into review and CRM sync, with no engineering and no messy spreadsheets.

```mermaid theme={"theme":{"light":"github-light","dark":"github-dark"}}
flowchart LR
  build["Build the form"] --> deliver["Deliver where partners are"]
  deliver --> submit["Partner submits"]
  submit --> sync["Review and CRM sync"]
```

## Use cases

<CardGroup cols={2}>
  <Card title="Build forms no-code" icon="circle-check">
    Create forms with the fields you need, no engineering.
  </Card>

  <Card title="Stay on brand" icon="circle-check">
    Forms inherit your portal branding automatically.
  </Card>

  <Card title="Deliver anywhere" icon="circle-check">
    Share by link, embed, or portal section.
  </Card>

  <Card title="Capture clean data" icon="circle-check">
    Defined fields produce structured submissions.
  </Card>
</CardGroup>

## Impact

* **Low total cost of ownership** - Partner ops builds and edits forms without engineering.
* **Time to value** - A new form is live and collecting data in minutes.

## Who it's for

<CardGroup cols={2}>
  <Card title="Partner Operations" icon="user">
    Builds the forms partners fill in.
  </Card>

  <Card title="Partner Marketing & Enablement" icon="user">
    Places forms into portals and journeys.
  </Card>
</CardGroup>

## Works with

{/* CONNECTS:START - generated content goes here */}

<CardGroup cols={2}>
  <Card title="Submissions & Approvals" icon="table-list" href="/features/forms/submissions-approvals">
    Submissions run through approval.
  </Card>

  <Card title="CRM Field Mapping" icon="table-list" href="/features/forms/crm-field-mapping">
    Map fields to CRM properties.
  </Card>

  <Card title="Experiences" icon="browser" href="/features/portal/experiences">
    Embed a form in the portal.
  </Card>
</CardGroup>

## Headless

<Headless
  prompts={[
"Which forms can I submit for Acme?",
"Start a project submission form for Acme and tell me which fields are required.",
]}
/>

## Going deeper

<CardGroup cols={2}>
  <Card title="How to" icon="screwdriver-wrench" href="./technical">
    Setup, configuration, and all how-to guides.
  </Card>

  <Card title="API reference" icon="code" href="/general/introduction">
    Integration surface and code.
  </Card>
</CardGroup>
