Laravel 10 Livewire Form Submit Example

 

Livewire is a popular framework for building interactive web applications in PHP. It offers a reactive programming model, which means that changes in the user interface (UI) are automatically synchronized with the server-side application logic without the need for manual AJAX requests or page reloads. 

Step 1: Install Laravel

composer create-project laravel/laravel LivewireFormSubmitProject

Step 2: Create Migration and Model

php artisan make:migration create_contacts_table

Migration:

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

php artisan migrate

now we will create Contact model by using following command:

php artisan make:model Contact

App/Models/Contact.php

<?php
  
    namespace App\Models;
      
    use Illuminate\Database\Eloquent\Factories\HasFactory;
    use Illuminate\Database\Eloquent\Model;
      
    class Contact extends Model
    {
        use HasFactory;
      
        /**
         * Write code on Method
         *
         * @return response()
         */
        protected $fillable = [
            'name', 'email', 'body'
        ];
    }

Step 3: Install Livewire

composer require livewire/livewire

Step 4: Create Component

Now here we will create livewire component using their command. so run bellow command to create contact us form component. 

php artisan make:livewire contact-form

Now they created fies on both path:

app/Http/Livewire/ContactForm.php

 

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

app/Http/Livewire/ContactForm.php

<?php
  
    namespace App\Http\Livewire;
      
    use Livewire\Component;
    use App\Models\Contact;
      
    class ContactForm extends Component
    {
        public $name;
        public $email;
        public $body;
            
          /**
         * Write code on Method
         *
         * @return response()
         */
        public function submit()
        {
            $validatedData = $this->validate([
                'name' => 'required|min:6',
                'email' => 'required|email',
                'body' => 'required',
            ]);
      
            Contact::create($validatedData);
      
            return redirect()->to('/form');
        }
       
        /**
         * Write code on Method
         *
         * @return response()
         */
        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>

Step 5: Create Route

routes/web.php 

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

Step 6: Create View File

here, 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 

<!DOCTYPE html>
    <html>
    <head>
        <title></title>
        @livewireStyles
        <link rel="stylesheet" href="{{ asset('css/app.css') }}">
    </head>
    <body>
      
    <div class="container">
      
        <div class="card">
          <div class="card-header">
            Laravel Livewire Example - webthestuff.com
          </div>
          <div class="card-body">
            @livewire('contact-form')
          </div>
        </div>
          
    </div>
      
    </body>
    <script src="{{ asset('js/app.js') }}"></script>
    @livewireScripts
    </html>

Now you can run using bellow command:

php artisan serve

Open Browser and add URL and see output:

http://localhost:8000/form