{"id":2264,"date":"2025-01-10T13:47:51","date_gmt":"2025-01-10T11:47:51","guid":{"rendered":"https:\/\/plumrocket.com\/learn\/?p=2264"},"modified":"2025-06-18T11:08:05","modified_gmt":"2025-06-18T08:08:05","slug":"how-to-add-google-recaptcha-to-custom-form%e2%80%8b-in-magento-2","status":"publish","type":"post","link":"https:\/\/plumrocket.com\/learn\/magento-2-add-google-recaptcha","title":{"rendered":"How to Add Google reCAPTCHA to Custom Form\u200b in Magento 2"},"content":{"rendered":"\n
\"How<\/figure>\n\n\n\n

Google reCAPTCHA helps protect websites from spam, bot attacks, and other automated form submissions.<\/p>\n\n\n\n

Adding reCAPTCHA to your Magento 2 custom forms adds an essential layer of security, ensuring only genuine user interactions are processed by your site.<\/p>\n\n\n\n

Magento 2 already includes a built-in implementation of Google reCAPTCHA for standard frontend forms, such as:<\/p>\n\n\n\n

  1. Customer Login<\/li>
  2. Forgot Password<\/li>
  3. Create New Customer Account<\/li>
  4. Edit Customer Account<\/li>
  5. Contact Us<\/li>
  6. Product Review<\/li>
  7. Newsletter Subscription<\/li>
  8. Send to Friend<\/li>
  9. Checkout\/Placing Order<\/li>
  10. Coupon Codes, and <\/li>
  11. PayPal PayflowPro payment.<\/li><\/ol>\n\n\n\n

    Additionally, Magento\u2019s flexibility allows us to add Google reCAPTCHA to custom forms as needed. This guide will walk you through the process of configuring Google reCAPTCHA in Magento 2, creating a custom extension for your form, and integrating reCAPTCHA into the form template.<\/p>\n\n\n\n

    How to Add Google reCAPTCHA to Custom Form in Magento 2<\/strong><\/p>\n\n\n\n

    1. Configure Google reCAPTCHA in Magento 2<\/a><\/li>
    2. Create a Custom Extension to Display Your Custom Form<\/a><\/li>
    3. Add the Magento 2 Custom Form to the List of Frontend reCAPTCHA<\/a><\/li>
    4. Integrate Google reCAPTCHA into the Custom Form Template<\/a><\/li>
    5. Build a Controller to Handle Custom Form Submissions<\/a><\/li>
    6. Validate Google reCAPTCHA for the Custom Form in Magento 2<\/a><\/li><\/ol>\n\n\n\n
      \"\"
      \n

      Struggling<\/strong><\/span> to Add Google reCAPTCHA to Custom Forms?<\/strong><\/span><\/p>\n\n\n\n

      Our expert developers can help you seamlessly integrate reCAPTCHA and enhance your form security while minimizing user friction.<\/p>\n\n\n\n

      \n
      Get Help Now<\/a><\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n

      Step 1. \u0421onfigure Google reCAPTCHA on Magento 2<\/h2>\n\n\n\n

      First, register your site at Google reCAPTCHA<\/a>, and select the type of reCAPTCHA you want to use.<\/p>\n\n\n\n

      \"Step<\/figure>\n\n\n\n

      Then, go to Stores > Configuration > Security > Google reCAPTCHA Storefront > reCAPTCHA<\/strong> v2 (“I am not a robot”) \/ reCAPTCHA v2 Invisible \/ reCAPTCHA v3 Invisible<\/strong> and enter the site key and secret key you created on Google reCAPTCHA after registering. Make sure that the setting name in Magento matches the type of Google reCAPTCHA you created (e.g., reCAPTCHA v2 or v3).<\/p>\n\n\n\n

      \"Step<\/figure><\/div>\n\n\n\n

      Step 2. Create a Custom Extension to Display Your Custom Form<\/h2>\n\n\n\n

      We need to create the following files.<\/p>\n\n\n\n

      app\/code\/Vendor\/CustomFormRecaptcha\/registration.php<\/div>
      <?php\n\n\nuse Magento\\Framework\\Component\\ComponentRegistrar;\n\n\nComponentRegistrar::register(\n   ComponentRegistrar::MODULE, 'Vendor_CustomFormRecaptcha',\n   __DIR__\n);\n<\/code><\/pre><\/div>\n\n\n\n
      app\/code\/Vendor\/CustomFormRecaptcha\/etc\/module.xml<\/div>
      <?xml version=\"1.0\"?>\n<config xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\"\n       xsi:noNamespaceSchemaLocation=\"urn:magento:framework:Module\/etc\/module.xsd\">\n   <module name=\"Vendor_CustomFormRecaptcha\"\/>\n<\/config>\n<\/code><\/pre><\/div>\n\n\n\n
      app\/code\/Vendor\/CustomFormRecaptcha\/etc\/frontend\/routes.xml<\/div>
      <?xml version=\"1.0\"?>\n<config xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\"\n        xsi:noNamespaceSchemaLocation=\"urn:magento:framework:App\/etc\/routes.xsd\">\n    <router id=\"standard\">\n        <route id=\"customformrecaptcha\" frontName=\"customformrecaptcha\">\n            <module name=\"Vendor_CustomFormRecaptcha\" \/>\n        <\/route>\n    <\/router>\n<\/config><\/code><\/pre><\/div>\n\n\n\n
      app\/code\/Vendor\/CustomFormRecaptcha\/Controller\/Index\/Index.php<\/div>
      <?php\n\n\nnamespace Vendor\\CustomFormRecaptcha\\Controller\\Index;\n\n\nuse Magento\\Framework\\App\\ActionInterface;\nuse Magento\\Framework\\App\\Action\\Context;\nuse Magento\\Framework\\View\\Result\\PageFactory;\n\n\nclass Index implements ActionInterface\n{\n   \/**\n    * @var PageFactory\n    *\/\n   private $resultPageFactory;\n\n\n   \/**\n    * @var Context\n    *\/\n   private $context;\n\n\n   public function __construct(\n       Context $context,\n       PageFactory $resultPageFactory\n   ) {\n       $this->context = $context;\n       $this->resultPageFactory = $resultPageFactory;\n   }\n\n\n   public function execute()\n   {\n       return $this->resultPageFactory->create();\n   }\n}\n<\/code><\/pre><\/div>\n\n\n\n
      app\/code\/Vendor\/CustomFormRecaptcha\/view\/frontend\/layout\/customformrecaptcha_index_index.xml<\/div>
      <?xml version=\"1.0\"?>\n<page xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" 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\"\n                  name=\"customformrecaptcha\"\n                  template=\"Vendor_CustomFormRecaptcha::form.phtml\"\n           \/>\n       <\/referenceContainer>\n   <\/body>\n<\/page><\/code><\/pre><\/div>\n\n\n\n
      app\/code\/Vendor\/CustomFormRecaptcha\/view\/frontend\/templates\/form.phtml<\/div>
      <?php \/** @var \\Magento\\Framework\\View\\Element\\Template $block *\/ ?>\n<form action=\"\" method=\"post\">\n   <div>\n       <label for=\"name\">Name:<\/label>\n       <input type=\"text\" name=\"name\" id=\"name\" required\/>\n   <\/div>\n   <div>\n       <label for=\"email\">Email:<\/label>\n       <input type=\"email\" name=\"email\" id=\"email\" required\/>\n   <\/div>\n   <div>\n       <button type=\"submit\">Submit<\/button>\n   <\/div>\n   <input name=\"form_key\" type=\"hidden\" value=\"<?php echo $block->getFormKey(); ?>\" \/>\n<\/form>\n<\/code><\/pre><\/div>\n\n\n\n
      After creating the files, run the following commands:<\/p>\n\n\n\n
      <\/div>
      php bin\/magento setup:upgrade\nphp bin\/magento setup:di:compile\nphp bin\/magento setup:static-content:deploy\nphp bin\/magento cache:flush\n<\/code><\/pre><\/div>\n\n\n\n
      Now we can see our form following the link: https:\/\/your-website-url\/customformrecaptcha\/index\/index  <\/p>\n\n\n\n
      \"Step<\/figure><\/div>\n\n\n\n
      Step 3. Add the Magento 2 Custom Form to the List of Frontend reCAPTCHA<\/h2>\n\n\n\n
      Create a file app\/code\/Vendor\/CustomFormRecaptcha\/etc\/adminhtml\/system.xml<\/div>
      <?xml version=\"1.0\"?>\n<config xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:module:Magento_Config:etc\/system_file.xsd\">\n   <system>\n       <section id=\"recaptcha_frontend\">\n           <group id=\"type_for\">\n               <field id=\"customformrecaptcha\" translate=\"label\" type=\"select\" sortOrder=\"600\" showInDefault=\"1\" showInWebsite=\"1\" showInStore=\"0\" canRestore=\"1\">\n                   <label>Enable for Custom Form Recaptcha<\/label>\n                   <source_model>Magento\\ReCaptchaAdminUi\\Model\\OptionSource\\Type<\/source_model>\n               <\/field>\n           <\/group>\n       <\/section>\n   <\/system>\n<\/config>\n<\/code><\/pre><\/div>\n\n\n\n
      Clean magento cache.
      php bin\/magento cache:flush<\/code><\/p>\n\n\n\n
      Go to the Magento Admin panel, navigate to Stores > Configuration > Security > Google reCAPTCHA > Storefront<\/strong>, and you will see an option to enable Google reCAPTCHA for our custom form.<\/p>\n\n\n\n
      \"Step<\/figure>\n\n\n\n
      Step 4. Display Google reCAPTCHA in the Magento 2 Custom Form<\/h2>\n\n\n\n
      Create a reCAPTCHA block in the layout file app\/code\/Vendor\/CustomFormRecaptcha\/view\/frontend\/layout\/customformrecaptcha_index_index.xml<\/code>
      After adding the block, the content of file will be the following:<\/p>\n\n\n\n
      <\/div>
      <?xml version=\"1.0\"?>\n<page xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" 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\"\n                  name=\"customformrecaptcha\"\n                  template=\"Vendor_CustomFormRecaptcha::form.phtml\">\n               <block class=\"Magento\\ReCaptchaUi\\Block\\ReCaptcha\"\n                      name=\"recaptcha\"\n                      after=\"-\"\n                      template=\"Magento_ReCaptchaFrontendUi::recaptcha.phtml\"\n                      ifconfig=\"recaptcha_frontend\/type_for\/customformrecaptcha\">\n                   <arguments>\n                       <argument name=\"recaptcha_for\" xsi:type=\"string\">customformrecaptcha<\/argument>\n                       <argument name=\"jsLayout\" xsi:type=\"array\">\n                           <item name=\"components\" xsi:type=\"array\">\n                               <item name=\"recaptcha\" xsi:type=\"array\">\n                                   <item name=\"component\" xsi:type=\"string\">Magento_ReCaptchaFrontendUi\/js\/reCaptcha<\/item>\n                               <\/item>\n                           <\/item>\n                       <\/argument>\n                   <\/arguments>\n               <\/block>\n           <\/block>\n       <\/referenceContainer>\n   <\/body>\n<\/page>\n<\/code><\/pre><\/div>\n\n\n\n
      Now let’s output the reCAPTCHA block in the form template.<\/p>\n\n\n\n
      The content of the file app\/code\/Vendor\/CustomFormRecaptcha\/view\/frontend\/templates\/form.phtml<\/code> will change to the following:<\/p>\n\n\n\n
      <\/div>
      <?php \/** @var \\Magento\\Framework\\View\\Element\\Template $block *\/ ?>\n<form action=\"<?= $block->getUrl('customformrecaptcha\/index\/post') ?>\" method=\"post\">\n   <div>\n       <label for=\"name\">Name:<\/label>\n       <input type=\"text\" name=\"name\" id=\"name\" required\/>\n   <\/div>\n   <div>\n       <label for=\"email\">Email:<\/label>\n       <input type=\"email\" name=\"email\" id=\"email\" required\/>\n   <\/div>\n   <div>\n       <?php echo $block->getChildHtml('recaptcha'); ?>\n   <\/div>\n   <div>\n       <button type=\"submit\">Submit<\/button>\n   <\/div>\n   <input name=\"form_key\" type=\"hidden\" value=\"<?php echo $block->getFormKey(); ?>\" \/>\n<\/form>\n<\/code><\/pre><\/div>\n\n\n\n
      Now we can see Google reCAPTCHA on our custom form.<\/p>\n\n\n\n
      \"Step<\/figure>\n\n\n\n
      Step 5. Build a Controller to Handle Custom Form Submissions<\/h2>\n\n\n\n
      Create file app\/code\/Vendor\/CustomFormRecaptcha\/Controller\/Index\/Post.php<\/div>
      <?php\n\n\nnamespace Vendor\\CustomFormRecaptcha\\Controller\\Index;\n\n\nuse Magento\\Framework\\App\\Action\\Action;\nuse Magento\\Framework\\App\\Action\\HttpPostActionInterface;\nuse Magento\\Framework\\Controller\\Result\\RedirectFactory;\nuse Magento\\Framework\\Message\\ManagerInterface;\nuse Magento\\Framework\\Exception\\LocalizedException;\n\n\nclass Post extends Action implements HttpPostActionInterface\n{\n   protected $resultRedirectFactory;\n   protected $messageManager;\n\n\n   public function __construct(\n       \\Magento\\Framework\\App\\Action\\Context $context,\n       RedirectFactory $resultRedirectFactory,\n       ManagerInterface $messageManager\n   ) {\n       parent::__construct($context);\n       $this->resultRedirectFactory = $resultRedirectFactory;\n       $this->messageManager = $messageManager;\n   }\n\n\n   public function execute()\n   {\n       $postData = $this->getRequest()->getPostValue();\n\n\n       if ($postData) {\n           try {\n               $this->_eventManager->dispatch('customformrecaptcha_validate_recaptcha', ['request' => $this->getRequest()]);\n               \/\/ Save data\n               $this->messageManager->addSuccessMessage(__('Form submitted successfully.'));\n           } catch (LocalizedException $e) {\n               $this->messageManager->addErrorMessage($e->getMessage());\n           } catch (\\Exception) {\n               $this->messageManager->addErrorMessage(__('An error occurred: %1', $e->getMessage()));\n           }\n       } else {\n           $this->messageManager->addErrorMessage(__('No data received.'));\n       }\n\n\n       return $this->resultRedirectFactory->create()->setPath('*\/*\/');\n   }\n}\n<\/code><\/pre><\/div>\n\n\n\n
      Step 6. Create an Observer to Validate Google reCAPTCHA for the Custom Form in Magento 2<\/h2>\n\n\n\n
      Create file: app\/code\/CustomFormRecaptcha\/Module\/etc\/frontend\/events.xml<\/div>
      <?xml version=\"1.0\"?>\n<config xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework\/Event\/etc\/events.xsd\">\n   <event name=\"customformrecaptcha_validate_recaptcha\">\n       <observer name=\"validate_recaptcha\" instance=\"Vendor\\CustomFormRecaptcha\\Observer\\ValidateRecaptcha\" \/>\n   <\/event>\n<\/config>\n<\/code><\/pre><\/div>\n\n\n\n
      Create file: app\/code\/Vendor\/CustomFormRecaptcha\/Observer\/ValidateRecaptcha.php<\/div>
      \n<?php\n\n\nnamespace Vendor\\CustomFormRecaptcha\\Observer;\n\n\nuse Magento\\Framework\\Event\\Observer;\nuse Magento\\Framework\\Event\\ObserverInterface;\nuse Magento\\Framework\\Exception\\InputException;\nuse Magento\\Framework\\Exception\\LocalizedException;\nuse Magento\\Framework\\ObjectManagerInterface;\nuse Magento\\ReCaptchaUi\\Model\\IsCaptchaEnabledInterface;\nclass ValidateRecaptcha implements ObserverInterface\n{\n   \/**\n    * @var IsCaptchaEnabledInterface\n    *\/\n   private $isCaptchaEnabled;\n\n\n   \/**\n    * @var ObjectManagerInterface\n    *\/\n   private $objectManager;\n\n\n   public function __construct(\n       IsCaptchaEnabledInterface $isCaptchaEnabled,\n       ObjectManagerInterface $objectManager,\n   ) {\n       $this->isCaptchaEnabled = $isCaptchaEnabled;\n       $this->objectManager = $objectManager;\n   }\n\n\n   \/**\n    * @throws InputException\n    *\/\n   public function execute(Observer $observer)\n   {\n       $key = 'customformrecaptcha';\n       $request = $observer->getRequest();\n       if ($this->isCaptchaEnabled->isCaptchaEnabledFor($key)) {\n\n\n           $validationConfigResolver = $this->objectManager->get(\n               \\Magento\\ReCaptchaUi\\Model\\ValidationConfigResolverInterface::class\n           );\n\n\n           $captchaResponseResolver = $this->objectManager->get(\n               \\Magento\\ReCaptchaUi\\Model\\CaptchaResponseResolverInterface::class\n           );\n\n\n           $captchaValidator = $this->objectManager->get(\n               \\Magento\\ReCaptchaValidationApi\\Api\\ValidatorInterface::class\n           );\n\n\n           $validationConfig = $validationConfigResolver->get($key);\n\n\n           try {\n               $reCaptchaResponse = $captchaResponseResolver->resolve($request);\n           } catch (InputException $e) {\n               throw new LocalizedException(__('Please complete the reCAPTCHA validation.'));\n           }\n\n\n           $validationResult = $captchaValidator->isValid($reCaptchaResponse, $validationConfig);\n           if (false === $validationResult->isValid()) {\n               throw new LocalizedException(__('reCAPTCHA validation failed. Please try again.'));\n           }\n       }\n   }\n}\n<\/code><\/pre><\/div>\n\n\n\n
      Conclusion<\/h2>\n\n\n\n
      By taking these simple steps, you improve not just the functionality of your website but also the confidence your customers have in your brand. Keep optimizing and securing your store to provide the best possible experience for your users.<\/p>\n","protected":false},"excerpt":{"rendered":"
      Google reCAPTCHA helps protect websites from spam, bot attacks, and other automated form submissions. <\/p>\n
      Adding reCAPTCHA to your Magento 2 custom forms adds an essential layer of security, ensuring only genuine user interactions are processed by your site.<\/p>\n","protected":false},"author":7,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_mi_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0},"categories":[144],"tags":[],"yoast_head":"\nHow to Add Google reCAPTCHA to Custom Form\u200b in Magento 2<\/title>\n<meta name=\"description\" content=\"Learn how to add Google reCAPTCHA to custom forms in Magento 2 to protect your site from spam and bots with this step-by-step guide.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/plumrocket.com\/learn\/magento-2-add-google-recaptcha\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Add Google reCAPTCHA to Custom Form\u200b in Magento 2\" \/>\n<meta property=\"og:description\" content=\"Learn how to add Google reCAPTCHA to custom forms in Magento 2 to protect your site from spam and bots with this step-by-step guide.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/plumrocket.com\/learn\/magento-2-add-google-recaptcha\" \/>\n<meta property=\"og:site_name\" content=\"Magento Tutorials for Beginners & Professionals\" \/>\n<meta property=\"article:published_time\" content=\"2025-01-10T11:47:51+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-06-18T08:08:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/plumrocket.com\/learn\/wp-content\/uploads\/2025\/01\/add-google-recaptcha-to-custom-form-1.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"6 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/plumrocket.com\/learn\/wp-json\/wp\/v2\/posts\/2264"}],"collection":[{"href":"https:\/\/plumrocket.com\/learn\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/plumrocket.com\/learn\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/plumrocket.com\/learn\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/plumrocket.com\/learn\/wp-json\/wp\/v2\/comments?post=2264"}],"version-history":[{"count":14,"href":"https:\/\/plumrocket.com\/learn\/wp-json\/wp\/v2\/posts\/2264\/revisions"}],"predecessor-version":[{"id":2566,"href":"https:\/\/plumrocket.com\/learn\/wp-json\/wp\/v2\/posts\/2264\/revisions\/2566"}],"wp:attachment":[{"href":"https:\/\/plumrocket.com\/learn\/wp-json\/wp\/v2\/media?parent=2264"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/plumrocket.com\/learn\/wp-json\/wp\/v2\/categories?post=2264"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/plumrocket.com\/learn\/wp-json\/wp\/v2\/tags?post=2264"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}