Laravel 8 Livewire Form Wizard Tutorial

In this tutorial you will learn about the Laravel 8 Livewire Form Wizard Tutorial and its application with practical example.

In this Laravel 8 Livewire Form Wizard Tutorial I will show you how to create multi step form or form wizard using livewire package in laravel 8 application. In this tutorial we will learn to create multi step form or form wizard in laravel using livewire package. In this article we will be creating simple multi step form wizard with bootstrap wizard design using livewire package. In this tutorial you will also learn to install, setup and use laravel livewire form.

Table Of Contents−

Laravel 8 Livewire Form Wizard Tutorial

In this step by step livewire form wizard tutorial will guide you through how to create multi-step form or form wizard using livewire package in laravel 8. Please follow instruction given below:

Step 1: Install Laravel 8 App

Step 2: Connecting App to Database
Step 3: Create Model & Migration For File using Artisan
Step 4: Install Livewire Package

Step 5: Create Form Wizard Components using Artisan
Step 6: Add Route For Livewire Form Wizard
Step 7: Create View File

Step 8: Run Development Server

Step 1: Install Laravel 8 App

First of all we need to create a fresh laravel project, download and install Laravel 8 using the below command

 composer create-project --prefer-dist laravel/laravel blog

1	composer create-project --prefer-dist laravel/laravel blog

Step 2: Connecting App to Database

Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.

DB_CONNECTION=mysql  
DB_HOST=127.0.0.1  
DB_PORT=3306  
DB_DATABASE=here your database name here 
DB_USERNAME=here database username here 
DB_PASSWORD=here database password here

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=here your database name here

DB_USERNAME=here database username here

DB_PASSWORD=here database password here

Step 3: Create Model & Migration For File using Artisan

Now, in this step we will create model and migration file. Please run the following command:

php artisan make:model Product -m

1	php artisan make:model Product -m

The above command will create a model name Product.php and also create a migration that name create_products_table.php. Now, go to database/migrations folder and open create_products_table.php file. Then put the following code into create_products_table.php file:

public function up()
{
    Schema::create('products', function (Blueprint $table) {
        $table->id();
        $table->string('name')->nullable();
        $table->longText('description')->nullable();
        $table->float('amount')->nullable();
        $table->boolean('status')->default(0);
        $table->integer('stock')->default(0);
        $table->timestamps();
    });
}

public function up()

{

Schema::create('products', function (Blueprint $table) {

$table->id();

$table->string('name')->nullable();

$table->longText('description')->nullable();

$table->float('amount')->nullable();

$table->boolean('status')->default(0);

$table->integer('stock')->default(0);

$table->timestamps();

});

}

Now, in this step we will create model and migration file. Please run the following command:

php artisan migrate

1	php artisan migrate

Now, Open App/Models/Product.php file and add the fillable properties:

<?php
   
namespace App\Models;
   
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
   
class Product extends Model
{
    use HasFactory;
  
    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    protected $fillable = [
        'name', 'amount', 'description', 'status', 'stock'
    ];
}

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;

use Illuminate\Database\Eloquent\Model;

class Product extends Model

