Laravel 9 Livewire Wizard Multi Step Form Submit Example

Hello Artisan,

In this laravel livewire multi step form example, I will show you how to create multi step form submit example in Laravel livewire. You know that sometimes we need laravel multi step form wizard to submit our data. We can use it like multi step registration or checkout page.

So I am here to show you the example of Laravel 9 livewire wizard multi step form tutorial.SO if you don't know Laravel livewire wizard then this example is for you. Here, I will give you a very simple example of multi-step using bootstrap wizard design. I will create a products table and create a new record with multi step form then we will submit.

Step 1 : Install Laravel

I am going to start from scratch. So download a fresh Laravel project using the below command:

composer create-project laravel/laravel example-app

Step 2 : Create Migration and Model

Here, we need to create database migration for the products table, and also we will create a model for the products table.

php artisan make:model Product -m

Now update table like:

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
  
class CreateProductcTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    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();
        });
    }
  
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('products');
    }
}

And update the model like:

App/Models/Product.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'
    ];
}

Read also: Laravel 9 Scout Full Text Search Example with Database Driver

Step 3: Install Livewire

Now in this step, we will simply install livewire to our laravel application using the below command:

composer require livewire/livewire

Step 4: Create Livewire Component

Now here we will create a livewire component using their command. so run the below command to create and add more components.

php artisan make:livewire wizard

Now they created files on both paths:

Now both files we will update as below for our contact us form.

app/Http/Livewire/Wizard.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 update the view file:

resources/views/livewire/wizard.blade.php

Step 5: Add  Route

Now we will create one route for calling our example, so let's add a new route to the web.php file as below:

routes/web.php

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

Step 6: Create View File

here, we will create a blade file for the call form route. in this file, we will use @livewireStyles, @livewireScripts, and @livewire('wizard'). so let's add them.

resources/views/default.blade.php

Read also: Laravel 9 Livewire Datatables Example Step by Step

Now visit http://localhost:8000/wizard & you can test. Hope it can help you.