FluidForms

    Logic & Branching

    Create dynamic, adaptive forms with conditional logic

    FluidForms allows you to create dynamic forms that adapt based on user responses. This guide covers conditional navigation, field visibility, and branching logic.

    Conditional Navigation

    The most powerful way to create adaptive forms is through conditional section navigation using the "Go To Section" property.

    How It Works

    Set the "Go To Section" property on a section to redirect users to a specific section based on their responses.

    Basic Example

    Section: Account Type

    • Multiple Choice: "Are you a business or individual?"
      • Options: Business, Individual
    • Go To Section: 
      {% if account_type == 'Business' %}
  business-details
{% else %}
  personal-details
{% endif %}

    This creates two different paths through your form based on the user's account type selection.

    Advanced Example: Multi-Path Routing

    Section: Service Selection

    • Multiple Choice: "Which service are you interested in?"
      • Options: Consulting, Development, Design, Support
    • Go To Section: 
      {% if service == 'Consulting' %}
  consulting-details
{% elsif service == 'Development' %}
  development-details
{% elsif service == 'Design' %}
  design-details
{% else %}
  support-details
{% endif %}

    Conditional Field Visibility

    Use the "Hidden" property with Liquid expressions to show or hide fields based on other field values.

    Example: Conditional Fields

    Section: Contact Preferences

    Field 1:

    Do you want to receive updates?
Type: Multiple Choice (Yes/No)
Name: wants_updates

    Field 2:

    Email Address
Type: Text Input
Name: email
Required: true
Hidden: {{ wants_updates != 'Yes' }}

    Field 2 only appears when the user selects "Yes" for updates.

    Example: Age-Based Fields

    Date of Birth
Name: birth_date
Type: Date Picker

    Guardian's Name
Type: Text Input
Hidden: {% assign age = birth_date | diff_time: today, 'year' %}{% if age >= 18 %}true{% else %}false{% endif %}
Required: {% assign age = birth_date | diff_time: today, 'year' %}{% if age >= 18 %}false{% else %}true{% endif %}

    This shows the guardian field only for users under 18.

    Dynamic Field Values

    Pre-fill or calculate field values using Liquid expressions in the "Value" property.

    Example: Calculated Total

    Price per unit: $50
Name: price

Quantity
Type: Number
Name: quantity

Total Cost
Type: Text Input
Value: ${{ price | times: quantity | default: 0 }}
Hidden: true

    Example: Date Calculations

    Start Date
Type: Date Picker
Name: start_date

End Date (1 year later)
Type: Date Picker
Value: {{ start_date | add_time: 1, 'year' | format_date: 'YYYY-MM-DD' }}
Minimum: {{ start_date }}

    Dynamic Field Options

    Modify field options based on previous selections.

    Example: Dependent Dropdowns

    While FluidForms doesn't directly support dependent dropdowns in simple fields, you can use conditional navigation to achieve similar effects:

    Section 1: Select Category

    • Multiple Choice: "Product Category"
      • Options: Electronics, Clothing, Books

    Section 2a: Electronics (only shown if category is Electronics)

    • Multiple Choice: "Select Product"
      • Options: Laptop, Phone, Tablet
    • Go To Section: checkout

    Section 2b: Clothing (only shown if category is Clothing)

    • Multiple Choice: "Select Product"
      • Options: Shirts, Pants, Shoes
    • Go To Section: checkout

    Skip Logic

    Skip entire sections by immediately forwarding users to another section.

    Example: Optional Survey Section

    Section: Would you like to provide feedback?

    • Multiple Choice: "Take optional survey?"
      • Options: Yes, No
    • Go To Section: 
      {% if take_survey == 'Yes' %}
  survey-questions
{% else %}
  thank-you
{% endif %}

    Section: Survey Questions

    • (Survey fields)
    • Go To Section: thank-you

    Section: Thank You

    • Confirmation message

    Users selecting "No" skip directly to the thank you page.

    Dynamic Button Labels

    Customize button text based on user responses.

    Example: Context-Aware Buttons

    Section Properties:

    Button Label: {% if service_type == 'Emergency' %}Get Immediate Help{% else %}Continue{% endif %}

    Validation Logic

    Use min/max properties with Liquid for dynamic validation.

    Example: Age-Restricted Field

    Age
Type: Number
Minimum: 18
Maximum: 120

    Example: Future Date Range

    Appointment Date
Type: Date Picker
Minimum: {{ today | add_time: 1, 'day' | format_date: 'YYYY-MM-DD' }}
Maximum: {{ today | add_time: 30, 'day' | format_date: 'YYYY-MM-DD' }}

    Complex Branching Patterns

    Pattern 1: Qualification Flow

    Section 1: Initial Question
├─ If "Qualified" → Section 2: Detailed Info
│  └─ → Section 4: Thank You
└─ If "Not Qualified" → Section 3: Alternative Offer
   └─ → Section 4: Thank You

    Pattern 2: Progressive Disclosure

    Section 1: Basic Info (always shown)
└─ → Section 2: Intermediate Questions
   ├─ If "Needs More" → Section 3: Advanced Questions
   │  └─ → Section 5: Thank You
   └─ If "Satisfied" → Section 5: Thank You

    Pattern 3: A/B Testing

    Section: Entry Point
├─ Random 50% → Version A Experience
│  └─ → Thank You
└─ Random 50% → Version B Experience
   └─ → Thank You

    Use Liquid to randomly assign paths:

    Go To Section:
{% assign random = "now" | date: "%N" | modulo: 2 %}
{% if random == 0 %}
  version-a
{% else %}
  version-b
{% endif %}

    Best Practices

    Planning Your Logic

    1. Map it out: Draw your form flow before building
    2. Keep it simple: Complex branching can confuse users
    3. Test all paths: Ensure every path leads to the thank you page
    4. Provide feedback: Let users know why they're seeing certain fields

    Performance Considerations

    1. Minimize calculations: Don't repeat complex Liquid expressions
    2. Use assignment: Store calculated values with {% assign %}
    3. Validate names: Ensure field names in expressions are correct and static

    User Experience

    1. Be transparent: Explain why fields appear/disappear
    2. Don't surprise: Avoid sudden, unexplained changes
    3. Validate appropriately: Only enforce rules that make sense
    4. Test thoroughly: Walk through all possible user paths

    Common Patterns

    1. Early exit: Disqualify users early if they don't meet criteria
    2. Progressive complexity: Start simple, add detail as needed
    3. Contextual help: Show help text only when relevant
    4. Smart defaults: Pre-fill fields when possible

    Troubleshooting

    Field Not Hiding

    • Check that the field name matches exactly
    • Verify Liquid syntax (use {% if %} not {{ if }})
    • Ensure the referenced field has a static name

    Navigation Not Working

    • Confirm section names match exactly (case-sensitive)
    • Check that all paths lead to a valid section
    • Verify Liquid expression returns a section name

    Values Not Calculating

    • Make sure the Value property is set
    • Check that referenced fields exist and have values
    • Use default filter to handle empty values

    Next Steps