Flow Builder Overview

The Flow Builder is Funnelflow's visual interface for creating sophisticated forms and workflows. With its intuitive drag-and-drop functionality, you can build complex multi-step forms without any coding knowledge.

What is the Flow Builder?

The Flow Builder is a visual canvas where you can:

• Design forms with multiple pages and steps
• Add various field types and components
• Set up conditional logic and branching
• Configure styling and branding
• Test your forms before publishing

Key Components

Canvas

The main workspace where you build your forms. You can:

• Drag elements from the sidebar
• Arrange components visually
• Preview your form in real-time
• Navigate between different pages

Element Library

A comprehensive collection of form elements including:

• Input Fields: Text, email, phone, number inputs
• Selection Fields: Dropdowns, radio buttons, checkboxes
• Media Elements: Images, videos, file uploads
• Logic Elements: Conditional branches, calculations
• Content Elements: Text blocks, headers, dividers

Properties Panel

Configure each element's settings:

• Field labels and descriptions
• Validation rules
• Styling options
• Conditional logic
• Required field settings

Page Navigator

Manage multiple form pages:

• Add new pages
• Reorder pages
• Set up page transitions
• Configure completion actions

Getting Started

Creating Your First Flow

1. Start with a Template

   • Choose from pre-built templates
   • Or start with a blank canvas

2. Add Your Elements

   • Drag fields from the element library
   • Drop them onto your canvas
   • Configure each field's properties

3. Set Up Logic

   • Add conditional branching
   • Configure field dependencies
   • Set up calculations

4. Style Your Form

   • Apply your brand colors
   • Customize fonts and spacing
   • Add your logo and images

5. Test and Publish

   • Use the preview mode to test
   • Check all paths and conditions
   • Publish when ready

Form Types

Single Page Forms

Perfect for:

• Contact forms
• Newsletter signups
• Quick surveys
• Lead capture

Multi-Step Forms

Ideal for:

• Complex applications
• Detailed surveys
• Onboarding processes
• Progressive profiling

Conditional Forms

Great for:

• Dynamic questionnaires
• Personalized experiences
• Qualification forms
• Branching scenarios

Best Practices

Form Design

• Keep forms as short as possible
• Use clear, descriptive labels
• Group related fields together
• Make required fields obvious

User Experience

• Show progress indicators for multi-step forms
• Provide helpful validation messages
• Use logical field ordering
• Include clear calls-to-action

Performance

• Optimize images and media
• Test on different devices
• Keep load times minimal
• Use conditional logic to reduce form length

Advanced Features

AI-Powered Building

• Generate forms from descriptions
• Suggest field types and logic
• Optimize for conversions
• Auto-complete common patterns

Custom CSS

• Advanced styling options
• Custom animations
• Responsive design tweaks
• Brand-specific customizations

Integration Setup

• Connect to CRM systems
• Set up webhooks
• Configure automations
• Map fields to external systems

Next Steps

• Learn about Field Types
• Set up Logic & Branching
• Create Multiple Steps
• Customize Styling & Branding