How to Add Google reCAPTCHA in Hyvä? – Guide  

The Hyvä theme makes your Magento 2 store faster and more maintainable.

While Hyvä smoothly runs your store, you need to take care of your store’s security. Automated bots may attempt to exploit your store elements like contact, login, registration, or newsletter forms.

This is where Google reCAPTCHA becomes essential. 

In this blog, I will show you how to add Google reCAPTCHA in Hyvä without any hassle. 

How to Add reCaptcha in Hyvä? – Complete Steps 

Hyvä supports these 3 types of reCAPTCHA:

• reCAPTCHA v2 (“I’m not a robot checkbox”)
• reCAPTCHA v2 (Invisible reCAPTCHA badge)
• reCAPTCHA v3 

You can pick the one and add the reCAPTCHA in the Hyvä theme for free. 

Here are the steps to do so: 

• Step 1: Get the reCAPTCHA Secret Key
• Step 2: Add Google reCAPTCHA in Magento 2 Admin 
• Step 3: Create a Magento 2 Module to Display a Basic HTML Form

Step 1: Get the reCAPTCHA Secret Key

You will need to have a Google account to register your domain.

After registration, you will receive a Site Key and Secret Key, which are required for integration. 

To begin the registration process, head to Google reCAPTCHA

• Click ” + ” to add new site, select ” reCAPTCHA v3 “
• Add domain and accept the terms
• Click Submit to get the site key and secret key.

Step 2: Add Google reCAPTCHA in Magento 2 Admin 

Once you’ve obtained the required site and secret keys for Google reCAPTCHA, you’ll need to configure them in your Magento admin panel. Follow the steps below:

After you get the required site and secret keys for Google reCAPTCHA, you’ll need to configure them in your Magento admin panel. Follow the steps below:

• Log in to your Magento Admin Dashboard.
• Navigate to: Stores > Settings > Configuration > Security > Google reCAPTCHA Storefront.
• Enter the Site Key and Secret Key for the reCAPTCHA type (v2 or v3) you wish to enable.
• Save the configuration.

Step 3: Create a Magento 2 Module to Display a Basic HTML Form

Now follow these instructions to develop a Magento 2 module that outputs a basic HTML form on the storefront.Create a Registration.php file with the below code at app/code/Meetanshi/HyvaRecaptcha directory:

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
   \Magento\Framework\Component\ComponentRegistrar::MODULE,
   'Meetanshi_HyvaRecaptcha',
   __DIR__
);

Create module.xml file at the location app/code/Meetanshi/HyvaRecaptcha/etc/ and implement the below code:

<?xml version="1.0" ?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
   <module name="Meetanshi_HyvaRecaptcha" setup_version="1.0.0">
   </module>
</config>

Create a routes.xml file at the location app/code/Meetanshi/HyvaRecaptcha/etc/frontend with the below code:

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
   <router id="standard">
       <route id="meetanshi_hyvaform" frontName="hyvaform">
           <module name="Meetanshi_HyvaRecaptcha" />
       </route>
   </router>
</config>

Now, create the index.php file at the following location app/code/Meetanshi/HyvaRecaptcha/Controller/Index and place the below code under it:

<?php
namespace Meetanshi\HyvaRecaptcha\Controller\Index;

use Magento\Framework\App\Action\Context;
use Magento\Framework\View\Result\PageFactory;

class Index extends \Magento\Framework\App\Action\Action
{
   /** @var  \Magento\Framework\View\Result\Page */
   protected $resultPageFactory;

   /**
    * @param Context $context
    * @param PageFactory $resultPageFactory
    */
   public function __construct(
       \Magento\Framework\App\Action\Context $context,
       \Magento\Framework\View\Result\PageFactory $resultPageFactory
   ) {
       $this->resultPageFactory = $resultPageFactory;
       parent::__construct($context);
   }

   /**
    * Hyva Form
    *
    * @return \Magento\Framework\View\Result\PageFactory
    */
   public function execute()
   {
       $resultPage = $this->resultPageFactory->create();
       $resultPage->getConfig()
           ->getTitle()
           ->prepend(__('Hyva Form'));
       return $resultPage;
   }
}

