Creating Multi-Step Forms in Livewire 3.0

January 9, 2025
12:25 am
No Comments

Introduction

In the last blog Creating Dynamic Modals in Livewire 3.0, we explored creating dynamic modals in Livewire 3.0. Today, we’ll focus on building multi-step forms in Livewire 3.0. Multi-step forms are a great way to enhance user experience for long or complex forms by dividing them into smaller, manageable steps. With Livewire’s reactive features, you can easily create dynamic multi-step forms with real-time validation and state management.

Step 1: Setting Up a Multi-Step Form Component

1. Generate the Component

Run the following command to create a new Livewire component:


php artisan make:livewire MultiStepForm

This will generate:

app/Livewire/MultiStepForm.php – The PHP class for the component.
resources/views/livewire/multi-step-form.blade.php – The Blade view for the component.

Step 2: Defining the Component Logic

Open MultiStepForm.php and define the properties and methods to handle the form steps:


<?php

namespace App\Livewire;

use Livewire\Component;

class MultiStepForm extends Component
{
    public $step = 1;
    public $formData = [
        'name' => '',
        'email' => '',
        'address' => '',
    ];

    public function nextStep()
    {
        $this->validateStep();
        $this->step++;
    }

    public function previousStep()
    {
        $this->step--;
    }

    public function submit()
    {
        $this->validate([
            'formData.name' => 'required|min:3',
            'formData.email' => 'required|email',
            'formData.address' => 'required|min:5',
        ]);

        // Save data or perform any action
        session()->flash('success', 'Form submitted successfully!');
        $this->reset();
    }

    private function validateStep()
    {
        if ($this->step === 1) {
            $this->validate([
                'formData.name' => 'required|min:3',
            ]);
        } elseif ($this->step === 2) {
            $this->validate([
                'formData.email' => 'required|email',
            ]);
        }
    }

    public function render()
    {
        return view('livewire.multi-step-form');
    }
}

Key Features:

Step Management: Tracks the current step with the $step property.
Validation: Validates fields dynamically based on the current step.
Form Reset: Resets the form after submission.

Step 3: Designing the Blade View

Open multi-step-form.blade.php and create a dynamic form layout:


<div>
    @if (session()->has('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif

    @if ($step === 1)
        <div>
            <h2>Step 1: Personal Details</h2>
            <input type="text" wire:model="formData.name" placeholder="Enter your name">
            @error('formData.name') <span class="error">{{ $message }}</span> @enderror

            <button wire:click="nextStep">Next</button>
        </div>
    @endif

    @if ($step === 2)
        <div>
            <h2>Step 2: Contact Information</h2>
            <input type="email" wire:model="formData.email" placeholder="Enter your email">
            @error('formData.email') <span class="error">{{ $message }}</span> @enderror

            <button wire:click="previousStep">Back</button>
            <button wire:click="nextStep">Next</button>
        </div>
    @endif

    @if ($step === 3)
        <div>
            <h2>Step 3: Address</h2>
            <input type="text" wire:model="formData.address" placeholder="Enter your address">
            @error('formData.address') <span class="error">{{ $message }}</span> @enderror

            <button wire:click="previousStep">Back</button>
            <button wire:click="submit">Submit</button>
        </div>
    @endif
</div>

Key Features:

Conditional Rendering: Displays content based on the current step.
Error Handling: Displays validation errors for each field.
Dynamic Buttons: Navigates between steps or submits the form.

Step 4: Styling the Multi-Step Form

Use a CSS framework like Tailwind CSS or Bootstrap for better styling. For example:


<div class="p-6 bg-gray-100 rounded">
    <h2 class="text-xl font-bold">Step {{ $step }}</h2>
    <div class="mt-4">
        @if ($step === 1)
            <!-- Step 1 Content -->
        @endif
        @if ($step === 2)
            <!-- Step 2 Content -->
        @endif
        @if ($step === 3)
            <!-- Step 3 Content -->
        @endif
    </div>

    <div class="mt-6">
        @if ($step > 1)
            <button class="btn btn-secondary" wire:click="previousStep">Back</button>
        @endif

        @if ($step < 3)
            <button class="btn btn-primary" wire:click="nextStep">Next</button>
        @else
            <button class="btn btn-success" wire:click="submit">Submit</button>
        @endif
    </div>
</div>

Step 5: Extending the Multi-Step Form

1. Adding Progress Indicators

Show users their progress through the steps:


<div class="progress-bar">
    <div class="progress" style="width: {{ ($step / 3) * 100 }}%;"></div>
</div>

2. Persisting Form Data

Store form data in the session to avoid losing it if the user refreshes the page:


public function mount()
{
    $this->formData = session('formData', $this->formData);
}

public function updatedFormData()
{
    session(['formData' => $this->formData]);
}

3. Adding Conditional Steps

Dynamically adjust steps based on user input:


if ($this->formData['userType'] === 'business') {
    $this->totalSteps = 4;
} else {
    $this->totalSteps = 3;
}

Final Output

By following these steps, your multi-step form will:

Guide users through a structured form submission process.
Dynamically validate inputs at each step.
Provide a seamless and interactive user experience.

Key Features Covered Today

Creating multi-step forms in Livewire 3.0.
Managing state and validation across steps.
Extending functionality with progress indicators and conditional steps.
Enhancing UX with styling and persistent form data.

About

Services

Contact

410 C, Jaina Tower-1, District Center, Janak Puri New Delhi-110058, India.