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
$stepproperty.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.