Untuk di file .env connection standar bawakan yakni mysql captcha akan tampil seperti biasa
namun terkadang jika menggunakan connection sqlsrv, captcha tidak mau tampil jadi ubah dulu
CACHE_STORE=database menjadi CACHE_STORE=file
baru captcha nya akan tampil.
Step 1 – Install the Laravel CAPTCHA package
Jalankan perintah ini untuk install package nya
composer require mews/captcha
Kemudian tulis/tambahkan di file bootstrap\providers.php
use App\Providers\AppServiceProvider;
use Mews\Captcha\CaptchaServiceProvider;
return [
AppServiceProvider::class,
CaptchaServiceProvider::class,
];
Step 2 – Configure CAPTCHA settings
Publish the CAPTCHA configuration file dengan perintah dibawah
php artisan vendor:publish --provider="Mews\Captcha\CaptchaServiceProvider"
Perintah diatas akan membuat file captcha.php didalam config folder.
*perhatikan letak kita menaruh folder background dan fonts captcha dan sesuaikan di file ini, seperti dibawah ini
<?php
return [
'disable' => env('CAPTCHA_DISABLE', false),
'characters' => [
'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z',
'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z',
0, 1, 2, 3, 4, 5, 6, 7, 8, 9,
],
'fontsDirectory' => dirname(__DIR__) . '/public/assets/captcha/fonts',
'bgsDirectory' => dirname(__DIR__) . '/public/assets/captcha/assets/backgrounds',
'default' => [
'length' => 6,
'width' => 345,
'height' => 65,
'quality' => 90,
'math' => false,
'expire' => 60,
'encrypt' => false,
],
'flat' => [
'length' => 6,
'fontColors' => ['#2c3e50', '#c0392b', '#16a085', '#c0392b', '#8e44ad', '#303f9f', '#f57c00', '#795548'],
'width' => 345,
'height' => 65,
'math' => false,
'quality' => 100,
'lines' => 6,
'bgImage' => true,
'bgColor' => '#28faef',
'contrast' => 0,
],
'mini' => [
'length' => 3,
'width' => 60,
'height' => 32,
],
'inverse' => [
'length' => 5,
'width' => 120,
'height' => 36,
'quality' => 90,
'sensitive' => true,
'angle' => 12,
'sharpen' => 10,
'blur' => 2,
'invert' => false,
'contrast' => -5,
],
'math' => [
'length' => 9,
'width' => 120,
'height' => 36,
'quality' => 90,
'math' => true,
],
];
You can use the default settings without any changes.
If needed, you can customize values like:
- length of CAPTCHA
- image width and height
- background and font colors
For example, to change the character length:
'length' => 5,
Most projects can use the default configuration without any changes.
Using different CAPTCHA styles
You can use different CAPTCHA styles defined in the configuration file, such as mini, inverse and more.
To use a specific style, pass its name to the captcha_img() function:
captcha_img('mini')
captcha_img('inverse')
Make sure to update the style in all places where captcha_img() is used.
In this example, it is used in:
- the form display
- the reload CAPTCHA method
Both should use the same style to avoid mismatch.
CAPTCHA style comparison
| Style | Length | Size (approx) | Special feature | Use case |
|---|
| default | 6 | Large | Standard image | General forms |
| flat | 6 | Large | Colored text and background | Modern UI forms |
| mini | 3 | Small | Compact size | Small layouts |
| inverse | 5 | Medium | Distortion and contrast | Better readability |
| math | 9 | Medium | Math-based CAPTCHA | Stronger bot protection |
Step 3 – Create routes
use App\Http\Controllers\CaptchaController;
Route::get('/', [CaptchaController::class, 'showForm'])->name('captcha.form');
Route::post('/submit', [CaptchaController::class, 'submit'])->name('captcha.submit');
Route::get('/reload-captcha', [CaptchaController::class, 'reloadCaptcha'])->name('captcha.reload');
These routes display the form, handle form submission, and reload the CAPTCHA image.
Step 4 – Create the controller
Create a controller to display the form, validate input, and generate the CAPTCHA image.
php artisan make:controller CaptchaController
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class CaptchaController extends Controller
{
public function showForm()
{
return view('captcha-form', [
'captchaImage' => captcha_img(),
]);
}
public function submit(Request $request)
{
$request->validate([
'name' => ['nullable', 'string', 'max:100'],
'email' => ['nullable', 'email'],
'captcha' => ['required', 'captcha'],
], [
'captcha.required' => 'Enter the CAPTCHA',
'captcha.captcha' => 'CAPTCHA is incorrect',
]);
return redirect()
->route('captcha.form')
->with('success', 'Form submitted successfully');
}
public function reloadCaptcha()
{
return response()->json([
'captcha' => captcha_img(),
]);
}
}
The controller displays the form, validates the CAPTCHA input, and handles the reload request.
The CAPTCHA image is generated by the mews/captcha package and displayed in the form.
On form submit, the entered value is validated using Laravel’s captcha validation rule. If it does not match, a validation error is shown.
The reload action returns a new CAPTCHA image without refreshing the page.
You can also switch CAPTCHA styles using the configuration file.
You can also switch CAPTCHA styles using the configuration file by passing the style name to the captcha_img() function.
Step 5 – Build the Blade form
Create a Blade view to display the form, CAPTCHA image, and validation messages.
resources/views/captcha-form.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Laravel CAPTCHA Form</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
background: #f4f6fb;
color: #1f2937;
}
.page {
max-width: 520px;
margin: 60px auto;
padding: 24px;
}
.card {
background: #ffffff;
border: 1px solid #dbe3f0;
border-radius: 12px;
padding: 24px;
box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}
h1 {
margin: 0 0 8px;
font-size: 28px;
}
p {
margin: 0 0 20px;
color: #4b5563;
}
label {
display: block;
margin-bottom: 6px;
font-weight: 700;
}
input {
width: 100%;
box-sizing: border-box;
padding: 12px;
border: 1px solid #cbd5e1;
border-radius: 8px;
margin-bottom: 16px;
font-size: 15px;
}
.captcha-row {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 16px;
}
.captcha-image {
min-height: 46px;
padding: 6px;
border: 1px solid #cbd5e1;
border-radius: 8px;
background: #fff;
}
button {
border: 0;
border-radius: 8px;
padding: 12px 16px;
font-size: 15px;
cursor: pointer;
}
.reload-button {
background: #e2e8f0;
color: #1e293b;
}
.submit-button {
width: 100%;
background: #2563eb;
color: #fff;
font-weight: 700;
}
.message {
padding: 12px 14px;
border-radius: 8px;
margin-bottom: 16px;
}
.message.success {
background: #dcfce7;
color: #166534;
}
.message.error {
background: #fee2e2;
color: #b91c1c;
}
.field-error {
margin-top: -10px;
margin-bottom: 16px;
color: #b91c1c;
font-size: 14px;
}
</style>
</head>
<body>
<div class="page">
<div class="card">
<h1>Simple CAPTCHA Form</h1>
<p>Enter the CAPTCHA code shown in the image before submitting the form.</p>
@if (session('success'))
<div class="message success">{{ session('success') }}</div>
@endif
@if ($errors->has('captcha'))
<div class="message error">{{ $errors->first('captcha') }}</div>
@endif
<form method="POST" action="{{ route('captcha.submit') }}">
@csrf
<label for="name">Name</label>
<input
id="name"
type="text"
name="name"
value="{{ old('name') }}"
placeholder="Optional"
>
<label for="email">Email</label>
<input
id="email"
type="text"
name="email"
value="{{ old('email') }}"
placeholder="Optional"
>
@error('email')
<div class="field-error">{{ $message }}</div>
@enderror
<label for="captcha">CAPTCHA</label>
<div class="captcha-row">
<div class="captcha-image" id="captcha-image">{!! $captchaImage !!}</div>
<button class="reload-button" type="button" id="reload-captcha">Reload</button>
</div>
<input
id="captcha"
type="text"
name="captcha"
placeholder="Enter the CAPTCHA"
autocomplete="off"
>
<button class="submit-button" type="submit">Submit</button>
</form>
</div>
</div>
<script>
document.getElementById('reload-captcha').addEventListener('click', async function () {
const response = await fetch('{{ route('captcha.reload') }}', {
headers: {
'X-Requested-With': 'XMLHttpRequest'
}
});
const data = await response.json();
document.getElementById('captcha-image').innerHTML = data.captcha;
document.getElementById('captcha').value = '';
});
</script>
</body>
</html>
The form displays the CAPTCHA image and includes a reload option.
When the reload link is clicked, a new CAPTCHA image is loaded using a simple fetch request.
