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