Laravel 5.3 - Create Bootstrap Contact US Form using Form Request

By Hardik Savani | October 23, 2016 | | 24558 Viewer | Category : Laravel Bootstrap


Share this post:

Contact Us Page is very basic requirement of any Website that way owner can get feedback from users. So, I am going to share with you how to create simple bootstrap contact us form using Form Request in Laravel 5.3.

In this example i create simple "contatctus" table with three simple fields name, email and message. We will simple get value of name, email and message using bootstrap form layout. So you have to just follow bellow few step and you can simple implement contact us form in your website.

So, let's follow bellow step and after complete whole example you will find bellow layout page in your laravel application.

Preview

Step 1: Install Laravel 5.3 Application

In this step, if you haven't laravel 5.3 application setup then we have to get fresh laravel 5.3 application. So run bellow command and get clean fresh laravel 5.3 application.

composer create-project --prefer-dist laravel/laravel blog

Step 2: Install Form Package

In this step we will install "laravelcollective/html" package for Form facade, we will run bellow command in our root directory:

composer require laravelcollective/html

After successfully install package, open config/app.php file and add service provider and alias.

config/app.php

'providers' => [

....

'Collective\Html\HtmlServiceProvider',

],

'aliases' => [

....

'Form' => 'Collective\Html\FormFacade',

],

Step 3: Database Configuration

In this step we have to make database configuration for example database name, username, password etc. So let's open .env file and fill all details like as bellow:

.env

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=here your database name(blog)

DB_USERNAME=here database username(root)

DB_PASSWORD=here database password(root)

Step 4: Create Contact US Table and Model

In this step we have to create migration for contactus table using Laravel 5.3 php artisan command, so first fire bellow command:

php artisan make:migration create_contact_us_table

After this command you will find one file in following path database/migrations and you have to put bellow code in your migration file for create contactus table.

<?php


use Illuminate\Support\Facades\Schema;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Database\Migrations\Migration;


class CreateContactUsTable extends Migration

{

/**

* Run the migrations.

*

* @return void

*/

public function up()

{

Schema::create('contactus', function (Blueprint $table) {

$table->increments('id');

$table->string('name');

$table->string('email');

$table->text('message');

$table->timestamps();

});

}


/**

* Reverse the migrations.

*

* @return void

*/

public function down()

{

Schema::drop("contactus");

}

}

After creating table we have to create model for "contactus" table so just run bellow command and create new model:

php artisan make:model ContactUS

Ok, so after run bellow command you will find app/ContactUS.php and put bellow content in ContactUS.php file:

app/ContactUS.php

<?php


namespace App;


use Illuminate\Database\Eloquent\Model;


class ContactUS extends Model

{


public $table = 'contactus';


public $fillable = ['name','email','message'];


}

Step 5: Create Route

In this is step we need to create route of contact us get and post method. so open your routes/web.php file and add following route.

routes/web.php

Route::get('contact-us', 'ContactUSController@contactUS');

Route::post('contact-us', ['as'=>'contactus.store','uses'=>'ContactUSController@contactUSPost']);

Step 6: Create Controller

In this point, now we should create new controller as ContactUSController. So run bellow command and create new controller.

php artisan make:controller ContactUSController

After bellow command you will find new file in this path app/Http/Controllers/MaatwebsiteDemoController.php.

In this controller i write two method contactUS() and contactUSPost(), In this method i write validation(You can see validation tutorial : Laravel 5.3 - Form Input Validation rules example with demo), response, redirect back(You can see redirect tutorial : Laravel 5 Redirect to URL using redirect() helper) etc.

we can also send mail after got any feedback, you can follow link for send mail : How to send mail using mailable in laravel 5.3?.

So let's put bellow code on ContactUSController.php file.

app/Http/Controllers/ContactUSController.php

<?php


namespace App\Http\Controllers;


use Illuminate\Http\Request;

use App\Http\Requests;

use App\ContactUS;


class ContactUSController extends Controller

{

/**

* Show the application dashboard.

*

* @return \Illuminate\Http\Response

*/

public function contactUS()

{

return view('contactUS');

}


/**

* Show the application dashboard.

*

* @return \Illuminate\Http\Response

*/

public function contactUSPost(Request $request)

{

$this->validate($request, [

'name' => 'required',

'email' => 'required|email',

'message' => 'required'

]);


ContactUS::create($request->all());


return back()->with('success', 'Thanks for contacting us!');

}

}

Step 7: Create View

In Last step, let's create contactUS.blade.php(resources/views/contactUS.blade.php) for layout and we will write design code here and put following code:

resources/views/importExport.blade.php

<!DOCTYPE html>

<html>

<head>

<title>Laravel 5.3 - Contact US Form Example</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

</head>

<body>


<div class="container">

<h1>Contact US Form</h1>


@if(Session::has('success'))

<div class="alert alert-success">

{{ Session::get('success') }}

</div>

@endif


{!! Form::open(['route'=>'contactus.store']) !!}


<div class="form-group {{ $errors->has('name') ? 'has-error' : '' }}">

{!! Form::label('Name:') !!}

{!! Form::text('name', old('name'), ['class'=>'form-control', 'placeholder'=>'Enter Name']) !!}

<span class="text-danger">{{ $errors->first('name') }}</span>

</div>


<div class="form-group {{ $errors->has('email') ? 'has-error' : '' }}">

{!! Form::label('Email:') !!}

{!! Form::text('email', old('email'), ['class'=>'form-control', 'placeholder'=>'Enter Email']) !!}

<span class="text-danger">{{ $errors->first('email') }}</span>

</div>


<div class="form-group {{ $errors->has('message') ? 'has-error' : '' }}">

{!! Form::label('Message:') !!}

{!! Form::textarea('message', old('message'), ['class'=>'form-control', 'placeholder'=>'Enter Message']) !!}

<span class="text-danger">{{ $errors->first('message') }}</span>

</div>


<div class="form-group">

<button class="btn btn-success">Contact US!</button>

</div>


{!! Form::close() !!}


</div>


</body>

</html>

Ok, now you can run this example and check, you can also see demo.

I hope it can help you....






We are Recommending you: