A Complete Guide For Creating Contact Form In Laravel 5.8
In this tutorial i’m going to learn how to create working contact form in laravel in easy steps, please follow this tutorial i 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
Next to create model migration and controller please run below command
php artisan make:model Contact -m
Next go to your migration and paste 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'
];
}
Let’s go to create controller file as run below command
Php artisan make:controller ContactController -r
Go 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 serve http://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 🙏🙏
Leave a Reply