> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.swellsystem.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Multi-Step Forms

# Multi-Step Forms

Create engaging multi-page forms with progress indicators and smooth transitions.

## What are Multi-Step Forms?

Multi-step forms break long forms into multiple pages or steps, making them:
- Less overwhelming for users
- Easier to complete
- More engaging
- Better for mobile devices

## Creating Multi-Step Forms

### Step 1: Add Steps

1. In form builder, click **"Add Step"**
2. Enter step title and description
3. Add fields to the step
4. Configure step settings

### Step 2: Organize Fields

1. Drag fields into steps
2. Reorder fields within steps
3. Move fields between steps
4. Remove fields from steps

### Step 3: Configure Step Settings

1. **Step Title**: Name of the step
2. **Step Description**: Brief description
3. **Progress Indicator**: Show/hide progress
4. **Transition Animation**: Slide, fade, or none
5. **Step Validation**: Validate before proceeding

## Step Configuration

### Step Titles

- **Clear Titles**: Use descriptive step titles
- **Numbering**: Automatic or manual numbering
- **Icons**: Add icons to step titles (optional)

### Step Descriptions

- **Brief Descriptions**: Explain what the step is for
- **Instructions**: Provide guidance for users
- **Examples**: Show example answers (optional)

### Progress Indicators

- **Progress Bar**: Visual progress bar
- **Step Counter**: "Step 1 of 5" display
- **Percentage**: "20% Complete" display
- **Dots**: Visual step indicators

## Step Navigation

### Next Button

- **Label**: Customize "Next" button text
- **Position**: Top, bottom, or both
- **Validation**: Validate before proceeding

### Previous Button

- **Show/Hide**: Allow users to go back
- **Label**: Customize "Previous" button text
- **Behavior**: Go back one step or to specific step

### Step Validation

- **Required Fields**: Ensure required fields are filled
- **Field Validation**: Validate field formats
- **Error Display**: Show errors on current step
- **Prevent Navigation**: Block navigation if invalid

## Step Transitions

### Transition Types

- **Slide**: Slide animation between steps
- **Fade**: Fade transition
- **None**: Instant transition
- **Custom**: Custom CSS animations

### Transition Speed

- **Fast**: Quick transitions
- **Normal**: Standard speed
- **Slow**: Slower, more noticeable transitions

## Progress Tracking

### Visual Progress

- **Progress Bar**: Fill bar as user progresses
- **Step Indicators**: Highlight current step
- **Completion Percentage**: Show percentage complete

### Progress Calculation

- **By Steps**: Progress based on steps completed
- **By Fields**: Progress based on fields completed
- **By Weight**: Weighted progress (some steps more important)

## Step Logic

### Conditional Steps

Show or hide steps based on answers:

**Example:**
```
IF "Customer Type" EQUALS "Business"
THEN SHOW "Business Details" step
ELSE SKIP "Business Details" step
```

### Step Dependencies

Make steps depend on previous steps:

**Example:**
```
Step 2 is only available if Step 1 is completed
```

## Best Practices

### Step Length

- **3-5 Questions**: Optimal questions per step
- **Not Too Short**: Avoid single-question steps
- **Not Too Long**: Don't overwhelm users

### Step Order

- **Logical Flow**: Arrange steps logically
- **Easy First**: Start with easy questions
- **Important Last**: Save critical questions for end

### Progress Communication

- **Show Progress**: Always show progress indicator
- **Clear Steps**: Make it clear how many steps remain
- **Completion Time**: Show estimated time remaining

### Mobile Optimization

- **Touch-Friendly**: Large buttons for mobile
- **Vertical Layout**: Optimize for vertical scrolling
- **Fast Loading**: Ensure steps load quickly

## Use Cases

### Onboarding Forms

Multi-step onboarding for new users:

1. **Step 1**: Basic Information
2. **Step 2**: Preferences
3. **Step 3**: Setup Options
4. **Step 4**: Confirmation

### Lead Qualification

Qualify leads with multi-step forms:

1. **Step 1**: Contact Information
2. **Step 2**: Company Details
3. **Step 3**: Needs Assessment
4. **Step 4**: Budget Information

### Event Registration

Register for events with multiple steps:

1. **Step 1**: Personal Information
2. **Step 2**: Event Selection
3. **Step 3**: Payment Information
4. **Step 4**: Confirmation

## Advanced Features

### Save Progress

Allow users to save and resume later:

- **Save Button**: Let users save progress
- **Resume Link**: Email link to resume
- **Auto-Save**: Automatically save progress

### Step Branching

Create different paths based on answers:

**Example:**
```
IF "Product Interest" EQUALS "Product A"
THEN GO TO "Product A Details" step
ELSE IF "Product Interest" EQUALS "Product B"
THEN GO TO "Product B Details" step
```

### Step Validation

Validate entire steps before proceeding:

- **Required Fields**: All required fields must be filled
- **Field Validation**: All fields must be valid
- **Custom Validation**: Custom validation rules

## Troubleshooting

### Steps Not Appearing

- Check step is active
- Verify step order
- Check conditional logic
- Review form preview

### Navigation Issues

- Verify step validation
- Check button configuration
- Review step dependencies
- Test on different devices

### Progress Not Updating

- Check progress indicator settings
- Verify step completion tracking
- Review progress calculation method