Contact Form Component Laravel Livewire

Bootstrap 5 New Livewire

Demo

Let us hear from you directly!

Use this form to request a new component, submit your component ( provide github url ) or just say Hi !

This is a free component. Login to your account to view / download the component code.

Component Class


<?php

namespace App\Http\Livewire;

use App\Mail\ContactMail;
use Livewire\Component;
use Illuminate\Support\Facades\Mail;

class ContactComponent extends Component
{
    public string $contactName = '';
    public string $contactEmail = '';
    public string $contactMessage = '';

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

    protected $rules = [
        'contactName' => 'required|min:6',
        'contactEmail' => 'required|email',
        'contactMessage' => 'required'
    ];

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

        try{
            Mail::to('email@example.com')->send(new ContactMail($this->contactName, $this->contactEmail, $this->contactMessage));
        }catch(\Exception $e){
            session()->flash('error', 'Oops ! Something went wrong');
            return;
        }

        session()->flash('success', 'Your message is in our inbox, A human will get back to you.');

        $this->reset();
    }
}

Component View File


<div class="py-5">
    <div class="container">
            <div class="row justify-content-center">
                <div class="col-12 col-md-10 col-lg-8 text-center">

                    <!-- Heading -->
                    <h2 class="fw-bold blue-heading">
                    Let us hear from you directly!
                    </h2>

                    <!-- Text -->
                    <p class="fs-lg text-muted mb-5">
                    Use this form to request a new component, submit your component ( provide github url ) or just say Hi !
                    </p>

                </div>
            </div> <!-- / .row -->
            <div class="row justify-content-md-center">
                <div class="col-8">
                    @if (session()->has('success'))
                        <div class="alert alert-success">
                            {{ session('success') }}
                        </div>
                    @endif
                    @if (session()->has('error'))
                        <div class="alert alert-danger">
                            {{ session('error') }}
                        </div>
                    @endif
                </div>
            </div> <!-- /row>
            <div class="row justify-content-center">
            <div class="col-12 col-md-12 col-lg-10">

                Form -->
                <form wire:submit.prevent="submit">
                <div class="row justify-content-md-center">
                    <div class="col-12 col-md-6">
                    <div class="form-group mb-3">
                        <!-- Label -->
                        <label class="form-label" for="contactName">
                        Full name
                        </label>
                        <!-- Input -->
                        <input class="form-control @error('contactName') is-invalid @enderror" id="contactName" type="text" placeholder="Full name" wire:model.lazy="contactName">
                        @error('contactName')
                            <div id="invalidcontactNameFeedback" class="invalid-feedback">
                                {{ $message }}
                            </div>
                        @enderror

                    </div>
                    </div>
                    <div class="col-12 col-md-6">
                    <div class="form-group mb-3">
                        <!-- Label -->
                        <label class="form-label" for="contactEmail">Email</label>
                        <!-- Input -->
                        <input class="form-control @error('contactEmail') is-invalid @enderror" id="contactEmail" type="email" placeholder="hello@domain.com" wire:model.lazy="contactEmail">
                        @error('contactEmail')
                            <div id="invalidcontactNameFeedback" class="invalid-feedback">
                                {{ $message }}
                            </div>
                        @enderror
                    </div>
                    </div>
                </div> <!-- / .row -->
                <div class="row">
                    <div class="col-12">
                    <div class="form-group mb-5">
                        <!-- Label -->
                        <label class="form-label" for="contactMessage">What can we help you with?</label>
                        <!-- Input -->
                        <textarea class="form-control @error('contactMessage') is-invalid @enderror" id="contactMessage" rows="5" placeholder="Tell us what we can help you with!" spellcheck="false" data-gramm="false" wire:model.lazy="contactMessage"></textarea>
                        @error('contactMessage')
                            <div id="invalidcontactNameFeedback" class="invalid-feedback">
                                {{ $message }}
                            </div>
                        @enderror
                    </div>
                    </div>
                </div> <!-- / .row -->
                <div class="row justify-content-center">
                    <div class="col-auto">
                    <!-- Submit -->
                    <button type="submit" class="btn btn-primary text-white lift">
                        Send message
                    </button>
                    </div>
                </div> <!-- / .row -->
                </form>

            </div>
            </div> <!-- / .row -->
    </div>
<div>

Usage


@livewire('contact-component')

Documentation

This contact component let users fill the contact form and when the form is submitted it sends an email to the recipient along with all the contact information.

The Class component contains three fields to store name, email and the contact message. Once the form is filled and submitted. Fields are validated using the the livewires inbuilt rules property.

Once validation succeeds, Mail::send function is used to send an email to the admin.

ContactMail Mail class is used to send the email to the user


<?php

namespace App\Mail;

use Illuminate\Bus\Queueable;
use Illuminate\Contracts\Queue\ShouldQueue;
use Illuminate\Mail\Mailable;
use Illuminate\Queue\SerializesModels;

class ContactMail extends Mailable
{
    use Queueable, SerializesModels;

    protected $contactName;
    protected $contactEmail;
    protected $contactMessage;

    /**
     * Create a new message instance.
     *
     * @return void
     */
    public function __construct($contactName, $contactEmail, $contactMessage)
    {
        $this->contactName = $contactName;
        $this->contactEmail = $contactEmail;
        $this->contactMessage = $contactMessage;
    }

    /**
     * Build the message.
     *
     * @return $this
     */
    public function build()
    {
        return $this->view('emails.contactmail')
                    ->subject('LiveWireDemos Contact Mail')
                    ->with([
                        'contactName' => $this->contactName,
                        'contactEmail' => $this->contactEmail,
                        'contactMessage' => $this->contactMessage,
                    ]);
    }
}

This inturn sends the content of blade file contactmail which is in the emails directory


Contact from enquery from: {{ $contactName }}

Name: {{ $contactName }}

Email: {{ $contactEmail }}

Message: {{ $contactMessage }}

That's how easy it is to implement a contact component using livewire.

Download Code

Download the Component class, view file and other required files

Please login to download the component code