How to Build a Laravel Livewire Contact Form

Laravel Livewire makes it easy to build interactive, reactive components, like a contact form without writing any JavaScript. Livewire handles the form submission, validation, and error display through simple PHP code inside a component class.

In this guide, we will walk through how to build a Laravel Livewire contact form step by step. You will install Livewire, generate a component, build the form view, add validation logic, and connect everything to a route so you can test it in your browser.

Prerequisites

Before starting, make sure you already have a working Laravel project set up. If you haven’t created one yet, follow a guide on how to create a Laravel project first. You will also need Composer installed, since Livewire is added to your project as a Composer package.

Step 1: Install Livewire

Open your terminal, navigate into your Laravel project folder, and run the following Composer command to install Livewire:

composer require livewire/livewire

This downloads the Livewire package and registers it with your application, giving you access to the artisan commands used to generate components.

Step 2: Create the Livewire Component

Next, generate a new Livewire component for the contact form using Artisan:

php artisan make:livewire ContactForm

This command creates two files: app/Livewire/ContactForm.php, which holds the component’s logic, and resources/views/livewire/contact-form.blade.php, which holds the component’s markup.

Step 3: Build the Contact Form View

Open resources/views/livewire/contact-form.blade.php and add the form fields. Use wire:model to bind each input to a property on the component, and wire:submit to call the submit method when the form is submitted:

<div>
    <h2>Contact Us</h2>

    @if (session()->has('success'))
        <p>{{ session('success') }}</p>
    @endif

    <form wire:submit="submit">
        <div>
            <label>Name</label>
            <input type="text" wire:model="name" placeholder="Enter your name">
            @error('name') <span>{{ $message }}</span> @enderror
        </div>

        <div>
            <label>Email</label>
            <input type="email" wire:model="email" placeholder="Enter your email">
            @error('email') <span>{{ $message }}</span> @enderror
        </div>

        <div>
            <label>Message</label>
            <textarea wire:model="message" placeholder="Enter your message"></textarea>
            @error('message') <span>{{ $message }}</span> @enderror
        </div>

        <button type="submit">Send Message</button>
    </form>
</div>

The wire:model directives connect the Name, Email, and Message fields to properties in the Livewire component, and wire:submit=”submit” connects the form submission to the submit() method. The @error directives display validation messages automatically when a field fails validation.

Step 4: Set Up the Contact Form Component Class

Open app/Livewire/ContactForm.php and define the properties, validation rules, and the submit method:

<?php

namespace App\Livewire;

use Livewire\Component;

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

    protected $rules = [
        'name'    => 'required|min:3',
        'email'   => 'required|email',
        'message' => 'required|min:10',
    ];

    public function submit()
    {
        $this->validate();

        // Save to database, send an email, etc.

        session()->flash('success', 'Your message has been sent!');

        $this->reset(['name', 'email', 'message']);
    }

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

The $name, $email, and $message properties store the values entered by the visitor. The $rules array tells Livewire how to validate each field, and calling $this->validate() inside submit() checks the data automatically and displays errors next to the relevant fields if anything fails.

Step 5: Add the Component to a Page

Create or edit a Blade view, for example resources/views/contact.blade.php, and drop in the component using its tag syntax:

<x-app-layout>
    <livewire:contact-form />
</x-app-layout>

Then register a route for the page in routes/web.php:

<?php

use Illuminate\Support\Facades\Route;

Route::view('/contact', 'contact');

Step 6: Run the App

Start your Laravel development server:

php artisan serve

Then open the following URL in your browser to see your contact form in action:

http://127.0.0.1:8000/contact

Conclusion

Building a contact form with Laravel Livewire is a great way to see how Livewire eliminates repetitive JavaScript for common form-handling tasks. Once you understand how wire:model, wire:submit, and validation rules work together, you can apply the same pattern to build login forms, comment sections, search bars, and other interactive components entirely in PHP.

Related Questions

What is Laravel Livewire?

Livewire is a full-stack framework for Laravel that lets you build dynamic, reactive interfaces using mostly PHP, without writing much JavaScript. It updates parts of the page through background requests instead of full page reloads.

Do I need to know JavaScript to use Livewire?

Not really. Livewire is designed so most interactivity, including form handling and validation, can be built with PHP alone, though small amounts of JavaScript can still be added for extra polish.

How does Livewire validate contact form input?

Livewire uses Laravel’s existing validation rules directly inside the component class, and automatically displays validation errors next to the relevant fields without a full page reload.

Can I add Livewire to an existing Laravel project?

Yes. Livewire installs as a Composer package and can be added to any existing Laravel project without restructuring your current code.

Is Livewire a replacement for Vue or React?

Not exactly. Livewire is best suited for simpler, server-driven interactivity like contact forms, while Vue or React may be a better fit for highly complex, client-heavy interfaces.