Laravel 7.x Livewire Form Submit Example Tutorial

Hello Artisan 

In this tutorial, I am going to discuss laravel 7 livewire form submit example. I will create a simple contact form and then I will submit it and save it into the database with laravel livewire without page refresh. To submit the contact form I will use laravel livewire package. Let's start livewire forms tutorial:


Table of Contents
1. Download Laravel App
2. Create Migration and Model
3. Install Livewire package
4. Create livewire component
5. Create route
6. Create Blade View
7. Run Project


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



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) {

     * Reverse the migrations.
     * @return void
    public function down()


Now open Contact model and paste this below code.


namespace App;

use Illuminate\Database\Eloquent\Model;

class Contact extends Model
    protected $fillable = [


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


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',
        return redirect()->to('/form');

    public function render()
        return view('');


Now update contact-form as stated below



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:


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.



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.


#laravel #laravel-livewire