Laravel 8 Add Captcha In Forms

In this tutorial you will learn about the Laravel 8 Add Captcha In Forms and its application with practical example.

n this Laravel 8 Add Captcha In Forms tutorial I’ll show you how to add or integrate captcha verification in laravel forms. In this tutorial you will learn to add captcha verification in laravel form. We will be using laravel captcha package to secure laravel forms against spamming. In this article we will be creating a simple form with some basic fields along with the captcha verification field.

Table Of Contents−

What Is Captcha?
Laravel 8 Add Captcha In Forms

What Is Captcha?

Captcha Verification is a common technique used in web forms to help to prevent spamming. Captcha helps to ensure that user is real humans and not a bot program to spam your forms. The user is somehow challenged to prove that they are human being.

In this step by step tutorial I will demonstrate you with example on how to add captcha verification field in laravel form. Please follow instruction given below:

Step 1 – Download Laravel 8 Application

Step 2 – Setup Database with App
Step 3 – Install Captcha Package
Step 4 – Register Captcha Package

Step 5 – Captcha Configuration
Step 6 – Create Form Routes
Step 7 – Create Form Controller By Artisan Command

Step 8 – Create Form Blade File
Step 9 – Run Development Server

Step 1 – Download Laravel 8 Application

First of all we need to create a fresh laravel project, download and install Laravel 8 using the below command

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

1	composer create-project --prefer-dist laravel/laravel FormValidation

Step 2 – Setup Database with App

Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=database-name
DB_USERNAME=database-user-name
DB_PASSWORD=database-password

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=database-name

DB_USERNAME=database-user-name

DB_PASSWORD=database-password

Step 3 – Install Captcha Package

In this step, we will install laravel captcha Package via the composer dependency manager. Use the following command to install laravel captcha Package.

composer require mews/captcha

1	composer require mews/captcha

Step 4 – Register Captcha Package

In this step we will register captcha package in laravel application. So, Open providers/config/app.php file and register the captcha service provider and aliases.

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

'providers' => [

...

Mews\Captcha\CaptchaServiceProvider::class,

]

'aliases' => [

...

'Captcha' => Mews\Captcha\Facades\Captcha::class,

]

Step 5 – Captcha Configuration

Now, open config/captcha.php file and enable or disable settings based on your requirement:

return [
    'default'   => [
        'length'    => 5,
        'width'     => 120,
        'height'    => 36,
        'quality'   => 90,
        'math'      => true, //Enable Math Captcha
        'expire'    => 60,   //Stateless/API captcha expiration
    ],
    // ...
];

