Skip to main content

DocsPrefill

Prefill

Three ways to get answers into a form before the visitor types anything: automatic URL prefill, an explicit initialData prop, and hidden-field defaults.

View as Markdownllms.txt for agents

URL prefill

URL prefill works in embeds automatically (SDK 0.6+), not just on the hosted /fpage. After hydration the SDK reads the page’s query string: any field can be prefilled as ?fieldId=value, and hidden fields read their configured paramName (falling back to the field id).

Values are coerced and validated per field kind — options must exist, numbers respect min/max — so a crafted URL can’t inject invalid answers. Uploads, ranking, matrix, signature, and custom fields are never prefilled from a URL.

initialData

Precedence: an explicit initialData prop and anything the visitor already typed win over URL parameters.

prefill from your app
"use client";

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

export function Onboarding({ userEmail }: { userEmail: string }) {
  // initialData wins over URL parameters; visitors can still edit the values.
  return <FilloForm formId="onboarding" initialData={{ email: userEmail, plan: "team" }} />;
}

Manual parsing

Defaults: hidden fields may carry a defaultValue, applied when no matching parameter is present. Other field kinds don’t take defaultValue — schema normalization strips it — so use initialData for visible fields. For manual control, @usefillo/core exports the parser itself:

manual control
import { defineForm, prefillFromParams } from "@usefillo/core";

const form = defineForm({
  id: "waitlist",
  pages: [{ id: "p1", blocks: [
    { id: "email", kind: "email", label: "Email", required: true },
    { id: "src", kind: "hidden", label: "Source", paramName: "src", defaultValue: "direct" },
  ]}],
});

// The exact parser the SDK runs after hydration — call it yourself when you
// want the values earlier, or somewhere without a URL:
const params = Object.fromEntries(new URLSearchParams("?email=ada@example.com&src=newsletter"));
const initialData = prefillFromParams(form.schema, params);
// → { email: "ada@example.com", src: "newsletter" } — coerced + validated per kind

Was this page useful?

Was this page helpful?
Powered by Fillo