Overview
Creating a form for a flow enables you to transform complex workflows into user-friendly interfaces that anyone can interact with. This powerful feature converts your AI workflows into accessible forms with custom input fields, professional styling, and flexible sharing options, making your automation tools available to end users without requiring technical knowledge.
Getting Started: Form Creation Process
Accessing Form Creation
From Flow Management:
Navigate to Flows: Access your flows list from the main navigation
Select Target Flow: Choose the flow you want to convert into a form
Context Menu: Click the three-dot menu (⋯) next to your desired flow
Create Form Option: Select "Create form" from the dropdown menu
Available Flow Actions:
Rename: Modify flow identification
Share: Direct flow sharing options
Open in new tab: Launch flow in separate window
Create form: Convert flow to interactive form ✓
Duplicate: Create flow copies
Delete: Remove flows permanently
Initial Form Setup
Form Creation Dialog:
Creation Context: "You're crafting a form based on the '[FLOW_NAME]' existing flow"
Form Naming: "Enter Form Name" field for custom form identification
Creation Process: "Continue" button to proceed with form generation
Flow Integration: Automatic linking between form and underlying workflow
Form Builder Interface
Main Editor Layout
Interface Components:
Form Name Display: Shows current form name (e.g., "TEST") in header
Status Indicators:
Internal/External Toggle: Controls form accessibility
Publication Status: "Unpublished" badge indicates draft state
Action Buttons: Preview, Share, and Publish options for form management
Settings Access: Configuration gear icon for advanced options
Component Palette
Available Form Elements:
Content Components
Title: Main headings and form titles
Short Text: Brief text content and descriptions
Image: Visual elements and branding assets
List: Organized information display
Interactive Elements
Input: User data collection fields
Output: Results display areas
Submit: Form submission controls
Component Management:
Drag-and-Drop: Intuitive component placement
Visual Preview: Real-time form appearance
Component Editing: Click-to-configure interface elements
Form Component Configuration
Title Component Setup
Basic Title Configuration:
Primary Title: Main form heading field
Title Editing: Click-to-edit title text
Header Hierarchy: Automatic formatting for form structure
Advanced Title Options:
Title Field: Primary heading configuration
Subtitle (Optional): Secondary descriptive text
Description (Optional): Detailed form explanation
Flexible Content: All fields support dynamic content
Image Component Configuration
Image Upload System:
Upload Interface: "Click here to upload an Image" prompt
Testing Instructions: "To test this, enter preview mode or publish your form"
Visual Integration: Images enhance form appearance and branding
Format Support: Multiple image formats accepted
Image Configuration Options:
Title (Optional): Image caption or heading
Subtitle (Optional): Additional image description
Upload Management: Easy image replacement and removal
Preview Testing: Visual validation before publishing
Input Component Configuration
Input Field Setup:
Field Name: Custom field identification (e.g., "Name")
Question Text: "Add question here" placeholder for user prompts
Input Type Selection: Dropdown control for field type specification
Input Type Options:
Dropdown: Selection from predefined options
Text Input: Free-form text entry
Multiple Choice: Radio button selections
Checkboxes: Multiple selection options
File Upload: Document and media submission
Dropdown Configuration:
Option Management: "Option 1", "Add Option 2" for choice creation
Option Removal: X button for deleting unwanted choices
Data Source: "Choose Input Node" for workflow integration
Validation Warning: "No input selected" alerts for incomplete configuration
Advanced Input Settings:
Content Instructions: "Input your content that you want to run through your AI flow"
Testing Guidance: "To test this, enter preview mode or publish your form"
Data Input Selection: "Please select which 'Data Input' to use for this input field"
Node Connection: "Choose Data Input Node" for workflow linking
Data Input Integration
Input Node Selection:
Choose Input Dialog: Modal for selecting data sources
Node Description: "Select the Input API node that meets your form's data needs"
Integration Process: "It will provide the required input when your form is published"
Available Options: Multiple "Data Input" nodes for selection
Save Configuration: Confirm input node assignments
Output Component Configuration
Output Display Setup:
Title and Subtitle: Standard header configuration options
Output Preview: "Your output will be displayed in text format here once you submit your form"
Testing Instructions: Preview and publish guidance for validation
Node Selection: "Choose Output Node" for result display configuration
Output Node Integration:
Choose Output Dialog: Modal for selecting result sources
Node Description: "Select the Output node that meets your form's data needs"
Result Display: "It will provide the required output when your form is published"
Available Options: Multiple "Data Output" nodes for selection
Save Configuration: Confirm output node assignments
Form Submission Configuration
Submit Button Setup
Basic Submit Configuration:
Submit Button: Standard form submission control
Advanced Settings: Gear icon for detailed configuration options
Submission Handling: Automatic workflow execution upon form submission
Advanced Submission Settings
Flow Selection Options:
Submit to All Flows: Universal submission to all available workflows
Specific Flow Selection: Choose target flow from dropdown (e.g., "TEST")
Targeted Processing: Route submissions to specific workflows
File Management Options:
Remove Uploaded Files: "Submitted file uploads will be removed following each flow run"
Retain Uploaded Files: "Submitted file uploads will be saved in the system after flow is run" ✓
Storage Management: Control file persistence and system storage
Configuration Persistence:
Save Settings: Confirm submission configuration
Processing Rules: Define how form data flows into workflows
Resource Management: Control file storage and cleanup policies
Form Styling and Customization
Form Style Settings
Layout Configuration:
Horizontal Toggle: Enable/disable horizontal layout
Vertical Toggle: Enable/disable vertical layout
Gap Settings: Spacing control with numeric values (e.g., "16")
Background Color: Custom color selection with color picker
Visual Customization:
Background Image: "Click here to upload an Image" for custom backgrounds
Color Schemes: Professional appearance customization
Spacing Control: Fine-tune element positioning
Layout Flexibility: Adapt forms to different screen sizes
Text and Typography
Font Configuration:
Font Selection: Dropdown with options like "Roboto"
Font Size: Adjustable sizing (e.g., "20px") with dropdown control
Text Styling: Bold, italic, and underline options
Text Alignment: Left, center, right, and justify alignment options
Color Management:
Text Color: Custom color codes (e.g., "
#475467") with color pickerColor Palette: Predefined color options including:
Dark Colors: Black, dark gray variations
Neutral Colors: Light gray, medium gray
Accent Colors: Green, yellow, red, blue variations
Highlight Colors: Purple, violet options
Custom Colors: Full color picker for unlimited options
Modal and Interface Styling
Modal Configuration:
Modal Size: Dropdown selection (e.g., "100%") for form dimensions
Background Color: Custom modal background (
#ffffff)Background Palette: Predefined background color options
Border Radius: Adjustable corner rounding (e.g., "4px")
Professional Appearance:
Consistent Styling: Uniform appearance across all form elements
Brand Integration: Custom colors and fonts for brand consistency
Responsive Design: Automatic adaptation to different devices
Visual Hierarchy: Clear organization of form elements
Form Publishing and Sharing
Publication Status Management
Status Indicators:
Internal Badge: Blue "Internal" indicator for restricted access
Unpublished Badge: Orange "Unpublished" status for draft forms
Publication Control: Clear visibility of current form state
Publishing Options
Access Control Selection:
Internal Publishing: "Only available to FluxPrompt users who can complete and submit the form"
External Publishing: "Available to anyone with whom you share the link. Also accessible to FluxPrompt users"
Default Selection: Internal publishing selected by default for security
Publishing Process:
Continue Button: Proceed with selected publishing option
Publication Confirmation: System generates form URL upon publishing
Access Management: Control who can view and submit forms
Form Sharing System
Share Link Generation:
Copy Published Form Link: Direct URL copying for easy sharing
Generated URL: Automatic creation of form access links
Link Format: Professional URLs for external sharing
URL Management:
Copy Link Button: One-click URL copying with link icon
Link Validation: Automatic URL generation and validation
Access Testing: Verify form accessibility through generated links
Publication Control
Publishing Actions:
Publish Button: Make forms live and accessible
Unpublish Option: Remove forms from public access
Publication Toggle: Easy switching between published and draft states
Version Control: Manage form updates and revisions
Form-to-Flow Connection
Data Flow Integration:
Input Mapping: Form fields automatically connect to workflow inputs
Output Display: Workflow results display in form output sections
Processing Pipeline: Seamless data flow from form submission to workflow execution
Result Delivery: Automatic presentation of workflow outputs to form users
Best Practices and Optimization
Form Design Guidelines
User Experience Optimization:
Clear Instructions: Provide helpful guidance for each form field
Logical Flow: Organize form elements in intuitive sequences
Visual Hierarchy: Use titles, subtitles, and descriptions effectively
Input Validation: Configure appropriate input types for data quality
Publishing Strategy
Access Control Planning:
Internal Forms: Use for sensitive or organization-specific workflows
External Forms: Deploy for customer-facing or public workflows
Security Considerations: Choose appropriate access levels based on data sensitivity
Testing Process: Always preview forms before publishing
Performance Optimization
Efficient Form Configuration:
Minimal Complexity: Include only necessary form elements
Fast Loading: Optimize images and content for quick form loading
Clear CTAs: Make submission buttons prominent and action-oriented
Error Handling: Provide clear feedback for form validation issues
Integration Best Practices
Workflow Connection:
Data Mapping: Ensure form inputs match workflow requirements
Output Configuration: Set up appropriate output displays for results
File Management: Choose appropriate file retention policies
Testing Validation: Thoroughly test form-to-workflow connections before publishing
Creating forms for flows transforms complex AI workflows into accessible, user-friendly interfaces that enable both technical and non-technical users to leverage powerful automation capabilities through intuitive form-based interactions.