Multi-step forms in Filament: a complete guide

Single-page forms work until they don't. A contact form with three fields? One page is perfect. A job application with personal details, work history, education, and references? One page is a wall of fields that makes people close the tab.

Multi-step forms fix this by breaking a long form into digestible chunks. But they're more work to build than most developers expect.

When multi-step actually helps

Not every long form needs steps. Adding steps to a 5-field form just adds clicks. The tradeoff is worth it when:

• The form has 8+ fields. Below that, a single page with good layout is usually better.
• Fields group logically. Personal info, then work details, then preferences. If fields don't group naturally, steps feel arbitrary.
• The form asks for different types of input. Text fields, then file uploads, then selections. Switching input modes works better across steps.
• You need conditional sections. Step 2 depends on what they picked in step 1. Multi-step makes this invisible — they never see the steps that don't apply to them.

The completion rate argument is real but overstated. A well-designed single-page form often converts better than a poorly designed multi-step form. Steps don't automatically improve completion. Good design does.

Building multi-step forms manually in Filament

Filament has a Wizard component built into its form package. Here's how it works in a Livewire component:

use Filament\Forms\Components\Wizard;
use Filament\Forms\Components\Wizard\Step;

public function form(Form $form): Form
{
    return $form
        ->schema([
            Wizard::make([
                Step::make('Personal details')
                    ->schema([
                        TextInput::make('first_name')->required(),
                        TextInput::make('last_name')->required(),
                        TextInput::make('email')->email()->required(),
                        TextInput::make('phone'),
                    ]),

                Step::make('Experience')
                    ->schema([
                        Select::make('years_experience')
                            ->options([
                                '0-1' => 'Less than 1 year',
                                '1-3' => '1-3 years',
                                '3-5' => '3-5 years',
                                '5+' => '5+ years',
                            ])
                            ->required(),
                        Textarea::make('current_role')
                            ->label('Describe your current role')
                            ->rows(4),
                        FileUpload::make('resume')
                            ->acceptedFileTypes(['application/pdf'])
                            ->maxSize(5120),
                    ]),

                Step::make('Preferences')
                    ->schema([
                        CheckboxList::make('interests')
                            ->options([
                                'frontend' => 'Frontend development',
                                'backend' => 'Backend development',
                                'devops' => 'DevOps',
                                'design' => 'Design',
                            ]),
                        Textarea::make('additional_notes')
                            ->rows(3),
                    ]),
            ])
            ->submitAction(view('components.submit-button')),
        ])
        ->statePath('data');
}

This gives you a working wizard with step indicators and next/previous navigation. Filament handles the step transitions and validates each step before allowing the user to proceed.

The parts Filament doesn't handle

The Wizard component covers the UI. But for a public-facing multi-step form, you still need:

Progress persistence. If someone fills out steps 1 and 2, then accidentally closes the tab, they lose everything. You need to store partial submissions in the session or database and restore them on page load.

// Save progress to session after each step
public function nextStep(): void
{
    $this->form->validate();
    session()->put("form_draft_{$this->formId}", $this->data);
}

// Restore on mount
public function mount(): void
{
    $draft = session()->get("form_draft_{$this->formId}");
    if ($draft) {
        $this->data = $draft;
    }
    $this->form->fill($this->data);
}

Step-level analytics. Where do people drop off? If 80% complete step 1 but only 40% reach step 2, something on step 2 is the problem. Tracking this means firing events on each step transition.

Conditional steps. Maybe step 3 only shows if they selected "5+ years" in step 2. Filament's Wizard supports ->hidden() and ->visible() on steps, but wiring the conditions to previous step data takes some care.

Styling on public pages. The Wizard component is designed for admin panels. Getting it to look right on a public-facing page with your own theme requires CSS work.

Each of these is solvable. But together they add up to several hours of work for every multi-step form you build.

Multi-step forms with FilaForms

FilaForms handles multi-step forms through its visual builder. When creating a form in the admin panel, you add section dividers to split the form into steps. The plugin handles:

• Step-by-step navigation with progress indicators
• Per-step validation (users can't skip ahead without completing required fields)
• Analytics per step (so you can see where drop-offs happen)
• Responsive layout that works on mobile
• Public-facing styling that doesn't conflict with your theme

No Wizard component to configure in PHP. No step persistence code. No custom JavaScript.

The tradeoff is flexibility. If you need a step to trigger a custom API call before proceeding, or if the step flow needs complex branching logic beyond simple show/hide, a manual implementation gives you more control.

Common mistakes with multi-step forms

Too many steps. Three to five steps is the sweet spot. Beyond five, the progress bar looks daunting and people wonder how long this is going to take.

Uneven step lengths. Step 1 has two fields, step 2 has twelve fields. Keep steps roughly balanced. If one step is much longer than the others, split it or move fields around.

No progress indicator. People need to know where they are and how much is left. "Step 2 of 4" with a visual progress bar reduces anxiety. Without it, each "Next" click feels like a gamble.

Validating only on submit. If all validation happens at the end, someone fills out 4 steps and then gets hit with errors from step 1. Validate each step before allowing the next.

No back button. People need to review and change their answers. If "Previous" doesn't work or loses their data, they'll abandon the form.

Asking for hard stuff first. Put easy fields (name, email) in step 1. Save file uploads, detailed text fields, and sensitive information for later steps. By then they've invested effort and are more likely to finish.

Should your form be multi-step?

If you're unsure, start with a single page. Track completion rates. If the rate is low and the form has many fields, try breaking it into steps and compare.

Data beats opinion here. Some audiences prefer scrolling through a long form. Others prefer clicking through steps. The only way to know is to test with your actual users.