Client intake can include answers and files. Collect them in the same response so the person who reviews the brief can find the related files.

This guide uses a typed Fillo schema. You can put the form in a client portal or use a Fillo hosted page. The browser sends files to the storage connected to Fillo. Fillo records the answers, file details and storage references in the response.

Choose the questions

Ask for information that someone will use to prepare or route the work:

The client and a reliable contact address.
The result they need, in their own words.
A target date when timing affects scope.
Briefs, screenshots, or reference documents the team must inspect.

Add questions about budget, stakeholders or project type only when someone will use those answers.

Define the intake schema

Create the form at module scope so its identity does not change between renders.

tsx

// src/IntakeForm.tsx
import { createClient, defineForm, FilloForm } from "@usefillo/react";

const intake = defineForm({
  id: "client-intake",
  title: "Tell us about your project",
  description: "Tell us what you need, when you need it and which files will help us prepare.",
  pages: [
    {
      id: "intake",
      blocks: [
        { id: "name", kind: "short_text", label: "Your name", required: true },
        { id: "email", kind: "email", label: "Work email", required: true },
        {
          id: "outcome",
          kind: "long_text",
          label: "What result do you need?",
          required: true,
        },
        { id: "target-date", kind: "date", label: "Target date" },
        {
          id: "documents",
          kind: "file_upload",
          label: "Briefs or reference files (PDF, DOCX, PNG or JPG)",
          accept: [".pdf", ".doc", ".docx", ".png", ".jpg", ".jpeg"],
          maxFiles: 5,
        },
      ],
    },
  ],
  settings: { submitLabel: "Send project details" },
});

const fillo = createClient({ key: import.meta.env.VITE_FILLO_KEY });

export function IntakeForm() {
  return <FilloForm form={intake} client={fillo} />;
}

The upload label tells the client which file types the form accepts. Only ask for file types that your team can open and review.

When the workspace allows code sync, the first page load adds the form as a draft in Fillo. Review and publish the draft before you share the page with a client.

Choose file storage

Connect one of these storage providers to the workspace:

Google Drive
Box
Amazon S3
An S3-compatible bucket such as Cloudflare R2

The browser sends each file to the connected provider. Fillo creates the upload session and checks that the upload completed. The response contains a reference to the file. Storage credentials and workspace secrets stay on the server.

Some eligible new workspaces can use temporary Fillo storage while testing. It accepts files up to 10 MiB, with 100 MiB available per workspace. Completed files expire after seven days. Connect your own storage before you collect client files.

See file uploads for setup, limits, cleanup and recovery.

Add the form to your product

Use a hosted page when the client only needs a link. Use the React or DOM form in a client portal when your app already knows the client and account.

For a signed-in portal, send verified respondent details from your server. This can add the client ID and contact details to the response without asking for them again. Your app must still control access to the page. The storage provider controls access to its files.

Fillo handles the form and response. It does not replace the rest of a client portal, such as messages, bills or tasks.

Choose what happens after submission

After Fillo accepts the response, you can:

Review it in the project's response grid with the file references beside the answers.
Export accepted responses to CSV.
Deliver a signed webhook to a project, CRM, or case-management system.
Send it to another system with an integration.

Do not send the file again in each webhook. Send the response and storage reference. Check that the receiving system has permission to open the file.

Test the form

Complete these checks before you share the form:

Submit without the required contact or outcome.
Choose a disallowed file type.
Exceed the file count or storage limit.
Interrupt an upload, reconnect, and retry.
Submit the form and find the response and file reference.
Sign in as a workspace member and open the file.
Delete the test response and check what happens to the file.
Use the form with a keyboard and on a narrow screen.

If clients will upload large files, test the file size that you expect them to use. Test the same storage provider and browsers that they will use.

Use the example

Clone the Vite and React client intake starter for the source and environment setup. Or open the client intake template to edit the form in Fillo.

Job application example: Try a working multi-page form with a file upload.
Collect file uploads in your own storage
Client intake form template
Respondents and identity
Read responses through the management API

Build a client intake form with file uploads