Hope you already have installed the Laravel project. open your terminal and paste the below required package

https://github.com/mewebstudio/captcha

composer require mews/captcha

Once successfully installed the package goes to the config/app.php and registers the Captcha Service Provider.

    'providers' => [
       // ...
       Mews\Captcha\CaptchaServiceProvider::class,
   ]

Find the aliases key in config/app.php.

    'aliases' => [
       // ...
       'Captcha' => Mews\Captcha\Facades\Captcha::class,
   ]

After registering to publish config.

php artisan vendor:publish

Type 9

Now you have to create a controller, model and migrate it like below

php artisan make:controller ContactusController

php artisan make:model Contactus -m

Now go to the database→migrations folder and find the newly created table and paste the below code.

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

            $table->id();

            $table->string('name');

            $table->string('email');

            $table->string('phone');

            $table->string('subject');

            $table->longtext('message')->nullable();

            $table->timestamps();

        });

Now run the command 

php artisan migrate

After successfully migrating go to the models folder and find the Contactus.php file and configure fillable property like below.

protected $guarded=[];

Now create a route for viewing the contact form and as well as create one more route for posting the data like below. And don't forget to use the controller on top 

use App\Http\Controllers\ContactusController;

Route::get('/contact',[ContactusController::class,'index']);

Now go to the controller file and create a method index

 public function index(){

        return view('frontend.contact');

    }//End Method

After creating the method index you have to create a folder frontend and under the frontend folder create the contact.blade.php file and paste the designing part

@extends('layouts.front.front')

@section('title')

Contact Us

@endsection

@section('content')

<section class="main-content">

            <div class="container-xl">

  <!-- contact-area -->

  <div class="contact-area">

                <div class="container">

                    <form action="{{route('store.contact')}}" method= "POST" class="contact__form">

                        @csrf

                    <div class="row">

                            <div class="col-md-6">

                                <input type="text" name="name" class="form-control" placeholder="Enter your name*">

                                @error('name')

                <label for="" class="text-danger">{{$message}}</label>

                @enderror

                            </div>

                            <div class="col-md-6 mt-2">

                                <input type="email" class="form-control" name="email"  placeholder="Enter your mail*">

                                @error('email')

<label for="" class="text-danger">{{$message}}</label>

@enderror

                            </div>

                            <div class="col-md-6 mt-2">

                                <input type="text" class="form-control" name="subject"  placeholder="Enter your subject*">

                            </div>

                            <div class="col-md-6 mt-2">

                                <input type="number" class="form-control" name="phone"  placeholder="Your Number*">

                                @error('phone')

<label for="" class="text-danger">{{$message}}</label>

@enderror

                            </div>

                        </div>

                        <textarea name="message" id="message" class="form-control mt-2"  placeholder="Enter your massage*"></textarea>

                        <div class="form-group mt-2 mb-2">

                            <div class="captcha">

                                    <span>{!!captcha_img('math')!!}</span>

                                    <button type="button" class="btn btn-danger reload" id="reload">

                                        &#x21bb;

                                    </button>

                            </div>

                        </div>

                        <div class="form-group mb-2">

                            <input type="text" class="form-control" placeholder="Enter Captcha" name="captcha">

@error('captcha')

<label for="" class="text-danger">{{$message}}</label>

@enderror

                        </div>

                        <button type="submit" class="btn btn-success btn-lg mt-2">send massage</button>

                    </form>

                </div>

            </div>

</div>

</section>

@endsection

 <form action="{{route('store.contact')}}" method= "POST" class="contact__form">

Create a name route like below

Route::get('/contact',[ContactusController::class,'ContactMsg'])-name('store.contact');

After creating a route go to the controller file and create a method name ContactMsg and paste the below code.

public function ContactMsg(Request $request){
   $request->validate([
       'name'=>'required',
       'email'=>'required|email',
       'phone'=>'required|digits:10',
       'captcha'=>'required|captcha',
   ]);

   Contactus ::create([
       'name'=>$request->name,
       'email'=>$request->email,
       'subject'=>$request->subject,
       'phone'=>$request->phone,
       'message'=>$request->message,
   ]);
   $notification = array(
       'message' => 'You message has been send!!', 
       'alert-type' => 'success'
   );
   return redirect()->back()->with($notification);

}//End Method

Here we are using Laravel's default validation package and validate the request field.

Now go to the contact.blade.php file and paste the below code

<script>
   $('#reload').click(function(){
       $.ajax({
           type:'GET',
           url:'reload-captcha',
           success: function(data){
               $(".captcha span").html(data.captcha)
           }
       });
   });
</script>

It will help to reload your captcha once clicked the reload button

<button type="button" class="btn btn-danger reload" id="reload">

  &#x21bb;

  </button>

  <span>{!!captcha_img('math')!!}</span>

This will show your Captcha

Now create another route for reload-captcha. with get method

Route::get('/reload-captcha',[ContactusController::class,'reloadCaptcha']);

Once create a route go to the controller file and paste the below code.

public function reloadCaptcha(){

        return response()->json(['captcha'=>captcha_img('math')]);

    }

For Custom error messaging validation of captcha, go to the lang folder and open the validation.php file and create your own error message like below.

Run the below command 

php artisan optimize

php artisan serve

Thanks for reading……

 

 

 

Leave a Comment
No Comments found