Laravel 11 Livewire 3 wire:submit - Form Submit Event

Websolutionstuff | Mar-20-2025 | Categories : Laravel

In this tutorial, I will guide you on how to handle form submission in Laravel 11 using Livewire 3. With Livewire 3, you can easily handle form submissions without writing any JavaScript code.

The wire:submit directive allows you to capture form submission events and process the data directly in your Livewire component.

By the end of this tutorial, you will be able to:

Create a form using Livewire 3.
Handle form submission using the wire:submit event.
Process form data and show the output.

Let’s get started.

Laravel 11 Livewire 3 Form Submit Event: Handle Form Submission

Step 1: Install Laravel 11

If you have not installed Laravel 11 yet, you can do so using the following command:

composer create-project laravel/laravel laravel11-app

Step 2: Install Livewire 3

Now install Livewire 3 using composer:

composer require livewire/livewire

Step 3: Create Livewire Component

Now, create a Livewire component to handle the form:

php artisan make:livewire ContactForm

This command will generate two files:

app/Livewire/ContactForm.php (for logic)
resources/views/livewire/contact-form.blade.php (for form UI)

Step 4: Update Livewire Component Logic

Open the file app/Livewire/ContactForm.php and update it like this:

app/Livewire/ContactForm.php

<?php

namespace App\Livewire;

use App\Models\Contact;
use Livewire\Component;

class ContactForm extends Component
{
    public $name;
    public $email;
    public $message;

    public function submitForm()
    {
        // Here you can process the form data like saving to database
        $this->validate([
            'name' => 'required',
            'email' => 'required|email',
            'message' => 'required|min:10',
        ]);

        Contact::create([
           'name' => $this->name,
           'email' => $this->email,
           'message' => $this->message,
        ]);

        // Display the success message
        session()->flash('success', 'Form submitted successfully.');
    }

    public function render()
    {
        return view('livewire.contact-form');
    }
}

In the above code:

We defined three properties $name, $email, and $message.
The submitForm() method will be called when the form is submitted.
The validate() method is used to validate the form input.
We are displaying a success message using session()->flash()

Step 5: Create Form Blade File

Open the file resources/views/livewire/contact-form.blade.php and update it like this:

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

<div>
    @if (session()->has('success'))
        <div style="color: green;">
            {{ session('success') }}
        </div>
    @endif

    <form wire:submit.prevent="submitForm">
        <div>
            <label>Name:</label>
            <input type="text" wire:model="name">
            @error('name') <span style="color: red;">{{ $message }}</span> @enderror
        </div>

        <div>
            <label>Email:</label>
            <input type="email" wire:model="email">
            @error('email') <span style="color: red;">{{ $message }}</span> @enderror
        </div>

        <div>
            <label>Message:</label>
            <textarea wire:model="message"></textarea>
            @error('message') <span style="color: red;">{{ $message }}</span> @enderror
        </div>

        <button type="submit">Submit</button>
    </form>
</div>

In the above code:

We used the wire:submit.prevent="submitForm" directive to handle form submission without page reload.
The wire:model directive is used to bind the form input values to the component properties.
The @error directive is used to display validation errors

Step 6: Add Livewire Component to Blade View

Now include the Livewire component in your main Blade file:

resources/views/welcome.blade.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Livewire Form Submit</title>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    @livewireStyles
</head>
<body>

    <livewire:contact-form />

    @livewireScripts
</body>
</html>

Step 7: Run the Project

Now run your project using the command: