Laravel Home Services Project - Create Contact Us Page
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.