How to setup Google reCAPTCHA in Laravel with an example

2. Custom validation rule for validating the Google reCaptcha

This class has the custom validation script to send the verification request to the Google reCaptcha API endpoint. It sends the API secret key along with the request.

If the response has the error status then it invokes the fail() callback to return the validation error to the UI.

app/Rules/GoogleReCaptcha.php

<?php

namespace App\Rules;

use Closure;
use Illuminate\Contracts\Validation\ValidationRule;
use Illuminate\Support\Facades\Http;
use Illuminate\Support\Facades\Log; // Import the Log facade

class GoogleReCaptcha implements ValidationRule
{
    /**
     * Run the validation rule.
     *
     * @param  \Closure(string): \Illuminate\Translation\PotentiallyTranslatedString  $fail
     */
    public function validate(string $attribute, mixed $value, Closure $fail): void
    {
        $response = Http::get("https://www.google.com/recaptcha/api/siteverify", [
            'secret' => env('GOOGLE_RECAPTCHA_SECRET'),
            'response' => $value
        ]);

        if (!$response->json()["success"] ?? false) {
            $fail('Google reCaptcha validation required.');
        }
    }
}
?>

Extend Laravel validation to handle reCaptcha validation

The above rule class is instantiated at the Laravel App service provider. The validation instance calls the custom validate() function and sets the error if the user misses the reCaptcha validation.

In this provider, it names the validation hook as google_recaptcha. This name key is used in the form action handler before processing the form post request.

app/Providers/AppServiceProvider.php

<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;
use App\Rules\GoogleReCaptcha;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     */
    public function register(): void
    {
        //
    }

    /**
     * Bootstrap any application services.
     */
    public function boot(): void
    {
        $this->app->validator->extend('google_recaptcha', function ($attribute, $value, $parameters, $validator) {
            $rule = new GoogleReCaptcha;

            // Validate reCAPTCHA
            $rule->validate($attribute, $value, function ($message) use ($validator, $attribute) {
                $validator->errors()->add($attribute, $message);
            });
            // Return true to success
            return true;
        });
    }
}
?>

3. Send validation request before processing the formData

The below code is for having a ContactController for this Laravel example. It has two routing handler functions. One is to show the contact form with the Google reCaptcha element. And, the other is to process the post request on submitting the form.

In the form action handler processContactFormData() it executes the default Laravel required and the email format validation.

Added to the default validation, it hooks the custom reCaptcha validation rule by specifying the custom key mapped at the AppServiceProvider class.

This validation returns the validateData response. If it has no error response, the code below shows how to load the user input to the request object.

On successful Google reCaptcha validation, it processes the contact form mail-sending script in this example. It uses an SMTP mailer to send the email in Laravel.

app/Http/Controllers/ContactController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Mail\MailService;
use Illuminate\Support\Facades\Mail;

class ContactController extends Controller
{
    public function showContactForm()
    {
        return view('contact-form');
    }

    public function processContactFormData(Request $request)
    {
        $validatedData = $request->validate([
            'name' => 'required',
            'email' => 'required|email',
            'message' => 'required',
            'g-recaptcha-response' => 'google_recaptcha',
        ]);

        if (!empty($validatedData)) {
            $formData = [
                'name' => $request->input('name'),
                'email' => $request->input('email'),
                'message' => $request->input('message'),
            ];

            $recipientEmail = env('APPLICATION_MAIL_RECIPIENT');
            Mail::to($recipientEmail)->send(new MailService($formData));
        }

        return redirect()->back()->with('success', 'Hi, we received your message. Thank you!');
    }
}
?>

Web routes for the landing page and the form action URL

Two web route URL rules are created for this reCaptcha example as shown below. The /contact-us/ maps the name contact.form.action to be used in the HTML form action attribute.

routes/web.php

<?php
Route::get('/', [ContactController::class, 'showContactForm']);
Route::post('contact-us', [ContactController::class, 'processContactFormData'])->name('contact.form.action');
?>

4. Contact form template with Google reCaptcha element

The below template file is created to show a contact form in the Laravel application UI. It shows the basic name, email, and message field with a Google reCaptcha element.

It loads the reCaptcha JavaScript API library and a target HTML container to load the "I am not a Robot" reCaptcha element.

Without attending the reCaptcha validation, this example code stops proceeding further to send the contact email.

On successful submission, the processFormData() controller function uses the Laravel Mail service to trigger the mail sending. It sets the parameter from the posted formData to the email body.

resources/views/contact-form.blade.php

<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>How to setup Google reCAPTCHA in Laravel with an example</title>
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css" />
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>

<body>
    <div class="container">
        <div class="row mb-5">

            <div class="col-7 offset-1 mt-5">
                <div>
                    <h3>Contact Us</h3>
                </div>
                <div class="card">

                    <div class="card-body">
                        <form method="POST" action="{{ route('contact.form.action') }}">
                            @csrf
                            <div class="col-md-6">
                                <div class="form-group">
                                    <strong>Name:</strong>
                                    <input type="text" name="name" class="form-control" value="{{ old('name') }}">
                                    @error('name')
                                    <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <strong>Email:</strong>
                                    <input type="text" name="email" class="form-control" value="{{ old('email') }}">
                                    @error('email')
                                    <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <strong>Message:</strong>
                                    <textarea name="message" id="message" class="form-control"
                                        rows="">{{ old('message') }}</textarea>

                                    @error('message')
                                    <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group">
                                    <div class="g-recaptcha" data-sitekey="{{ env('GOOGLE_RECAPTCHA_PUBLIC_KEY') }}"></div>
                                    @error('g-recaptcha-response')
                                    <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group">
                                    <button type="submit" class="btn btn-primary btn-submit">Submit</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

Contact email body template

This template is for the contact mail body content. It uses the user-entered values from the contact form. Template variables are created in the Laravel routers and it is used in this email body template.

The customer_name, customer_email, and the, customer_message variables embed the dynamic data posted on the form submit.

resources/views/emailbody.blade.php

<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
    <p>Hi Administrator,</p>
    <h1>A new message is received</h1>

    @if ($customer_name)
    <p>
        Cutomer name: {{ $customer_name }}
    </p>
    @endif
    @if ($customer_email)
    <p>
        Cutomer email: {{ $customer_email }}
    </p>
    @endif
    @if ($customer_message)
    <p>
        Cutomer message: {{ $customer_message }}
    </p>
    @endif
</body>

</html>

Download

Written by Vincy, a web developer with 15+ years of experience and a Masters degree in Computer Science. She specializes in building modern, lightweight websites using PHP, JavaScript, React, and related technologies. Phppot helps you in mastering web development through over a decade of publishing quality tutorials.

↑ Back to Top