return [

'default' => [

'length' => 5,

'width' => 120,

'height' => 36,

'quality' => 90,

'math' => true, //Enable Math Captcha

'expire' => 60, //Stateless/API captcha expiration

// ...

];

Step 6 – Create Routes

After this, we need to define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.

routes/web.php

use App\Http\Controllers\CaptchaValidationController;
 
 
Route::get('contact-form-captcha', [CaptchaValidationController::class, 'index']);
Route::post('captcha-validation', [CaptchaValidationController::class, 'capthcaFormValidate']);
Route::get('reload-captcha', [CaptchaValidationController::class, 'reloadCaptcha']);

use App\Http\Controllers\CaptchaValidationController;

Route::get('contact-form-captcha', [CaptchaValidationController::class, 'index']);

Route::post('captcha-validation', [CaptchaValidationController::class, 'capthcaFormValidate']);

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

Step 7 – Create Form Controller By Artisan Command

Now, lets create a controller named CaptchaValidationController using command given below –

php artisan make:controller CaptchaValidationController

1	php artisan make:controller CaptchaValidationController

Now, go to app/http/controllers and open CaptchaValidationController.php file. And update the following code into it:

<?php
 
namespace App\Http\Controllers;
use Illuminate\Http\Request;
 
class CaptchaValidationController extends Controller
{
    public function index()
    {
        return view('form-with-captcha');
    }
 
    public function capthcaFormValidate(Request $request)
    {
        $request->validate([
            'name' => 'required',
            'email' => 'required|email',
            'message' => 'required',
            'captcha' => 'required|captcha'
        ]);
    }
 
    public function reloadCaptcha()
    {
        return response()->json(['captcha'=> captcha_img()]);
    }
 
}

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class CaptchaValidationController extends Controller

{

public function index()

{

return view('form-with-captcha');

}

public function capthcaFormValidate(Request $request)

{

$request->validate([

'name' => 'required',

'email' => 'required|email',

'message' => 'required',

'captcha' => 'required|captcha'

]);

}

public function reloadCaptcha()

{

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

}

Step 8 – Create Blade File

Now, create blade view file to display form with captcha field and submit to database. Go to resources/views and create form-with-captcha.blade.php and update the following code into it:

<!DOCTYPE html>
<html>
<head>
<title>Laravel 8 Form Captcha Validation</title>
<meta name="csrf-token" content="{{ csrf_token() }}">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-4">
@if(session('status'))
<div class="alert alert-success">
{{ session('status') }}
</div>
@endif
<div class="card">
<div class="card-header text-center font-weight-bold">
<h2>Laravel 8 Add Captcha in Form For Validation</h2>
</div>
<div class="card-body">
<form name="captcha-contact-us" id="captcha-contact-us" method="post" action="{{url('captcha-validation')}}">
@csrf
<div class="form-group">
<label for="exampleInputEmail1">Name</label>
<input type="text" id="name" name="name" class="@error('name') is-invalid @enderror form-control">
@error('name')
<div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
@enderror
</div>          
<div class="form-group">
<label for="exampleInputEmail1">Email</label>
<input type="email" id="email" name="email" class="@error('email') is-invalid @enderror form-control">
@error('email')
<div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
@enderror
</div>              
<div class="form-group">
<label for="exampleInputEmail1">Message</label>
<textarea name="message" class="@error('message') is-invalid @enderror form-control"></textarea>
@error('message')
<div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
@enderror
</div>
<div class="form-group mt-4 mb-4">
<div class="captcha">
<span>{!! captcha_img() !!}</span>
<button type="button" class="btn btn-danger" class="reload" id="reload">
↻
</button>
</div>
</div>
<div class="form-group mb-4">
<input id="captcha" type="text" class="form-control" placeholder="Enter Captcha" name="captcha">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>    
<script type="text/javascript">
$('#reload').click(function () {
$.ajax({
type: 'GET',
url: 'reload-captcha',
success: function (data) {
$(".captcha span").html(data.captcha);
}
});
});
</script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Laravel 8 Form Captcha Validation</title>

</head>

<body>

@if(session('status'))

</div>

@endif

<h2>Laravel 8 Add Captcha in Form For Validation</h2>

</div>

@csrf

@error('name')

<div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>

@enderror

</div>

<label for="exampleInputEmail1">Email</label>

@error('email')

<div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>

@enderror

</div>

<label for="exampleInputEmail1">Message</label>

@error('message')

<div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>

@enderror

</div>

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

↻

</button>

</div>

</div>

<button type="submit" class="btn btn-primary">Submit</button>

</form>

</div>

$('#reload').click(function () {

$.ajax({

type: 'GET',

url: 'reload-captcha',

success: function (data) {

$(".captcha span").html(data.captcha);

}

});

</script>

</body>

</html>

The following below code will display validation error message on blade view file:

@error('name')
<div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
@enderror

@error('name')

<div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>

@enderror

Step 9 – Run Development Server

Now we are ready to run our example so lets start the development server using following artisan command –

php artisan serve

1	php artisan serve

Now, open the following URL in browser to see the output –

http://127.0.0.1:8000/contact-form-captcha

1	http://127.0.0.1:8000/contact-form-captcha

AngularJS

CodeIgniter

Laravel

Node Js

Wordpress

More Blog

Learn

ABOUT PAGES

Laravel 8 Add Captcha In Forms

What Is Captcha?