{

use HasFactory;

/**

* The attributes that are mass assignable.

* @var array

protected $fillable = [

'name', 'amount', 'description', 'status', 'stock'

];

}

Step 4: Install Livewire Package

In this step, we will install livewire Package via the composer dependency manager. Use the following command to install livewire Package.

composer require livewire/livewire

1	composer require livewire/livewire

Step 5: Create Form Wizard Components using Artisan

In this step we will create a form wizard component using following artisan command:

php artisan make:livewire wizard

1	php artisan make:livewire wizard

This command will create the following components on the following path:

app/Http/Livewire/Wizard.php
resources/views/livewire/wizard.php

1 2	app/Http/Livewire/Wizard.php resources/views/livewire/wizard.php

Now, go to app/Http/Livewire folder and open Wizard.php file. Then add the following code into your Wizard.php file:

<?php
   
namespace App\Http\Livewire;
   
use Livewire\Component;
use App\Models\Product;
   
class Wizard extends Component
{
    public $currentStep = 1;
    public $name, $amount, $description, $status = 1, $stock;
    public $successMessage = '';
   
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function render()
    {
        return view('livewire.wizard');
    }
   
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function firstStepSubmit()
    {
        $validatedData = $this->validate([
            'name' => 'required|unique:products',
            'amount' => 'required|numeric',
            'description' => 'required',
        ]);
  
        $this->currentStep = 2;
    }
   
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function secondStepSubmit()
    {
        $validatedData = $this->validate([
            'stock' => 'required',
            'status' => 'required',
        ]);
   
        $this->currentStep = 3;
    }
   
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function submitForm()
    {
        Product::create([
            'name' => $this->name,
            'amount' => $this->amount,
            'description' => $this->description,
            'stock' => $this->stock,
            'status' => $this->status,
        ]);
   
        $this->successMessage = 'Product Created Successfully.';
   
        $this->clearForm();
   
        $this->currentStep = 1;
    }
   
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function back($step)
    {
        $this->currentStep = $step;    
    }
   
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function clearForm()
    {
        $this->name = '';
        $this->amount = '';
        $this->description = '';
        $this->stock = '';
        $this->status = 1;
    }
}

100

<?php

namespace App\Http\Livewire;

use Livewire\Component;

use App\Models\Product;

class Wizard extends Component

{

public $currentStep = 1;

public $name, $amount, $description, $status = 1, $stock;

public $successMessage = '';

/**

* Write code on Method

* @return response()

public function render()

{

return view('livewire.wizard');

}

/**

* Write code on Method

* @return response()

public function firstStepSubmit()

{

$validatedData = $this->validate([

'name' => 'required|unique:products',

'amount' => 'required|numeric',

'description' => 'required',

]);

$this->currentStep = 2;

}

/**

* Write code on Method

* @return response()

public function secondStepSubmit()

{

$validatedData = $this->validate([

'stock' => 'required',

'status' => 'required',

]);

$this->currentStep = 3;

}

/**

* Write code on Method

* @return response()

public function submitForm()

{

Product::create([

'name' => $this->name,

'amount' => $this->amount,

'description' => $this->description,

'stock' => $this->stock,

'status' => $this->status,

]);

$this->successMessage = 'Product Created Successfully.';

$this->clearForm();

$this->currentStep = 1;

}

/**

* Write code on Method

* @return response()

public function back($step)

{

$this->currentStep = $step;

}

/**

* Write code on Method

* @return response()

public function clearForm()

{

$this->name = '';

$this->amount = '';

$this->description = '';

$this->stock = '';

$this->status = 1;

}

Now, go to resources/views/livewire folder and open wizard.blade.php file. Then add the following code into your wizard.blade.php file:

<div>
@if(!empty($successMessage))
<div class="alert alert-success">
{{ $successMessage }}
</div>
@endif
<div class="stepwizard">
<div class="stepwizard-row setup-panel">
<div class="stepwizard-step">
<a href="#step-1" type="button" class="btn btn-circle {{ $currentStep != 1 ? 'btn-default' : 'btn-primary' }}">1</a>
<p>Step 1</p>
</div>
<div class="stepwizard-step">
<a href="#step-2" type="button" class="btn btn-circle {{ $currentStep != 2 ? 'btn-default' : 'btn-primary' }}">2</a>
<p>Step 2</p>
</div>
<div class="stepwizard-step">
<a href="#step-3" type="button" class="btn btn-circle {{ $currentStep != 3 ? 'btn-default' : 'btn-primary' }}" disabled="disabled">3</a>
<p>Step 3</p>
</div>
</div>
</div>
<div class="row setup-content {{ $currentStep != 1 ? 'displayNone' : '' }}" id="step-1">
<div class="col-xs-12">
<div class="col-md-12">
<h3> Step 1</h3>
<div class="form-group">
<label for="title">Product Name:</label>
<input type="text" wire:model="name" class="form-control" id="taskTitle">
@error('name') <span class="error">{{ $message }}</span> @enderror
</div>
<div class="form-group">
<label for="description">Product Amount:</label>
<input type="text" wire:model="amount" class="form-control" id="productAmount"/>
@error('amount') <span class="error">{{ $message }}</span> @enderror
</div>
<div class="form-group">
<label for="description">Product Description:</label>
<textarea type="text" wire:model="description" class="form-control" id="taskDescription">{{{ $description ?? '' }}}</textarea>
@error('description') <span class="error">{{ $message }}</span> @enderror
</div>
<button class="btn btn-primary nextBtn btn-lg pull-right" wire:click="firstStepSubmit" type="button" >Next</button>
</div>
</div>
</div>
<div class="row setup-content {{ $currentStep != 2 ? 'displayNone' : '' }}" id="step-2">
<div class="col-xs-12">
<div class="col-md-12">
<h3> Step 2</h3>
<div class="form-group">
<label for="description">Product Status</label><br/>
<label class="radio-inline"><input type="radio" wire:model="status" value="1" {{{ $status == '1' ? "checked" : "" }}}> Active</label>
<label class="radio-inline"><input type="radio" wire:model="status" value="0" {{{ $status == '0' ? "checked" : "" }}}> DeActive</label>
@error('status') <span class="error">{{ $message }}</span> @enderror
</div>
<div class="form-group">
<label for="description">Product Stock</label>
<input type="text" wire:model="stock" class="form-control" id="productAmount"/>
@error('stock') <span class="error">{{ $message }}</span> @enderror
</div>
<button class="btn btn-primary nextBtn btn-lg pull-right" type="button" wire:click="secondStepSubmit">Next</button>
<button class="btn btn-danger nextBtn btn-lg pull-right" type="button" wire:click="back(1)">Back</button>
</div>
</div>
</div>
<div class="row setup-content {{ $currentStep != 3 ? 'displayNone' : '' }}" id="step-3">
<div class="col-xs-12">
<div class="col-md-12">
<h3> Step 3</h3>
<table class="table">
<tr>
<td>Product Name:</td>
<td><strong>{{$name}}</strong></td>
</tr>
<tr>
<td>Product Amount:</td>
<td><strong>{{$amount}}</strong></td>
</tr>
<tr>
<td>Product status:</td>
<td><strong>{{$status ? 'Active' : 'DeActive'}}</strong></td>
</tr>
<tr>
<td>Product Description:</td>
<td><strong>{{$description}}</strong></td>
</tr>
<tr>
<td>Product Stock:</td>
<td><strong>{{$stock}}</strong></td>
</tr>
</table>
<button class="btn btn-success btn-lg pull-right" wire:click="submitForm" type="button">Finish!</button>
<button class="btn btn-danger nextBtn btn-lg pull-right" type="button" wire:click="back(2)">Back</button>
</div>
</div>
</div>
</div>

<div>

@if(!empty($successMessage))

</div>

@endif

</div>

</div>

</div>

<label for="title">Product Name:</label>

@error('name') <span class="error">{{ $message }}</span> @enderror

</div>

<label for="description">Product Amount:</label>

@error('amount') <span class="error">{{ $message }}</span> @enderror

</div>

<label for="description">Product Description:</label>

<textarea type="text" wire:model="description" class="form-control" id="taskDescription">{{{ $description ?? '' }}}</textarea>

@error('description') <span class="error">{{ $message }}</span> @enderror

</div>

</div>

<label for="description">Product Status</label><br/>

<label class="radio-inline"><input type="radio" wire:model="status" value="1" {{{ $status == '1' ? "checked" : "" }}}> Active</label>

<label class="radio-inline"><input type="radio" wire:model="status" value="0" {{{ $status == '0' ? "checked" : "" }}}> DeActive</label>

@error('status') <span class="error">{{ $message }}</span> @enderror

</div>

<label for="description">Product Stock</label>

@error('stock') <span class="error">{{ $message }}</span> @enderror

</div>

</div>

<tr>

<td>Product Name:</td>

</tr>

<tr>

<td>Product Amount:</td>

<td><strong>{{$amount}}</strong></td>

</tr>

<tr>

<td>Product status:</td>

<td><strong>{{$status ? 'Active' : 'DeActive'}}</strong></td>

</tr>

<tr>

<td>Product Description:</td>

<td><strong>{{$description}}</strong></td>

</tr>

<tr>

<td>Product Stock:</td>

<td><strong>{{$stock}}</strong></td>

</tr>

</table>

<button class="btn btn-success btn-lg pull-right" wire:click="submitForm" type="button">Finish!</button>

</div>

Step 6: Add Route For Livewire Form Wizard

After this, we need to define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.

routes/web.php

Route::get('wizard', function () {
return view('welcome');
});

Route::get('wizard', function () {

return view('welcome');

});

Step 7: Create View File

In this step we will create blade view file. Go to resources/views/ folder and open welcome.blade.php file. Then add the following code into your welcome.blade.php file:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel 8 Livewire Form Wizard From Scratch</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css">
<!-- Styles -->
<style>
html, body {
background-color: #fff;
color: #636b6f;
font-family: 'Nunito', sans-serif;
font-weight: 200;
height: 100vh;
margin: 0;
}
.full-height {
height: 100vh;
}
.flex-center {
align-items: center;
display: flex;
justify-content: center;
}
.position-ref {
position: relative;
}
.top-right {
position: absolute;
right: 10px;
top: 18px;
}
.content {
text-align: center;
}
.title {
font-size: 84px;
}
.links > a {
color: #636b6f;
padding: 0 25px;
font-size: 13px;
font-weight: 600;
letter-spacing: .1rem;
text-decoration: none;
text-transform: uppercase;
}
.m-b-md {
margin-bottom: 30px;
}
.stepwizard-step p {
margin-top: 10px;
}
.stepwizard-row {
display: table-row;
}
.stepwizard {
display: table;
width: 100%;
position: relative;
}
.stepwizard-step button[disabled] {
opacity: 1 !important;
filter: alpha(opacity=100) !important;
}
.stepwizard-row:before {
top: 14px;
bottom: 0;
position: absolute;
content: " ";
width: 100%;
height: 1px;
background-color: #ccc;
z-order: 0;
}
.stepwizard-step {
display: table-cell;
text-align: center;
position: relative;
}
.btn-circle {
width: 30px;
height: 30px;
text-align: center;
padding: 6px 0;
font-size: 12px;
line-height: 1.428571429;
border-radius: 15px;
}
.displayNone{
display: none;
}
</style>
</head>
<body>
<div class="container mt-5">
<div class="row mt-5 justify-content-center">
<div class="mt-5 col-md-8">
<div class="card">
<div class="card-header bg-success">
<h2 class="text-white">Laravel Livewire 8 Multi Step OR Form Wizard Example From Scratch</h2>
</div>
<div class="card-body">
@livewire('wizard')
</div>
</div>
</div>
</div>
</div>
@livewireScripts
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

<!DOCTYPE html>

<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>

<title>Laravel 8 Livewire Form Wizard From Scratch</title>

<style>

html, body {

background-color: #fff;

color: #636b6f;

font-family: 'Nunito', sans-serif;

font-weight: 200;

height: 100vh;

margin: 0;

}

.full-height {

height: 100vh;

}

.flex-center {

align-items: center;

display: flex;

justify-content: center;

}

.position-ref {

position: relative;

}

.top-right {

position: absolute;

right: 10px;

top: 18px;

}

.content {

text-align: center;

}

.title {

font-size: 84px;

}

.links > a {

color: #636b6f;

padding: 0 25px;

font-size: 13px;

font-weight: 600;

letter-spacing: .1rem;

text-decoration: none;

text-transform: uppercase;

}

.m-b-md {

margin-bottom: 30px;

}

.stepwizard-step p {

margin-top: 10px;

}

.stepwizard-row {

display: table-row;

}

.stepwizard {

display: table;

width: 100%;

position: relative;

}

.stepwizard-step button[disabled] {

opacity: 1 !important;

filter: alpha(opacity=100) !important;

}

.stepwizard-row:before {

top: 14px;

bottom: 0;

position: absolute;

content: " ";

width: 100%;

height: 1px;

background-color: #ccc;

z-order: 0;

}

.stepwizard-step {

display: table-cell;

text-align: center;

position: relative;

}

.btn-circle {

width: 30px;

height: 30px;

text-align: center;

padding: 6px 0;

font-size: 12px;

line-height: 1.428571429;

border-radius: 15px;

}

.displayNone{

display: none;

}

</style>

</head>

<body>

<h2 class="text-white">Laravel Livewire 8 Multi Step OR Form Wizard Example From Scratch</h2>

</div>

@livewire('wizard')

</div>

@livewireScripts

</body>

</html>

Step 8: Run Development Server

Now we are ready to run our example so lets start the development server using following artisan command –

php artisan serve

1	php artisan serve

Now, open the following URL in browser to see the output –

http://localhost:8000/wizard

1	http://localhost:8000/wizard

AngularJS

CodeIgniter

Laravel

Node Js

Wordpress

More Blog

Learn

ABOUT PAGES

Laravel 8 Livewire Form Wizard Tutorial