In frontend layout directories, add a new file called meetanshi_hyvaform_index_index.xml at app/code/Meetanshi/HyvaRecaptcha/frontend/layout and implement the mentioned code there:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
   <body>
       <referenceContainer name="content">
          <block class="Magento\Framework\View\Element\Template" name="meetanshi_hyvaform" template="Meetanshi_HyvaRecaptcha::hyva/hyva_custom_form.phtml" />
       </referenceContainer>
   </body>
</page>

Create a file named hyva_custom_form.phtml under the path app/code/Meetanshi/HyvaRecaptcha/view/frontend/templates/hyva and insert the following code inside it:

<?php
use Hyva\Theme\ViewModel\ReCaptcha as HyvaRecaptcha;

/**
* @var \Magento\Framework\View\Element\Template $block
* @var \Magento\Framework\Escaper $escaper
*/
?>

<form action="<?= $escaper->escapeUrl($block->getUrl('hyva_form/action/post')) ?>"
     method="post"
     id="hyva_form"
>
   <?= $block->getBlockHtml('formkey') ?>

   <div class="field field-reserved w-full required">
       <label class="label" for="firstname">
           <span>First Name</span>
       </label>
       <div class="control">
           <input type="text" id="name" name="name" title="First Name" class="form-input required-entry">
       </div>
   </div>
    <div class="field field-reserved w-full required">
       <label class="label" for="firstname">
           <span>Last Name</span>
       </label>
       <div class="control">
           <input type="text" id="name" name="name" title="Last Name" class="form-input required-entry">
       </div>
   </div>


   <!-- Render the Google reCAPTCHA v2 (“I am not a robot”)  -->
   <?= $block->getBlockHtml(HyvaRecaptcha::RECAPTCHA_INPUT_FIELD_BLOCK.'_recaptcha') ?>


   <!-- Render the Google reCAPTCHA v2 Invisible  -->
   <?= $block->getBlockHtml(HyvaRecaptcha::RECAPTCHA_INPUT_FIELD_BLOCK.'_invisible') ?>


   <!-- Render the Google reCAPTCHA v3 Invisible  -->
   <?= $block->getBlockHtml(HyvaRecaptcha::RECAPTCHA_INPUT_FIELD_BLOCK) ?>

   
    <?= $block->getBlockHtml(HyvaRecaptcha::RECAPTCHA_LEGAL_NOTICE_BLOCK) ?>   


   <div class="actions-toolbar">
       <div class="primary">
           <button type="submit" class="action submit primary">
               <?= $escaper->escapeHtml(__('Action')) ?>
           </button>
       </div>
   </div>
</form>

After using the above code, you can check the reCAPTCHA in the frontend by using the below url: http://<yourhost.com>/hyvaform/index/index Or http://<yourhost.com>/hyvaform

Based on the reCAPTCHA type you have integrated – it will display in the front end when you open the given URL.

You can have a look at the output of the above code in the below screenshots:

reCAPTCHA v2 (“I am not a robot”)

reCAPTCA v2 with optional legal notice block

Specifying a separate code block for each reCAPTCHA type:

Render the Google reCAPTCHA v2 (“I am not a robot”)

<?= $block->getBlockHtml(HyvaRecaptcha::RECAPTCHA_INPUT_FIELD_BLOCK.'_recaptcha') ?>

 Render the Google reCAPTCHA v2 Invisible  

<?= $block->getBlockHtml(HyvaRecaptcha::RECAPTCHA_INPUT_FIELD_BLOCK.'_invisible') ?>

Render the Google reCAPTCHA v3 Invisible  

<?= $block->getBlockHtml(HyvaRecaptcha::RECAPTCHA_INPUT_FIELD_BLOCK) ?>

Now let’s add the legal notice block (optional)

<?= $block->getBlockHtml(HyvaRecaptcha::RECAPTCHA_LEGAL_NOTICE_BLOCK) ?>

This code is used to embed the reCAPTCHA input field (likely v2 or v3) into the form (e.g., login, registration, contact form) on a Magento 2 website that uses Hyvä theme or a custom integration.

Go ahead and try this solution to add the Google reCAPTCHA form in Magento 2