Adding Google reCAPTCHA in Laravel For Form Validation

Adding Google reCAPTCHA in Laravel For Form Validation

When it comes to blocking bots to post malicious content, Google reCAPTCHA is an awesome solution.

Forms are one of the essential elements of any web application, which often become the main source of spam. Google reCAPTCHA is an industry standard for preventing spam by enhancing form validation capabilities.

Google reCAPTCHA relies on machine learning from Google’s large data sets of human interaction with the web, which is slightly different and random when compared to bots.

In this post, I’ll cover how to easily integrate Google ReCaptcha validation in your Laravel Application.

Prerequisites

To complete this tutorial, you will need to have:

  1. Fresh Installation of Laravel
  2. Google reCAPTCHA Keys

Setting Up Laravel Application

To start, let’s create a new Laravel application by running below command in your terminal.

composer create-project laravel/laravel laravel-reCaptcha

Above command will create a new Laravel application under folder name laravel-reCaptcha.

Now let’s mock up a quick contact page view in Laravel. Add below route in your routes/web.php file.

Route::get('contact', 'ContactController@getContactPage');

Now create a controller by running below command.

php artisan make:controller ContactController

Now, add getContactPage method in ContactController which will return a contact page view like below.

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class ContactController extends Controller
{
    public function getContactPage()
    {
        return view('contact');
    }
}

Create a new view file called contact.blade.php in your views folder. Add below code snippet to add a bootstrap based form to your view.

Now if your visit /contact, you will see a contact form layout like below.

Contact Form View
Contact Form View

Add reCAPTCHA Package

Now let’s add the necessary package to add reCAPTCHA functionality. For reCAPTCHA I will be using anhskohbo/no-captcha package. Use below composer command to add this package to your project.

composer require anhskohbo/no-captcha

Setup Configuration

Now, we need to create secret keys for Google reCAPTCHA, for this go to this link and enter the domain address of your application e.g. app.wip or app.test and fill other form fields like below.

Google reCAPTCHA Settings
Google reCAPTCHA Settings

When you submit the form, you will be provided with the Site Key and Site Secret.

Add below lines to your .env file.

NOCAPTCHA_SECRET= PUT YOUR SECRET KEY HERE
NOCAPTCHA_SITEKEY= PUT YOUR SITE KEY HERE

Now you have set up the configuration, it’s time to add reCAPTCHA to your contact form.

Add Necessary Routes

Add below new route in routes/web.php file.

Route::post('/submit-contact', 'ContactController@submitContactForm')->name('contact.submit');

Using the above code, we are adding a new POST route to our application which will be used in our contact form.

Update Controller

Add a new method called submitContactForm in your ContactController with below code snippet.

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

        // Write your contact form logic here

        return redirect()->back();
    }

In submitContactForm method, we are adding validation rules for our contact form. Pay close attention on g-recaptcha-response field name which will be validation for our reCAPTCHA.

Adding Views

Now it’s time to update our view contact.blade.php file to add reCAPTCHA field. Replace your current view with the below code snippet.

First thing, we have add the contact.submit route to our form’s action attribute. Next, we added reCAPTCHA using below code.

{!! app('captcha')->display() !!}

Next, rendered the required javascript to make this reCAPTCHA functional with below line of code.

{!! NoCaptcha::renderJs() !!}

Test the Form

Now if your refresh your /contact page, you will be able to see a reCAPTCHA like below.

Contact Form with Google reCaptcha
Contact Form with Google reCaptcha

Try to submit the form without providing reCAPTCHA and you will see an error message like below.

Google reCaptha Validation Error
Google reCaptha Validation Error

Try to click on I’m not robot and you will see the Google reCAPTCHA like below.

Google reCaptcha In Action
Google reCaptcha In Action

That is it, guys! If you have any comments or question, please leave them in the box below.

Your little help will keep this site alive and help us to produce quality content for you.