Skip to content

DataOps Blog

Just another DataOps site

  • Home
  • certification
  • consultant
  • consulting
  • Contact Us!
  • courses
  • Intro to Laravel
  • tools
  • trainer
  • training

A Complete Guide For Creating Contact Form In Laravel 5.8

July 21, 2021
By amit In Laravel

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 ??

contact-page contact-us-page css how to create contact form in larvel html laravel-form
Written by:

amit

Hi I am Amit Experienced Web Developer with a demonstrated history of working in the information technology and services industry.

View All Posts

Recent Posts

  • Kubernetes CKA Training Course & Official Master Certification Program
  • Elastic Training Course & Official Master Certification Program
  • Prometheus Training Course & Official Master Certification Program
  • AppDynamics Training Course & Official Master Certification Program
  • Dynatrace Training Course & Official Master Certification Program
  • Grafana Training Course & Official Master Certification Program
  • Newrelic Training Course & Official Master Certification Program
  • Splunk Training Course & Official Master Certification Program
  • Datadog Training Course & Official Master Certification Program
  • Zabbix Training Course & Official Master Certification Program
  • MLOps Training Course & Official Master Certification Program
  • DataOps Training Course & Official Master Certification Program
  • AiOps Training Course & Official Master Certification Program
  • Gitops Training Course & Official Master Certification Program
  • SRE Training Course & Official Master Certification Program
  • DevSecOps Training Course & Official Master Certification Program
  • DevOps Training Course & Official Master Certification Program
  • Best Blog website for Health and Fitness mymedicplus.com/blog
  • Top 5 Basic Programming Question for interview purpose in JS.
  • JAVA SCRIPT VARIABLE AND DATATYPE.

Archives

Categories

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org
  • Free Video Tutorials
  • DevOps School
  • Best DevOps
  • scmGalaxy
  • Artificial Intelligence
  • DataOps
  • AIOps
  • GuruKul Galaxy
  • DevOps Consulting
  • DevOps Freelancers
  • DevOps Trainer
  • Free Ebooks
  • School for Debugger
  • Holiday Landmark
  • Surgery Planet
  • My Hospital Now
  • My Medic Plus
  • ProfessNow
  • Cotocus
  • Stocks Mantra
  • I Reviewed

Proudly powered by WordPress | Theme: BusiCare by SpiceThemes