Laravel – Create Bootstrap Contact US Form using Form Request

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' => [
	....
	'CollectiveHtmlHtmlServiceProvider',
],
'aliases' => [
	....
	'Form' => 'CollectiveHtmlFormFacade',
],

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 IlluminateSupportFacadesSchema;
use IlluminateDatabaseSchemaBlueprint;
use IlluminateDatabaseMigrationsMigration;

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 IlluminateDatabaseEloquentModel;

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 AppHttpControllers;

use IlluminateHttpRequest;
use AppHttpRequests;
use AppContactUS;

class ContactUSController extends Controller
{
    /**
     * Show the application dashboard.
     *
     * @return IlluminateHttpResponse
     */
    public function contactUS()
    {
        return view('contactUS');
    }

    /**
     * Show the application dashboard.
     *
     * @return IlluminateHttpResponse
     */
    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 >
	<h1>Contact US Form</h1>

	@if(Session::has('success'))
	    <div >
	      {{ Session::get('success') }}
	    </div>
	@endif

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

		<div >
			{!! Form::label('Name:') !!}
			{!! Form::text('name', old('name'), ['class'=>'form-control', 'placeholder'=>'Enter Name']) !!}
			<span >{{ $errors->first('name') }}</span>
		</div>

		<div >
			{!! Form::label('Email:') !!}
			{!! Form::text('email', old('email'), ['class'=>'form-control', 'placeholder'=>'Enter Email']) !!}
			<span >{{ $errors->first('email') }}</span>
		</div>

		<div >
			{!! Form::label('Message:') !!}
			{!! Form::textarea('message', old('message'), ['class'=>'form-control', 'placeholder'=>'Enter Message']) !!}
			<span >{{ $errors->first('message') }}</span>
		</div>

		<div >
			<button >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….