FluidForms

    Tutorial: Client Onboarding

    Step-by-step guide to building an intelligent client onboarding form

    In this tutorial, we will build a Client Onboarding Form that demonstrates the power of FluidForms. We'll combine standard data collection with an AI Interview to gather detailed project requirements.

    Goal

    We want to collect:

    1. Company Information (Standard fields)
    2. Project Goals (AI Interview)
    3. Timeline & Budget (Standard fields)

    Step 1: Create a New Form

    1. Go to your Dashboard.
    2. Click + Create New Form.
    3. Select Start with Template.
    4. Choose Blank Form.

    Step 2: The Welcome Section

    Your form starts with a default section. Let's set it up.

    1. Rename the Section: Click the section header and name it "Welcome".
    2. Add Content:
      • Add a Heading: "Welcome to FluidForms Consulting".
      • Add a Paragraph: "We're excited to work with you. Let's get some basic details."
    3. Add Fields:
      • Type /text to add a Text Input. Label it "Company Name".
      • Type /text again. Label it "Contact Name".
      • Type /email to add an Email Input. Label it "Email Address".

    Step 3: Company Documents (Optional)

    Let's add the ability to upload supporting documents. This demonstrates how AI can process uploaded files.

    1. Add a Section Divider: Add a Paragraph: "If you have any company documents (pitch decks, one-pagers, etc.), you can upload them here to help us understand your business better."
    2. Add File Upload:
      • Type /file to add a File Upload field.
      • Label it "Supporting Documents (Optional)".
      • In the properties panel:
        • Set Max Files to 3
        • Set File Types to pdf, document
        • Leave Required as false

    The AI will automatically process any uploaded documents in the next section to better understand your company and project needs.

    Step 4: The AI Interview Section

    Now for the magic. We want to understand their project deeply without creating a 50-question survey. The AI will also use any uploaded documents to inform its questions.

    1. Add a New Section: Type /section at the bottom.
    2. Set Mode: Change the section mode from "Standard" to "Interview".
    3. Add Context: This is crucial. Inside the section, type /context to add a Context Block.
      • Content: "You are a senior business consultant. Your goal is to understand the client's challenges and what they hope to achieve with our services. Be professional, insightful, and ask clarifying questions. If the client uploaded any documents, reference specific details from them to demonstrate you've reviewed their materials."
    4. Add Target Fields: These are the fields the AI will try to fill during the conversation.
      • Type /text. Label it "Primary Challenge".
      • Type /text. Label it "Key Objectives".
      • Type /text. Label it "Success Metrics".
      • Tip: You can mark these as "Hidden" if you don't want the user to see the structured data being extracted.

    Step 5: The Logistics Section

    After the interview, we need some hard numbers.

    1. Add a New Section: Type /section. Keep it as "Standard" mode.
    2. Add Fields:
      • Type /date. Label it "Desired Start Date".
      • Type /number. Label it "Estimated Budget ($)".

    Step 6: Logic & Personalization

    Let's make it feel personal.

    1. In the Logistics Section, add a Paragraph block at the top.
    2. Type: "Thanks for sharing those details, " then type { to open the variable menu.
    3. Select contact_name.
    4. The text should look like: "Thanks for sharing those details, {{ contact_name }}."

    Step 7: Set Up Integrations

    Let's automate what happens when someone submits this form.

    1. Click Settings (gear icon) in the top right.
    2. Go to the Webhook Automations section.
    3. Add a webhook to send data to your CRM, or copy the webhook URL to use with Zapier/Make/n8n.
    4. In the Email Notifications section, add email addresses to notify when someone submits the form (e.g., your sales team).
    5. Click Save.

    Now when someone completes the form:

    • Your team gets notified immediately via email
    • Data flows to your CRM or other systems automatically
    • You can trigger additional workflows through Zapier, Make.com or n8n (e.g., add to Google Sheets, post to Slack, create tasks)

    For more advanced integration options, see the Integrations guide.

    Step 8: Publish & Embed

    1. Click Publish in the top right corner.
    2. In the Share tab, copy the link and try it out yourself!
    3. Switch to the Embed tab to see how you can embed this form on your website:
      • Inline: Embed directly in your page
      • Popup: Show as a modal when visitors click a button
      • Floating: Add a chat-style widget to your site
      • Full Page: Open in a dedicated full-screen view

    Notice how the AI Interview section feels different. It adapts to your answers, digging deeper into your specific challenges. If you uploaded documents, the AI references them in the conversation, showing it has reviewed your materials. The standard sections handle the structured data efficiently.

    What You've Learned

    In this tutorial, you've learned how to:

    • Create a form with multiple sections
    • Collect basic information with standard fields
    • Accept file uploads that AI can process
    • Use AI Interview mode for deeper discovery conversations
    • Personalize the experience with Liquid templates
    • Set up integrations to automate workflows
    • Publish and embed your form in multiple ways

    Next Steps