In this video we are going to learn about Create Contact Us Page.
So let see how can we create contact us page.
First of all lets create two new livewire component.
So switch to the command prompt and for creating new livewire component just type the command.

php artisan make:livewire ContactComponent

Now create another component.

php artisan make:livewire AdminContactComponent

Now create a model.
For creating model just type command.

php artisan make:model Contact -m

So go to the web.php file and here lets create new route.

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

Now inside the Admin middleware route group.
Here lets create the route.

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

Now go to the AdminContactCoomponent.php class file and here lets add the following code.

<?php

namespace App\\Http\\Livewire\\Admin;

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

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


Now lets 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 lets open ContactCompoent.php class and write the following code.

<?php

namespace App\\Http\\Livewire;

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

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');
}
}



Now open the contact-component.blade.php view file and here lets 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 balse.blade.php layout file and on footer add the contact link.

<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 its done so lets check it.
So switch to the browser and refresh the page.
Now enter the name, email phone and comments.
Now click on submit and here you see message sent successfully.

Now go to the admin menu and you can see her link contact us message.
Now click on it.
and here you can see the messages.
So in this way you can Create Contact Page.