Creating a Multi-Step Form Wizard with Laravel 10 and Livewire

Steps to Creating a Multi-Step Form Wizard with Laravel 10 and Livewire

Step 1: Installation Laravel 10
Step 2: Creating the Form
Step 3: Adding Navigation Buttons
Step 4: Implementing Form Submit
Step 5: Adding Form Validation
Step 6: Styling the Form
Conclusion

Step 1: Installation Laravel 10

First, let’s create a new Laravel project by running the following command:

laravel new multi-step-form-wizard

Next, let’s install Livewire by running the following command:

composer require livewire/livewire

Once Livewire is installed, we need to publish its assets by running the following command:

php artisan livewire:publish --assets

Step 2: Creating the Form

Next, let’s create a new Livewire component for our form by running the following command:

php artisan make:livewire MultiStepFormWizard

This will create a new Livewire component called MultiStepFormWizard in the app/Http/Livewire directory. Open this file and let’s add our form fields and submit button. Here is an example code for a simple form:

<div>
    <form wire:submit.prevent="submit">
        <div>
            <label>Name:</label>
            <input type="text" wire:model="name">
        </div>
        <div>
            <label>Email:</label>
            <input type="email" wire:model="email">
        </div>
        <div>
            <label>Password:</label>
            <input type="password" wire:model="password">
        </div>
        <div>
            <button type="submit">Submit</button>
        </div>
    </form>
</div>

Step 3: Adding Navigation Buttons

Now that we have our form, let’s add navigation buttons to move between form steps. We will use Livewire’s built-in component called wire:click to handle button clicks. Here is an example code to add previous and next buttons to our form:

<div>
    @if($currentStep == 1)
        <!-- Step 1 -->
        <div>
            <label>Name:</label>
            <input type="text" wire:model="name">
        </div>
        <button wire:click.prevent="nextStep">Next</button>
    @elseif($currentStep == 2)
        <!-- Step 2 -->
        <div>
            <label>Email:</label>
            <input type="email" wire:model="email">
        </div>
        <button wire:click.prevent="previousStep">Previous</button>
        <button wire:click.prevent="nextStep">Next</button>
    @elseif($currentStep == 3)
        <!-- Step 3 -->
        <div>
            <label>Password:</label>
            <input type="password" wire:model="password">
        </div>
        <button wire:click.prevent="previousStep">Previous</button>
        <button type="submit">Submit</button>
    @endif
</div>

Step 4: Implementing Form Submit

Now that our form is complete, let’s add the submit logic to our MultiStepFormWizard component. We will add a submit method that will handle form submission and redirect the user to a success page. Here is an example code for the submit method:

public function submit()
{
    // Validate form fields
    $this->validate([
        'name' => 'required',
        'email' => 'required|email',
        'password' => 'required|min:6',
    ]);

    //Save form data to database or send an email

    // Redirect to success page
    return redirect()->to('/success');
}

Step 5: Adding Form Validation

To ensure that our form data is valid, we need to add form validation. In Laravel, we can use the validate method to validate form fields. We will add the validation rules to our submit method. Here is an example code to add validation rules to our form fields:

public function submit()
{
    // Validate form fields
    $this->validate([
        'name' => 'required',
        'email' => 'required|email',
        'password' => 'required|min:6',
    ]);

    // Save form data to database or send an email

    // Redirect to success page
    return redirect()->to('/success');
}

Step 6: Styling the Form

Finally, let’s add some styles to our form to make it more visually appealing. We will use Tailwind CSS, a popular CSS framework, to add styles to our form. Here is an example code to style our form:

<div class="max-w-md mx-auto mt-10">
    <div class="bg-white rounded-lg shadow p-6">
        @if($currentStep == 1)
            <!-- Step 1 -->
            <div>
                <label class="block mb-2 font-bold text-gray-700">Name:</label>
                <input class="form-input w-full" type="text" wire:model="name">
            </div>
            <button class="mt-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" wire:click.prevent="nextStep">Next</button>
        @elseif($currentStep == 2)
            <!-- Step 2 -->
            <div>
                <label class="block mb-2 font-bold text-gray-700">Email:</label>
                <input class="form-input w-full" type="email" wire:model="email">
            </div>
            <button class="mt-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" wire:click.prevent="previousStep">Previous</button>
            <button class="mt-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" wire:click.prevent="nextStep">Next</button>
        @elseif($currentStep == 3)
            <!-- Step 3 -->
            <div>
                <label class="block mb-2 font-bold text-gray-700">Password:</label>
                <input class="form-input w-full" type="password" wire:model="password">
            </div>
            <button class="mt-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" wire:click.prevent="previousStep">Previous</button>
            <button class="mt-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" type="submit">Submit</button>
        @endif
    </div>
</div>

Conclusion

In this tutorial, we have learned how to create a multi-step form wizard using Laravel 10 and Livewire. We have seen how to create the form, add navigation buttons, handle form submission, add form validation, and style the form.

By following this tutorial, you can create complex forms that are easier for users to fill out and provide a better user experience.