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

laravel-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:

path
app/Http/Livewire/ContactForm.php
resources/views/livewire/contact-form.blade.php

 

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.

 

URL
http://localhost:8000/form

 

Hope it can help you to submit your livewire form.

 

author-image
Facebook Github
A web enthusiastic, a self-motivated full-stack software engineer from Dhaka, Bangladesh with experience in developing applications using Laravel , React and Vue js