Laravel 10/9 Livewire Form Submit Example Tutorial

Laravel 10/9 livewire form submit. Through this tutorial, i am going to show you how to create and submit form using livewire in Laravel 10/9 apps.

Laravel 10/9 Livewire Form Submit Example Tutorial

Use the below given steps to create form and submit using livewire in Laravel 10/9 apps:

  • Step 1 – Install Laravel 10/9 Application
  • Step 2 – Database Configuration
  • Step 3 – Create Post Model & Migration
  • Step 4 – Create Routes
  • Step 5 – Installing Livewire Package
  • Step 6 – Build Livewire Components
  • Step 7 – Create Livewire Blade Views
  • Step 8 – Start Development Server
  • Step 9 – Run This App On Browser

Step 1 – Install Laravel 10/9 Application

Go to local web server directory using the following command:

//for windows user
cd xampp/htdocs

//for ubuntu user
cd var/www/html

Then install Laravel 10/9 latest application using the following command:

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

Step 2 – Configure Database with App

Go to downloaded laravel app root directory and open .env file and configure database detail like following:

DB_USERNAME=db user name
DB_PASSWORD=db password

Step 3 – Create Model & Migration

Run the following command on command prompt to create migration and model:

php artisan make:model Contact -m

The above command will create two files into your laravel livewire form example application, which is located inside the following locations:

  • /app/Models/Contact.php
  • /database/migrations/create_contacts_table.php

Visit to /app/Models directory. And open Contact.php file then add the fillable property code into Contact.php file, like following:


namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Contact extends Model
    use HasFactory;

    protected $fillable = [
        'name', 'email', 'message'

Then, find create_contacts_table.php file inside /database/migrations/ directory. Then open this file and add the following code into function up() on this file:

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

Now, open again your terminal and type the following command on cmd to create tables into your selected database:

php artisan migrate

Step 4 – Create Routes

Visit routes directory and open web.php. And add the following routes into web.php file:

use App\Http\Livewire\Contactus;

Route::get('contact-us-form', Contactus::class);

Step 5 – Installing Livewire Package

Run the following command on command prompt to install livewire package in Laravel 10/9 app:

composer require livewire/livewire

Then install node js package:

npm install

Next run npm

npm run dev

Now, run database migration command:

php artisan migrate

Step 6 – Build Livewire Components

Run the following command on command prompt to create livewire components in laravel app:

php artisan make:livewire contactus

The above command will create two files, which is located on the following locations:



So, open Contactus.php, which is located inside app/http/Livewire directory and add the following code into it:

namespace App\Http\Livewire;
use Livewire\Component;
use App\Models\Contact;
class Contactus extends Component
    public $name;
    public $email;
    public $body;
    public function submit()
        $validatedData = $this->validate([
            'name' => 'required|min:6',
            'email' => 'required|email',
            'message' => 'required',
        return redirect()->to('/contact-us-form');
    public function render()
        return view('livewire.contactus');

Next, open contactus.blade.php, which is located inside resources/views/livewire/ directory and add the following code into it:

<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 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 class="form-group">
        <label for="exampleInputbody">Message</label>
        <textarea class="form-control" id="exampleInputbody" placeholder="Enter Message" wire:model="message"></textarea>
        @error('message') <span class="text-danger">{{ $message }}</span> @enderror
    <button type="submit" class="btn btn-primary">Save Contact</button>

Step 7 – Create Blade Views

Go to resources/views/livewire directory and create home.blade.php. Then add the following code into it:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel 10/9 Livewire Contact Form Tutorial From Scratch -</title>

        <!-- Fonts -->
        <link href=",600" rel="stylesheet">

        <link rel="stylesheet" href="">

        <!-- Styles -->
            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;
    <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 10/9 Livewire Form Tutorial From Scratch -</h2>
                  <div class="card-body">

Step 8 – Start Development Server

Finally, open your command prompt again and run the following command to start development server for your simple laravel livewire form example app:

php artisan serve

Step 9 – Run This App On Browser

In step 9, open your browser and fire the following url into your browser:

Recommended Laravel Tutorials

Leave a Comment