In this video, we will learn about creating a contact us page in our Laravel project.

Let's see how we can create a contact us page.

First, let's create two new Livewire components.

So, switch to the command prompt and type the following command to create a new Livewire component:

php artisan make:livewire ContactComponent

Now, create another component:

php artisan make:livewire AdminContactComponent

Next, create a model:

For creating a model, just type the following command:

php artisan make:model Contact -m

Now, go to the web.php file and create a new route:

Route::get('/contact',ContactComponent::class);

Inside the Admin middleware route group, create another route:

Route::get('/admin/contact',AdminContactComponent::class)->name('admin.contact');

Now, go to the AdminContactComponent.php class file and add the following code:

<?php
namespace AppHttpLivewireAdmin;
use AppModelsContact;
use LivewireComponent;
class AdminContactComponent extends Component
{
    public function render()
    {
        $contacts = Contact::paginate(15);
        return view('livewire.admin.admin-contact-component',['contacts' => $contacts])->layout('layouts.base');
    }
}

Next, open the admin-contact-component.blade.php file and write the following code:

<div>
    <style>
        nav svg{
            height: 20px;
        }
        nav .hidden{
            display: block !important;
        }
    </style>
    <div class=`section-title-01 honmob`>
        <div class=`bg_parallax image_02_parallax`></div>
        <div class=`opacy_bg_02`>
            <div class=`container`>
                <h1>Contacts</h1>
                <div class=`crumbs`>
                    <ul>
                        <li><a href=`/`>Home</a></li>
                        <li>/</li>
                        <li>Contacts</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <section class=`content-central`>
        <div class=`content_info`>
            <div class=`paddings-mini`>
                <div class=`container`>
                    <div class=`row portfolioContainer`>
                        <div class=`col-md-12 profile1`>
                            <div class=`panel panel-default`>
                                <div class=`panel-heading`>
                                    <div class=`row`>
                                        <div class=`col-md-6`>
                                            All Contacts
                                        </div>
                                        <div class=`col-md-6`>
                                            
                                        </div>
                                    </div>
                                </div>
                                <div class=`panel-body`>
                                    @if(Session::has('message'))
                                        <div class=`alert alert-success` role=`alert`>{{Session::get('message')}}</div>
                                    @endif
                                    <table class=`table table-striped`>
                                        <thead>
                                            <tr>
                                                <th>#</th>
                                                <th>Name</th>
                                                <th>Email</th>
                                                <th>Phone</th>
                                                <th>Message</th>
                                                <th>Created At</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach($contacts as $contact)
                                                <tr>
                                                    <td>{{$contact->id}}</td>                                                    
                                                    <td>{{$contact->name}}</td>
                                                    <td>{{$contact->email}}</td>
                                                    <td>{{$contact->phone}}</td>
                                                    <td>{{$contact->message}}</td>
                                                    <td>{{$contact->created_at}}</td>                                                                                
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                    {{$contacts->links()}}
                                </div>
                            </div>                            
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

Now, open the ContactComponent.php class file and write the following code:

<?php
namespace AppHttpLivewire;
use AppModelsContact;
use LivewireComponent;
class ContactComponent extends Component
{
    public $name;
    public $email;
    public $phone;
    public $message;
    public function updated($fields)
    {
        $this->validateOnly($fields,[
            'name' => 'required',
            'email' => 'required|email',
            'phone' => 'required',
            'message' => 'required'
        ]);
    }
    public function sendMessage()
    {
        $this->validate([
            'name' => 'required',
            'email' => 'required|email',
            'phone' => 'required',
            'message' => 'required'
        ]);
        $contact = new Contact();
        $contact->name = $this->name;
        $contact->email = $this->email;
        $contact->phone = $this->phone;
        $contact->message = $this->message;
        $contact->save();
        session()->flash('message','Your message has been submitted successfully!');
    }
    public function render()
    {
        return view('livewire.contact-component')->layout('layouts.base');
    }
}

Open the contact-component.blade.php view file and add the following code:

<div>
    <div class=`section-title-01 honmob`>
        <div class=`bg_parallax image_02_parallax`></div>
        <div class=`opacy_bg_02`>
            <div class=`container`>
                <h1>Contact Us</h1>
                <div class=`crumbs`>
                    <ul>
                        <li><a href=`/`>Home</a></li>
                        <li>/</li>
                        <li>Contact Us</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class=`content-central`>
        <div class=`semiboxshadow text-center`>
            <img src=`img/img-theme/shp.png` class=`img-responsive` alt=``>
        </div>
        <div id=`map` class=`honmob`> </div>
        <div class=`content_info`>
            <div class=`paddings-mini`>
                <div class=`container`>
                    <div class=`row`>
                        <div class=`col-md-4`>
                            <aside>
                                <h4>The Office</h4>
                                <address>
                                    <strong>SurfsideMedia Home Services.</strong><br>
                                    <i class=`fa fa-map-marker`></i><strong>Address: </strong>Faridabad, Haryana,
                                    India<br>
                                    <i class=`fa fa-phone`></i><strong>Phone: </strong> +91-1234567890
                                </address>
                                <address>
                                    <strong>SurfsideMedia Emails</strong><br>
                                    <i class=`fa fa-envelope`></i><strong>Email:</strong><a
                                        href=`mailto:contact@surfsidemedia.in`> contact@surfsidemedia.in</a><br>
                                    <i class=`fa fa-envelope`></i><strong>Email:</strong><a
                                        href=`mailto:support@surfsidemedia.in`> support@surfsidemedia.in</a>
                                </address>
                            </aside>
                            <hr class=`tall`>
                        </div>
                        <div class=`col-md-8`>
                            <h3>Contact Form</h3>
                            <p class=`lead`>
                            </p>
                            @if(Session::has('message'))
                                <div class=`alert alert-success` role=`alert`>{{Session::get('message')}}</div>
                            @endif
                            <form id=`contactform` class=`form-theme` method=`post` wire:submit.prevent=`sendMessage`>                                
                                <input type=`text` placeholder=`Name` name=`name` id=`name` wire:model=`name` required=``>
                                @error('name') <p class=`text-danger`>{{$message}}</p> @enderror
                                <input type=`email` placeholder=`Email` name=`email` id=`email` wire:model=`email` required=``>
                                @error('email') <p class=`text-danger`>{{$message}}</p> @enderror
                                <input type=`text` placeholder=`Phone` name=`phone` id=`phone` wire:model=`phone` required=``>    
                                @error('phone') <p class=`text-danger`>{{$message}}</p> @enderror                            
                                <textarea placeholder=`Your Message` name=`message` id=`message` wire:model=`message` required=``></textarea>
                                @error('message') <p class=`text-danger`>{{$message}}</p> @enderror
                                <input type=`submit` name=`Submit` value=`Send Message` class=`btn btn-primary`>
                            </form>
                            <div id=`result`></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class=`section-twitter content_resalt border-top`>
            <i class=`fa fa-twitter icon-big`></i>
            <div class=`container`>
                <div class=`row`>
                    <div class=`col-md-12`>
                        <div class=`text-center`>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Now, go to the base.blade.php layout file and add a contact link in the footer:

<li><a href=`{{route('home.contact')}}`>Contact Us</a></li>

Also, add the link inside the admin menu:

<li><a href=`{{route('admin.contacts')}}`>All Contacts</a></li>   

Now, it's done. Let's check the result.

Switch to the browser and refresh the page.

Enter your name, email, phone number, and comments.

Now, click on submit, and you will see a message saying `Message sent successfully`.

Go to the admin menu, and you can see a link to the contact us messages.

Click on it, and you can see the messages.

So, in this way, you can create a contact us page.