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