You can pick the one and add the reCAPTCHA in the Hyv\u00e4 theme for free. <\/p>\n\n\n\n
Here are the steps to do so: <\/p>\n\n\n\n
- \n
- Step 1: Get the reCAPTCHA Secret Key<\/li>\n\n\n\n
- Step 2: Add Google reCAPTCHA in Magento 2 Admin <\/li>\n\n\n\n
- Step 3: Create a Magento 2 Module to Display a Basic HTML Form<\/li>\n<\/ul>\n\n\n\n
Step 1: Get the reCAPTCHA Secret Key<\/h3>\n\n\n\n
You will need to have a Google account to register your domain.<\/p>\n\n\n\n
After registration, you will receive a Site Key and Secret Key, which are required for integration. <\/p>\n\n\n\n
To begin the registration process, head to Google reCAPTCHA<\/a><\/p>\n\n\n\n
- \n
- Click ” + ” to add new site, select ” reCAPTCHA v3 “<\/li>\n\n\n\n
- Add domain and accept the terms<\/li>\n\n\n\n
- Click Submit to get the site key and secret key.<\/li>\n<\/ul>\n\n\n\n
![\"Get](\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/06\/1-Get-the-reCAPTCHA-Secret-Key.png\")
<\/figure>\n\n\n\nStep 2: Add Google reCAPTCHA in Magento 2 Admin <\/h3>\n\n\n\n
Once you\u2019ve obtained the required site and secret keys for Google reCAPTCHA, you\u2019ll need to configure them in your Magento admin panel. Follow the steps below:<\/p>\n\n\n\n
After you get the required site and secret keys for Google reCAPTCHA, you\u2019ll need to configure them in your Magento admin panel. Follow the steps below:<\/p>\n\n\n\n
- \n
- Log in to your Magento Admin Dashboard.<\/li>\n\n\n\n
- Navigate to: Stores<\/strong> > Settings<\/strong> > Configuration<\/strong> > Security<\/strong> > Google reCAPTCHA Storefront<\/strong>.<\/li>\n\n\n\n
- Enter the Site Key and Secret Key for the reCAPTCHA type (v2 or v3) you wish to enable.<\/li>\n\n\n\n
- Save the configuration.<\/li>\n<\/ul>\n\n\n\n
![\"Add](\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/06\/2-Add-Google-reCAPTCHA-in-Magento-2-Admin.png\")
<\/figure>\n\n\n\nStep 3: Create a Magento 2 Module to Display a Basic HTML Form<\/h3>\n\n\n\n
Now follow these instructions to develop a Magento 2 module that outputs a basic HTML form on the storefront.Create a Registration.php <\/strong>file with the below code at app\/code\/Meetanshi\/HyvaRecaptcha <\/strong>directory:<\/p>\n\n\n\n
<?php\n\\Magento\\Framework\\Component\\ComponentRegistrar::register(\n \\Magento\\Framework\\Component\\ComponentRegistrar::MODULE,\n 'Meetanshi_HyvaRecaptcha',\n __DIR__\n);\n<\/pre>\n\n\n\n
Create module.xml<\/strong> file at the location app\/code\/Meetanshi\/HyvaRecaptcha\/etc\/<\/strong> and implement the below code:<\/p>\n\n\n\n
<?xml version=\"1.0\" ?>\n<config xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:Module\/etc\/module.xsd\">\n <module name=\"Meetanshi_HyvaRecaptcha\" setup_version=\"1.0.0\">\n <\/module>\n<\/config>\n<\/pre>\n\n\n\n
Create a routes.xml<\/strong> file at the location app\/code\/Meetanshi\/HyvaRecaptcha\/etc\/frontend<\/strong> with the below code:<\/p>\n\n\n\n
<?xml version=\"1.0\"?>\n<config xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:App\/etc\/routes.xsd\">\n <router id=\"standard\">\n <route id=\"meetanshi_hyvaform\" frontName=\"hyvaform\">\n <module name=\"Meetanshi_HyvaRecaptcha\" \/>\n <\/route>\n <\/router>\n<\/config>\n<\/pre>\n\n\n\n
Now, create the index.php<\/strong> file at the following location app\/code\/Meetanshi\/HyvaRecaptcha\/Controller\/Index<\/strong> and place the below code under it:<\/p>\n\n\n\n
<?php\nnamespace Meetanshi\\HyvaRecaptcha\\Controller\\Index;\n\nuse Magento\\Framework\\App\\Action\\Context;\nuse Magento\\Framework\\View\\Result\\PageFactory;\n\nclass Index extends \\Magento\\Framework\\App\\Action\\Action\n{\n \/** @var \\Magento\\Framework\\View\\Result\\Page *\/\n protected $resultPageFactory;\n\n \/**\n * @param Context $context\n * @param PageFactory $resultPageFactory\n *\/\n public function __construct(\n \\Magento\\Framework\\App\\Action\\Context $context,\n \\Magento\\Framework\\View\\Result\\PageFactory $resultPageFactory\n ) {\n $this->resultPageFactory = $resultPageFactory;\n parent::__construct($context);\n }\n\n \/**\n * Hyva Form\n *\n * @return \\Magento\\Framework\\View\\Result\\PageFactory\n *\/\n public function execute()\n {\n $resultPage = $this->resultPageFactory->create();\n $resultPage->getConfig()\n ->getTitle()\n ->prepend(__('Hyva Form'));\n return $resultPage;\n }\n}\n<\/pre>\n\n\n\nIn frontend layout directories, add a new file called meetanshi_hyvaform_index_index.xml<\/strong> at app\/code\/Meetanshi\/HyvaRecaptcha\/frontend\/layout<\/strong> and implement the mentioned code there:<\/p>\n\n\n\n
<?xml version=\"1.0\"?>\n<page xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" layout=\"1column\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd\">\n <body>\n <referenceContainer name=\"content\">\n <block class=\"Magento\\Framework\\View\\Element\\Template\" name=\"meetanshi_hyvaform\" template=\"Meetanshi_HyvaRecaptcha::hyva\/hyva_custom_form.phtml\" \/>\n <\/referenceContainer>\n <\/body>\n<\/page>\n<\/pre>\n\n\n\n
Create a file named hyva_custom_form.phtml<\/strong> under the path app\/code\/Meetanshi\/HyvaRecaptcha\/view\/frontend\/templates\/hyva<\/strong> and insert the following code inside it:<\/p>\n\n\n\n
<?php\nuse Hyva\\Theme\\ViewModel\\ReCaptcha as HyvaRecaptcha;\n\n\/**\n* @var \\Magento\\Framework\\View\\Element\\Template $block\n* @var \\Magento\\Framework\\Escaper $escaper\n*\/\n?>\n\n<form action=\"<?= $escaper->escapeUrl($block->getUrl('hyva_form\/action\/post')) ?>\"\n method=\"post\"\n id=\"hyva_form\"\n>\n <?= $block->getBlockHtml('formkey') ?>\n\n <div class=\"field field-reserved w-full required\">\n <label class=\"label\" for=\"firstname\">\n <span>First Name<\/span>\n <\/label>\n <div class=\"control\">\n <input type=\"text\" id=\"name\" name=\"name\" title=\"First Name\" class=\"form-input required-entry\">\n <\/div>\n <\/div>\n <div class=\"field field-reserved w-full required\">\n <label class=\"label\" for=\"firstname\">\n <span>Last Name<\/span>\n <\/label>\n <div class=\"control\">\n <input type=\"text\" id=\"name\" name=\"name\" title=\"Last Name\" class=\"form-input required-entry\">\n <\/div>\n <\/div>\n\n\n <!-- Render the Google reCAPTCHA v2 (\u201cI am not a robot\u201d) -->\n <?= $block->getBlockHtml(HyvaRecaptcha::RECAPTCHA_INPUT_FIELD_BLOCK.'_recaptcha') ?>\n\n\n <!-- Render the Google reCAPTCHA v2 Invisible -->\n <?= $block->getBlockHtml(HyvaRecaptcha::RECAPTCHA_INPUT_FIELD_BLOCK.'_invisible') ?>\n\n\n <!-- Render the Google reCAPTCHA v3 Invisible -->\n <?= $block->getBlockHtml(HyvaRecaptcha::RECAPTCHA_INPUT_FIELD_BLOCK) ?>\n\n \n <?= $block->getBlockHtml(HyvaRecaptcha::RECAPTCHA_LEGAL_NOTICE_BLOCK) ?> \n\n\n <div class=\"actions-toolbar\">\n <div class=\"primary\">\n <button type=\"submit\" class=\"action submit primary\">\n <?= $escaper->escapeHtml(__('Action')) ?>\n <\/button>\n <\/div>\n <\/div>\n<\/form>\n<\/pre>\n\n\n\nAfter using the above code, you can check the reCAPTCHA in the frontend by using the below url: http:\/\/<yourhost.com<\/a>>\/hyvaform\/index\/index Or http:\/\/<yourhost.com<\/a>>\/hyvaform<\/p>\n\n\n\n
Based on the reCAPTCHA type you have integrated – it will display in the front end when you open the given URL.<\/p>\n\n\n\n
You can have a look at the output of the above code in the below screenshots:<\/p>\n\n\n\n
reCAPTCHA v2 (\u201cI am not a robot\u201d)<\/p>\n\n\n
\n![\"Output](\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/06\/3-Output-of-the-Code-reCAPTCHA-v2-I-am-not-a-robot.png\")
<\/figure>\n<\/div>\n\n\nreCAPTCA v2 with optional legal notice block<\/p>\n\n\n
\n![\"reCAPTCHA](\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/06\/4-reCAPTCA-v2-with-optional-legal-notice-block.png\")
<\/figure>\n<\/div>\n\n\nSpecifying a separate code block for each reCAPTCHA type:<\/p>\n\n\n\n
Render the Google reCAPTCHA v2 (\u201cI am not a robot\u201d)<\/p>\n\n\n\n
<?= $block->getBlockHtml(HyvaRecaptcha::RECAPTCHA_INPUT_FIELD_BLOCK.'_recaptcha') ?><\/pre>\n\n\n\n
Render the Google reCAPTCHA v2 Invisible <\/p>\n\n\n\n
<?= $block->getBlockHtml(HyvaRecaptcha::RECAPTCHA_INPUT_FIELD_BLOCK.'_invisible') ?><\/pre>\n\n\n\n
Render the Google reCAPTCHA v3 Invisible <\/p>\n\n\n\n
<?= $block->getBlockHtml(HyvaRecaptcha::RECAPTCHA_INPUT_FIELD_BLOCK) ?><\/pre>\n\n\n\n
Now let\u2019s add the legal notice block (optional)<\/p>\n\n\n\n
<?= $block->getBlockHtml(HyvaRecaptcha::RECAPTCHA_LEGAL_NOTICE_BLOCK) ?>\n<\/pre>\n\n\n\n
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\u00e4 theme or a custom integration.<\/p>\n\n\n\n
Just like this, you can create a custom form in Hyv\u00e4<\/a>, going beyond the default Magento 2 limitation.<\/p>\n\n\n\n
Go ahead and try this solution to add the Google reCAPTCHA form in Magento 2<\/p>\n\n\n\n
![\"Hyva](\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/11\/hyva-theme-development-service.png\")
\r\n<\/div>\r\n<\/div><\/p>\n","protected":false},"excerpt":{"rendered":"