Laravel 8 Livewire Form Submit Example Tutorial

Hello Artisan 

In this tutorial, I am going to discuss laravel livewire form submit example. I will create a simple contact form and then i will submit it and save it into the database. To submit contact form i will use laravel livewire package.

In this tutorial i am going to show you laravel livewire form example. I’m going to show you how to create a form with laravel livewire. let’s discuss laravel livewire tutorial example. you will learn how to install laravel livewire to laravel.

In this laravel 8 livewire example, we will create a simple form using laravel livewire. you can use laravel livewire with laravel 7 and laravel 8 version. We will save data without page refreshing using Laravel livewire.

Livewire is a full-stack framework for Laravel that makes building dynamic interfaces simple, without leaving the comfort of Laravel. It is a front-end framework. After learning it you will just say "Say hello to Livewire".

In this laravel livewire form example, I will give you a very simple example to create a contact form with name and email and I will store that data in the database without refresh page and too many lines of code in the blade file. we will use only livewire/livewire package to do it.

Preview Form of Livewire Form Submit Example

Step 1 : Install Laravel 8

Now we have to download Laravel 8 version application using bellow command, So open your terminal OR command prompt and run bellow command:

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

Step 2 : Create Model

Since we have to submit a form, so we need to create a form. Let's we need a model. Let's make a model for laravel livewire form submit example.

php artisan make:model Contact -m

contact_table

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateContactsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('contacts', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('email');
            $table->text('body');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('contacts');
    }
}

Now open Contact model and paste this below code.

App/Contact.php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Contact extends Model
{
    protected $fillable = [
        'name', 
        'email', 
        'body',
    ];
}

Read also: Laravel Livewire | Laravel Livewire CRUD Tutorial

Step 3: Install Livewire

After doing above step now in this step, we will simply install livewire to our laravel 7 application using bellow command:

composer require livewire/livewire

Step 4: Create Component

Now in this step we need to create livewire component using their command. so run bellow command to create contact us livewire form component.

php artisan make:livewire contact-form

Now they created fies on both path:

Now update ContactForm as stated below

app/Http/Livewire/ContactForm.php

namespace App\Http\Livewire;

use App\Contact;
use Livewire\Component;

class ContactForm extends Component
{   
	public $name;
    public $email;
    public $body;
  
    public function submit()
    {
        $data = $this->validate([
            'name' => 'required|min:6',
            'email' => 'required|email',
            'body' => 'required',
        ]);
  
        Contact::create($data);
  
        return redirect()->to('/form');
    }

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

Now update contact-form as stated below

resources/views/livewire/contact-form.blade.php

Read also : Laravel 7.x Livewire Example - Run PHP Code Like JavaScipt

Step 5: Create Route

In this step we will create one route for calling our example, so let's add new route to web.php file as bellow:

routes/web.php

Route::get('/form', function () {
    return view('form');
});

Step 6: Create View 

In the final step, we will create blade file for call form route. in this file we will use @livewireStyles, @livewireScripts and @livewire('contact-form'). so let's add it.

resources/views/form.blade.php

Now all are set to go, just open the below url to check laravel livewire form submit example.

Hope it can help you to submit your livewire form.