A Complete Guide For Creating Contact Form In Laravel 5.8
6 min readJul 21, 2021
In this tutorial i’m going to learn how to create working contact form in laravel in easy steps, please follow all steps mentioned below.
Step 1: Install Laravel 5.8
composer create-project — prefer-dist laravel/laravel contact “5.8.*”
2nd go to .env folder and put database name as :- contact
First to create migrate and model and controller please run below command
php artisan make:model Contact -m
Next go to your migration and put below code
<?php
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreateContactsTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('contacts', function (Blueprint $table) {
$table->bigIncrements('id');
$table->string('name');
$table->string('email');
$table->string('address');
$table->string('state');
$table->string('city');
$table->string('phone');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('contacts');
}
}Now migrate the table
Next go to contact model Contact.php and paste this code 👇
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Contact extends Model
{
protected $fillable = [
'name',
'email',
'address',
'state',
'city',
'phone'
];
}Next create controller
Php artisan make:controller ContactController -rGo to ContactController and paste below code in ContactController.php
Paste this code
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Contact;
class ContactController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
return view('contact');
}
/**
* Show the form for creating a new resource.
*
* @return \Illuminate\Http\Response
*/
public function create()
{
//
}
/**
* Store a newly created resource in storage.
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
public function store(Request $request)
{
$request->validate([
'name'=> 'required',
'email'=> 'required',
'address'=> 'required',
'state' => 'required',
'city' => 'required',
'phone'=> 'required'
]);
$form_data = array(
'name' =>$request->name,
'email'=>$request->email,
'address'=>$request->address,
'state'=>$request->state,
'city'=>$request->city,
'phone'=>$request->phone
);
Contact::create($form_data);
return redirect('thanks', 'Request has been sent successfully');
}
/**
* Display the specified resource.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function show($id)
{
//
}
/**
* Show the form for editing the specified resource.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function edit($id)
{
//
}
/**
* Update the specified resource in storage.
*
* @param \Illuminate\Http\Request $request
* @param int $id
* @return \Illuminate\Http\Response
*/
public function update(Request $request, $id)
{
//
}
/**
* Remove the specified resource from storage.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function destroy($id)
{
//
}
}Next go to your route/web.php and paste below code
<?php
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('/', function () {
return view('welcome');
});
Route::get('contact','ContactController@index');
Route::post('contact','ContactController@store')->name('store');Let’s create view page Resources/views/contact.blade.php
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
section {
padding: 60px 0;
min-height: 100vh;
}
.contact-info {
display: inline-block;
width: 100%;
text-align: center;
margin-bottom: 10px;
}
.contact-info-icon {
margin-bottom: 15px;
}
.contact-info-item {
background: #071c34;
padding: 30px 0px;
}
.contact-page-sec .contact-page-form h2 {
color: #071c34;
text-transform: capitalize;
font-size: 22px;
font-weight: 700;
}
.contact-page-form .col-md-6.col-sm-6.col-xs-12 {
padding-left: 0;
}
.contact-page-form.contact-form input {
margin-bottom: 5px;
}
.contact-page-form.contact-form textarea {
height: 110px;
}
.contact-page-form.contact-form input[type="submit"] {
background: #071c34;
width: 150px;
border-color: #071c34;
}
.contact-info-icon i {
font-size: 48px;
color: #fda40b;
}
.contact-info-text p{margin-bottom:0px;}
.contact-info-text h2 {
color: #fff;
font-size: 22px;
text-transform: capitalize;
font-weight: 600;
margin-bottom: 10px;
}
.contact-info-text span {
color: #999999;
font-size: 16px;
font-weight: ;
display: inline-block;
width: 100%;
}
.contact-page-form input {
background: #f9f9f9 none repeat scroll 0 0;
border: 1px solid #f9f9f9;
margin-bottom: 20px;
padding: 12px 16px;
width: 100%;
border-radius: 4px;
}
.contact-page-form .message-input {
display: inline-block;
width: 100%;
padding-left: 0;
}
.single-input-field textarea {
background: #f9f9f9 none repeat scroll 0 0;
border: 1px solid #f9f9f9;
width: 100%;
height: 120px;
padding: 12px 16px;
border-radius: 4px;
}
.single-input-fieldsbtn input[type="submit"] {
background: #fda40b none repeat scroll 0 0;
color: #fff;
display: inline-block;
font-weight: 600;
padding: 10px 0;
text-transform: capitalize;
width: 150px;
margin-top: 20px;
font-size: 16px;
}
.single-input-fieldsbtn input[type="submit"]:hover{background:#071c34;transition: all 0.4s ease-in-out 0s;border-color:#071c34}
.single-input-field h4 {
color: #464646;
text-transform: capitalize;
font-size: 14px;
}
.contact-page-form {
display: inline-block;
width: 100%;
margin-top: 30px;
}
.contact-page-map {
margin-top: 36px;
}
.contact-page-form form {
padding: 20px 15px 0;
}
</style>
<section class="contact-page-sec">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="contact-info">
<div class="contact-info-item">
<div class="contact-info-icon">
<i class="fas fa-map-marked"></i>
</div>
<div class="contact-info-text">
<h2>address</h2>
<span>1215 Lorem Ipsum, Ch 176080 </span>
<span>Chandigarh , INDIA</span>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="contact-info">
<div class="contact-info-item">
<div class="contact-info-icon">
<i class="fas fa-envelope"></i>
</div>
<div class="contact-info-text">
<h2>E-mail</h2>
<span>info@LoremIpsum.com</span>
<span>yourmail@gmail.com</span>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="contact-info">
<div class="contact-info-item">
<div class="contact-info-icon">
<i class="fas fa-clock"></i>
</div>
<div class="contact-info-text">
<h2>office time</h2>
<span>Mon - Thu 9:00 am - 4.00 pm</span>
<span>Thu - Mon 10.00 pm - 5.00 pm</span>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-8">
<div class="contact-page-form" method="post">
<h2>Get in Touch</h2>
<form id="contact" action="{{route('store')}}" method="post">
@csrf
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="single-input-field">
<input type="text" placeholder="Your Name" name="name"/>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="single-input-field">
<input type="email" placeholder="E-mail" name="email" required/>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="single-input-field">
<input type="text" placeholder="address" name="address"/>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="single-input-field">
<input type="text" placeholder="state" name="state"/>
</div>
</div>
<div class="col-md-12 message-input">
<div class="single-input-field">
<textarea placeholder="city" name="city"></textarea>
</div>
</div>
<div class="col-md-12 message-input">
<div class="single-input-field">
<textarea placeholder="phone" name="phone"></textarea>
</div>
</div>
<div class="single-input-fieldsbtn">
<input type="submit" value="Send Now"/>
</div>
</div>
</form>
</div>
</div>
<!-- <div class="single-input-fieldsbtn"> -->
<div class="col-md-4">
<div class="contact-page-map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d109741.02912911311!2d76.69348873658222!3d30.73506264436677!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390fed0be66ec96b%3A0xa5ff67f9527319fe!2sChandigarh!5e0!3m2!1sen!2sin!4v1553497921355" width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</section>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>Now open your terminal and paste this code
php artisan servehttp://127.0.0.1:8000/contact
Now click on Send now and your data has been successfully submit on Database.
Conclusion- With the help of this blog you can successfully create a Contact Us page for your laravel website that will save user’s information along with sending the information to admin.
Thanks 🙏🙏
