Laravel Livewire Form Tutorial

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

In this laravel livewire form tutorial, I’ll show you how to install and use laravel liveware package in your laravel application. In this tutorial you will learn to install, setup and use laravel livewire form. In this article I will guide you through how to submit and store form data using the laravel livewire form package in laravel.

Table Of Contents−

Laravel Livewire Form Tutorial

Step 1: Install Laravel
Step 2: Add Database Detail

Step 3: Generate Migration and Model by Command
Step 4: Install Livewire
Step 5: Create Component

Step 6: Create Route
Step 7: Create View File
Step 8: Run Development Server

Step 1: Install Laravel

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

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

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

Step 2: Add Database Detail

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: Generate Model and Migration By Command

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

php artisan make:model Contact-m

1	php artisan make:model Contact-m

The above command will create a model name Contact and also create a migration file for Contact table. After successfully run the command go to database/migrations file and put the below here :

<?php
   
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
   
class CreateContactsUsForms extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('contacts', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('name');
            $table->string('email');
            $table->text('body');
            $table->timestamps();
        });
    }
   
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('contacts');
    }
}

<?php

use Illuminate\Database\Migrations\Migration;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Support\Facades\Schema;

class CreateContactsUsForms extends Migration

{

/**

* Run the migrations.

* @return void

public function up()

{

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

$table->bigIncrements('id');

$table->string('name');

$table->string('email');

$table->text('body');

$table->timestamps();

});

}

/**

* Reverse the migrations.

* @return void

public function down()

{

Schema::dropIfExists('contacts');

}

now go to app\Providers\AppServiceProvider.php and put the below code here :

 use Illuminate\Support\Facades\Schema;
  
 public function boot()
 {
     Schema::defaultStringLength(191);
 }

use Illuminate\Support\Facades\Schema;

public function boot()

{

Schema::defaultStringLength(191);

}

Now run the following command to create the table into your database:

php artisan migrate

1	php artisan migrate

Next, Open App/Contact.php file and add the fillable properties:

<?php
   
namespace App;
   
use Illuminate\Database\Eloquent\Model;
   
class Contact extends Model
{
     /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    protected $fillable = [
        'name', 'email', 'body',
    ];
}

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Contact extends Model

{

/**

* The attributes that are mass assignable.

* @var array

protected $fillable = [

'name', 'email', 'body',

];

}

Step 4: Install Livewire

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 Component

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

php artisan make:livewire contact-form

1	php artisan make:livewire contact-form

You can see a created file on the following path:

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

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

Now, put the following code into your files, so follow the given path and update the code:

app/Http/Livewire/ContactForm.php

<?php
   
namespace App\Http\Livewire;
   
use Livewire\Component;
use App\Contact;
   
class ContactForm extends Component
{
    public $name;
    public $email;
    public $body;
   
    public function submit()
    {
        $validatedData = $this->validate([
            'name' => 'required|min:6',
            'email' => 'required|email',
            'body' => 'required',
        ]);
   
        Contact::create($validatedData);
   
        return redirect()->to('/form');
    }
   
    public function render()
    {
        return view('livewire.contact-form');
    }
}

<?php

namespace App\Http\Livewire;

use Livewire\Component;

use App\Contact;

class ContactForm extends Component

{

public $name;

public $email;

public $body;

public function submit()

{

$validatedData = $this->validate([

'name' => 'required|min:6',

'email' => 'required|email',

'body' => 'required',

]);

Contact::create($validatedData);

return redirect()->to('/form');

}

public function render()

{

return view('livewire.contact-form');

}

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

<form wire:submit.prevent="submit">
    <div class="form-group">
        <label for="exampleInputName">Name</label>
        <input type="text" class="form-control" id="exampleInputName" placeholder="Enter name" wire:model="name">
        @error('name') <span class="text-danger">{{ $message }}</span> @enderror
    </div>
   
    <div class="form-group">
        <label for="exampleInputEmail">Email</label>
        <input type="text" class="form-control" id="exampleInputEmail" placeholder="Enter name" wire:model="email">
        @error('email') <span class="text-danger">{{ $message }}</span> @enderror
    </div>
   
    <div class="form-group">
        <label for="exampleInputbody">Body</label>
        <textarea class="form-control" id="exampleInputbody" placeholder="Enter Body" wire:model="body"></textarea>
        @error('body') <span class="text-danger">{{ $message }}</span> @enderror
    </div>
   
    <button type="submit" class="btn btn-primary">Save Contact</button>
</form>

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

</div>

<label for="exampleInputEmail">Email</label>

@error('email') <span class="text-danger">{{ $message }}</span> @enderror

</div>

@error('body') <span class="text-danger">{{ $message }}</span> @enderror

</div>

<button type="submit" class="btn btn-primary">Save Contact</button>

</form>

Step 6: Create Route

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('/form', function () {
    return view('form');
});

Route::get('/form', function () {

return view('form');

});

Step 7: Create View File

In this step, we will create a blade files that name form.blade.php file inside resources/views/ folder and put the following code into your file:

resources/views/form.blade.php

<!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 Livewire Contact Form Tutorial 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;
            }
        </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 Form Tutorial From Scratch</h2>
                  </div>
                  <div class="card-body">
                    @livewire('contact-form')
                  </div>
                </div>
            </div>
        </div>
    </div>
    @livewireScripts
</body>
</html>

<!DOCTYPE html>

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

<head>

<title>Laravel Livewire Contact Form Tutorial 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;

}

</style>

</head>

<body>

<h2 class="text-white">Laravel Livewire Form Tutorial From Scratch</h2>

</div>

@livewire('contact-form')

</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/form

1	http://localhost:8000/form

AngularJS

CodeIgniter

Laravel

Node Js

Wordpress

More Blog

Learn

ABOUT PAGES

Laravel Livewire Form Tutorial