{"id":5484,"date":"2023-09-29T05:49:46","date_gmt":"2023-09-29T05:49:46","guid":{"rendered":"https:\/\/www.codexworld.com\/?p=5484"},"modified":"2025-06-24T05:49:24","modified_gmt":"2025-06-24T05:49:24","slug":"integrate-google-recaptcha-in-modal-popup-form-with-ajax-using-php","status":"publish","type":"post","link":"https:\/\/www.codexworld.com\/integrate-google-recaptcha-in-modal-popup-form-with-ajax-using-php\/","title":{"rendered":"Integrate Google reCAPTCHA in Modal Popup Form with Ajax using PHP"},"content":{"rendered":"<p><b>Google reCAPTCHA<\/b> is designed to protect websites from spam and abuse. It helps to integrate CAPTCHA functionality into the web page without any hassle. You can <a href=\"https:\/\/www.codexworld.com\/new-google-recaptcha-with-php\/\">add Google reCAPTCHA in HTML form<\/a> and verify the submission using PHP. With the reCAPTCHA widget, the user needs to select the checkbox to verify as a human. The reCAPTCHA checkbox is the best replacement for the generic CAPTCHA code verification that provides a user-friendly way for spam protection.<\/p>\n<p>Google reCAPTCHA can be implemented in the popup box or modal window. You can add reCAPTCHA widget to the HTML form embedded in a dialog box and validate the response with Ajax. In this tutorial, we will show you how to <b>integrate Google reCAPTCHA in modal popup form<\/b> with Ajax and PHP.<\/p>\n<p>In the example <b>Google reCAPTCHA Ajax Form<\/b> script, we will add reCAPTCHA checkbox widget to the contact form in the popup box and validate the response with Ajax submission using PHP.<\/p>\n<ul>\n<li>Build a modal component and add an HTML form element in the lightbox popup.<\/li>\n<li>Add reCAPTCHA widget in popup HTML form.<\/li>\n<li>Submit form data and reCAPTCHA response with jQuery Ajax for server-side processing.<\/li>\n<li>Validate request by verifying the user&#8217;s response with Google reCAPTCHA API.<\/li>\n<li>Retrieve form data and send contact request info via email using PHP.<\/li>\n<\/ul>\n<h2>Generate reCAPTCHA API Keys<\/h2>\n<p>Before getting started, you need to register the domain of your website and generate reCAPTCHA API keys.<\/p>\n<p><b><u>Register a new site:<\/u><\/b><br \/>\nGo to the <a href=\"https:\/\/www.google.com\/recaptcha\/admin\" target=\"_blank\" rel=\"noopener\">Google reCAPTCHA Admin console<\/a> and register domain.<\/p>\n<ul>\n<li><b>Label<\/b> &#8211; Make it easier for you to identify the site in the future.<\/li>\n<li><b>reCAPTCHA type<\/b> &#8211; Select <i>Challenge (v2)<\/i> &raquo; <i>&#8220;I&#8217;m not a robot&#8221; Checkbox<\/i><\/li>\n<li><b>Domains<\/b> &#8211; Specify the domain of the website.<\/li>\n<\/ul>\n<div class=\"img_center\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.codexworld.com\/wp-content\/uploads\/2023\/09\/google-recaptcha-checkbox-admin-register-site-domain-codexworld.png\" alt=\"google-recaptcha-checkbox-admin-register-site-domain-codexworld\" width=\"905\" height=\"879\" class=\"alignnone size-full wp-image-5485\" srcset=\"https:\/\/www.codexworld.com\/wp-content\/uploads\/2023\/09\/google-recaptcha-checkbox-admin-register-site-domain-codexworld.png 905w, https:\/\/www.codexworld.com\/wp-content\/uploads\/2023\/09\/google-recaptcha-checkbox-admin-register-site-domain-codexworld-300x291.png 300w, https:\/\/www.codexworld.com\/wp-content\/uploads\/2023\/09\/google-recaptcha-checkbox-admin-register-site-domain-codexworld-768x746.png 768w, https:\/\/www.codexworld.com\/wp-content\/uploads\/2023\/09\/google-recaptcha-checkbox-admin-register-site-domain-codexworld-350x340.png 350w, https:\/\/www.codexworld.com\/wp-content\/uploads\/2023\/09\/google-recaptcha-checkbox-admin-register-site-domain-codexworld-320x311.png 320w, https:\/\/www.codexworld.com\/wp-content\/uploads\/2023\/09\/google-recaptcha-checkbox-admin-register-site-domain-codexworld-380x369.png 380w\" sizes=\"auto, (max-width: 905px) 100vw, 905px\" \/><\/div>\n<p>Click SUBMIT to proceed.<\/p>\n<p><b><u>Get Site Key and Secret Key:<\/u><\/b><br \/>\nAfter the submission, your site will be registered with reCAPTCHA v2 and the API keys will be generated. The Site Key and Secret Key need to be specified in the script at the time of calling Google reCAPTCHA API.<\/p>\n<ul>\n<li><b>Site Key<\/b> &#8211; This key is used in the client-side HTML code.<\/li>\n<li><b>Secret Key<\/b> &#8211; This key helps to authorize communication between your site and the reCAPTCHA server and is used in the server-side script for the user&#8217;s response verification.<\/li>\n<\/ul>\n<div class=\"img_center\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.codexworld.com\/wp-content\/uploads\/2022\/10\/google-recaptcha-v3-api-keys-create-site-secret-key-codexworld-1024x663.png\" alt=\"google-recaptcha-v3-api-keys-create-site-secret-key-codexworld\" width=\"960\" height=\"622\" class=\"alignnone size-large wp-image-5119\" srcset=\"https:\/\/www.codexworld.com\/wp-content\/uploads\/2022\/10\/google-recaptcha-v3-api-keys-create-site-secret-key-codexworld-1024x663.png 1024w, https:\/\/www.codexworld.com\/wp-content\/uploads\/2022\/10\/google-recaptcha-v3-api-keys-create-site-secret-key-codexworld-300x194.png 300w, https:\/\/www.codexworld.com\/wp-content\/uploads\/2022\/10\/google-recaptcha-v3-api-keys-create-site-secret-key-codexworld-768x498.png 768w, https:\/\/www.codexworld.com\/wp-content\/uploads\/2022\/10\/google-recaptcha-v3-api-keys-create-site-secret-key-codexworld-200x130.png 200w, https:\/\/www.codexworld.com\/wp-content\/uploads\/2022\/10\/google-recaptcha-v3-api-keys-create-site-secret-key-codexworld-346x224.png 346w, https:\/\/www.codexworld.com\/wp-content\/uploads\/2022\/10\/google-recaptcha-v3-api-keys-create-site-secret-key-codexworld.png 1190w\" sizes=\"auto, (max-width: 960px) 100vw, 960px\" \/><\/div>\n<p>Copy the <b>Site Key<\/b> and <b>Secret Key<\/b> for later use in the Google reCAPTCHA v2 API integration code.<\/p>\n<h2>Create Contact Form in Popup Box<\/h2>\n<p>At first, we need to create a modal component to build a popup box and embed an HTML form on it. In this example, we will use Bootstrap&#8217;s modal component for the popup window.<\/p>\n<p><b>1.<\/b> Include jQuery library.<\/p>\n<pre style=\"color: rgb(95, 94, 78);\"><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"js\/jquery.min.js\"<\/span>&gt;<\/span><span class=\"undefined\"><\/span><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span>&gt;<\/span><\/pre>\n<p><b>2.<\/b> Include the CSS and JS library files of Bootstrap.<\/p>\n<pre style=\"color: rgb(95, 94, 78);\"><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">link<\/span> <span class=\"hljs-attr\">rel<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"stylesheet\"<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"css\/bootstrap.min.css\"<\/span>&gt;<\/span>\r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"js\/bootstrap.min.js\"<\/span>&gt;<\/span><span class=\"undefined\"><\/span><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span>&gt;<\/span><\/pre>\n<p><b>3.<\/b> Create a button element that will trigger the modal popup.<\/p>\n<pre style=\"color: rgb(95, 94, 78);\"><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">button<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"button\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"btn btn-primary\"<\/span> <span class=\"hljs-attr\">data-bs-toggle<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"modal\"<\/span> <span class=\"hljs-attr\">data-bs-target<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"#exampleModal\"<\/span>&gt;<\/span>\r\n    Launch Contact Modal\r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">button<\/span>&gt;<\/span><\/pre>\n<p><b>4.<\/b> Define HTML elements to build a modal window.<\/p>\n<ul>\n<li>Add form and input elements to the popup box.<\/li>\n<\/ul>\n<pre style=\"color: rgb(95, 94, 78);\"><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"modal fade\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"exampleModal\"<\/span> <span class=\"hljs-attr\">tabindex<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"-1\"<\/span> <span class=\"hljs-attr\">aria-labelledby<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"exampleModalLabel\"<\/span> <span class=\"hljs-attr\">aria-hidden<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"true\"<\/span>&gt;<\/span>\r\n    <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"modal-dialog\"<\/span>&gt;<\/span>\r\n        <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"modal-content\"<\/span>&gt;<\/span>\r\n            <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"modal-header\"<\/span>&gt;<\/span>\r\n                <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">h1<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"modal-title fs-5\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"exampleModalLabel\"<\/span>&gt;<\/span>Contact Us<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">h1<\/span>&gt;<\/span>\r\n                <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">button<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"button\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"btn-close\"<\/span> <span class=\"hljs-attr\">data-bs-dismiss<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"modal\"<\/span> <span class=\"hljs-attr\">aria-label<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"Close\"<\/span>&gt;<\/span><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">button<\/span>&gt;<\/span>\r\n            <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span>&gt;<\/span>\r\n            <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">form<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"contactForm\"<\/span>&gt;<\/span>\r\n            <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"modal-body\"<\/span>&gt;<\/span>\r\n                <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"frm-status\"<\/span>&gt;<\/span><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span>&gt;<\/span>\r\n                <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"mb-3\"<\/span>&gt;<\/span>\r\n                    <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">label<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"form-label\"<\/span>&gt;<\/span>Name<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">label<\/span>&gt;<\/span>\r\n                    <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">input<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"text\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"form-control\"<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"name\"<\/span> <span class=\"hljs-attr\">placeholder<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"Enter your name\"<\/span> <span class=\"hljs-attr\">required<\/span>&gt;<\/span>\r\n                <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span>&gt;<\/span>\r\n                <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"mb-3\"<\/span>&gt;<\/span>\r\n                    <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">label<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"form-label\"<\/span>&gt;<\/span>Email<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">label<\/span>&gt;<\/span>\r\n                    <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">input<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"email\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"form-control\"<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"email\"<\/span> <span class=\"hljs-attr\">placeholder<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"Enter email address\"<\/span> <span class=\"hljs-attr\">required<\/span>&gt;<\/span>\r\n                <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span>&gt;<\/span>\r\n                <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"mb-3\"<\/span>&gt;<\/span>\r\n                    <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">label<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"form-label\"<\/span>&gt;<\/span>Message<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">label<\/span>&gt;<\/span>\r\n                    <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">textarea<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"form-control\"<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"message\"<\/span> <span class=\"hljs-attr\">rows<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"3\"<\/span> <span class=\"hljs-attr\">placeholder<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"Your message here...\"<\/span> <span class=\"hljs-attr\">required<\/span>&gt;<\/span><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">textarea<\/span>&gt;<\/span>\r\n                <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span>&gt;<\/span>\r\n            <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span>&gt;<\/span>\r\n            <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"modal-footer\"<\/span>&gt;<\/span>\r\n                <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">button<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"submit\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"btn btn-primary\"<\/span>&gt;<\/span>Submit<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">button<\/span>&gt;<\/span>\r\n            <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span>&gt;<\/span>\r\n            <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">form<\/span>&gt;<\/span>\r\n        <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span>&gt;<\/span>\r\n    <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span>&gt;<\/span>\r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span>&gt;<\/span><\/pre>\n<h2>Add reCAPTCHA Widget in Popup Form<\/h2>\n<p>In the previous step, we created a modal popup component and added the form elements in the popup. Now, we will add the reCAPTCHA widget in the popup form.<\/p>\n<p><b>1.<\/b> Load the reCAPTCHA JavaScript API library before the HTML form popup element.<\/p>\n<pre style=\"color: rgb(95, 94, 78);\"><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"https:\/\/www.google.com\/recaptcha\/api.js\"<\/span> <span class=\"hljs-attr\">async<\/span> <span class=\"hljs-attr\">defer<\/span>&gt;<\/span><span class=\"undefined\"><\/span><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span>&gt;<\/span><\/pre>\n<p><b>2.<\/b> Add <code>g-recaptcha<\/code> tag under the popup form where you want to display the reCAPTCHA checkbox widget.<\/p>\n<ul>\n<li>This tag should be a DIV element with class name <code>g-recaptcha<\/code>.<\/li>\n<li>The Site Key of the reCAPTCHA API needs to be specified in the <code>data-sitekey<\/code> attribute.<\/li>\n<\/ul>\n<pre style=\"color: rgb(95, 94, 78);\"><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"mb-3\"<\/span>&gt;<\/span>\r\n    <span class=\"hljs-comment\" style=\"color: rgb(108, 107, 90);\">&lt;!-- reCAPTCHA widget --&gt;<\/span>\r\n    <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"g-recaptcha\"<\/span> <span class=\"hljs-attr\">data-sitekey<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"Your_reCAPTCHA_Site_Key\"<\/span>&gt;<\/span><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span>&gt;<\/span>\r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span>&gt;<\/span><\/pre>\n<h2>Popup Form Submission via Ajax using jQuery<\/h2>\n<p>We will use the Ajax method to submit the form data and reCAPTCHA response to the server-side script (<code>form_submit.php<\/code>).<\/p>\n<ul>\n<li>Use <b>jQuery ajax()<\/b> method to post form data via Ajax HTTP request.<\/li>\n<li>Select values from all input elements including reCAPTCHA response using <b>jQuery serialize()<\/b> method.<\/li>\n<li>Once the request is processed by the server-side script and the response comes, reset the form and reinitialize the reCAPTCHA widget.<\/li>\n<li>Display Captcha verification status in popup form.<\/li>\n<\/ul>\n<pre style=\"color: rgb(95, 94, 78);\"><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span>&gt;<\/span>\r\n<span style=\"color: rgb(110, 107, 94);\"><span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ Form submit handler<\/span>\r\n<span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">document<\/span>.querySelector(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"#contactForm\"<\/span>).addEventListener(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"submit\"<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">function<\/span>(<span class=\"hljs-params\" style=\"color: rgb(182, 86, 17);\">e<\/span>)<\/span>{\r\n    e.preventDefault();\r\n    \r\n    <span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ Post form data via ajax request<\/span>\r\n    $.ajax({\r\n        type:<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'POST'<\/span>,\r\n        url:<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'form_submit.php'<\/span>,\r\n        dataType: <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"json\"<\/span>,\r\n        data: $(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'#contactForm'<\/span>).serialize()+<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'&amp;submit=1'<\/span>,\r\n        beforeSend: <span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">function<\/span> (<span class=\"hljs-params\" style=\"color: rgb(182, 86, 17);\"><\/span>) <\/span>{\r\n            $(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\":input\"<\/span>).prop(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"disabled\"<\/span>, <span class=\"hljs-literal\" style=\"color: rgb(182, 86, 17);\">true<\/span>);\r\n            $(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">':button[type=\"submit\"]'<\/span>).prop(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"disabled\"<\/span>, <span class=\"hljs-literal\" style=\"color: rgb(182, 86, 17);\">true<\/span>);\r\n            $(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">':button[type=\"submit\"]'<\/span>).text(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'Submitting...'<\/span>);\r\n        },\r\n        success:<span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">function<\/span>(<span class=\"hljs-params\" style=\"color: rgb(182, 86, 17);\">data<\/span>)<\/span>{\r\n            <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">if<\/span>(data.status == <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">1<\/span>){\r\n                $(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'#contactForm'<\/span>)[<span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">0<\/span>].reset();\r\n                $(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'.frm-status'<\/span>).html(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'&lt;div class=\"alert alert-success\"&gt;'<\/span>+data.msg+<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'&lt;\/div&gt;'<\/span>);\r\n            }<span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">else<\/span>{\r\n                $(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'.frm-status'<\/span>).html(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'&lt;div class=\"alert alert-danger\"&gt;'<\/span>+data.msg+<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'&lt;\/div&gt;'<\/span>);\r\n            }\r\n\r\n            $(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">':button[type=\"submit\"]'<\/span>).prop(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"disabled\"<\/span>, <span class=\"hljs-literal\" style=\"color: rgb(182, 86, 17);\">false<\/span>);\r\n            $(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">':button[type=\"submit\"]'<\/span>).text(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'Submit'<\/span>);\r\n            $(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\":input\"<\/span>).prop(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"disabled\"<\/span>, <span class=\"hljs-literal\" style=\"color: rgb(182, 86, 17);\">false<\/span>);\r\n\r\n            <span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ Reinitialize recaptcha widget<\/span>\r\n            grecaptcha.reset();\r\n        }\r\n    });\r\n});<\/span>\r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span>&gt;<\/span><\/pre>\n<h2>Verify reCAPTCHA Response with PHP<\/h2>\n<p>In this server-side script (<code>form_submit.php<\/code>), we will verify the user&#8217;s response and process the contact request.<\/p>\n<ul>\n<li>Validate form input fields to check whether the user fills in the correct values.<\/li>\n<li>Use the <code>g-recaptcha-response<\/code> POST parameter to get the user&#8217;s response token from the client-side reCAPTCHA widget.<\/li>\n<li>Execute a cURL request to verify the response token with reCAPTCHA API using PHP.<\/li>\n<li>Pass the Site Secret Key (<code>secret<\/code>), response token (<code>response<\/code>), and user&#8217;s IP (<code>remoteip<\/code>) in POST parameters.<\/li>\n<li>If the reCAPTCHA response is valid and successful, process the contact form submission request further (such as sending an email notification to the site admin). <\/li>\n<li>Return the status response in JSON format.<\/li>\n<\/ul>\n<pre><span style=\"color: #0000BB\">&lt;?php <br \/><\/span><span style=\"color: #FF8000\">\/\/&nbsp;Google&nbsp;reCAPTCHA&nbsp;API&nbsp;keys&nbsp;settings <br \/><\/span><span style=\"color: #0000BB\">$secretKey&nbsp;&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #DD0000\">'Your_reCaptcha_Secret_Key'<\/span><span style=\"color: #007700\">;&nbsp; <br \/> <br \/><\/span><span style=\"color: #FF8000\">\/\/&nbsp;Email&nbsp;settings&nbsp; <br \/><\/span><span style=\"color: #0000BB\">$recipientEmail&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #DD0000\">'admin@example.com'<\/span><span style=\"color: #007700\">;&nbsp; <br \/> <br \/><\/span><span style=\"color: #FF8000\">\/\/&nbsp;If&nbsp;form&nbsp;data&nbsp;is&nbsp;submitted&nbsp;by&nbsp;AJAX&nbsp;request <br \/><\/span><span style=\"color: #007700\">if(isset(<\/span><span style=\"color: #0000BB\">$_POST<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'submit'<\/span><span style=\"color: #007700\">])){ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;Define&nbsp;default&nbsp;response <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$response&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;array( <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #DD0000\">'status'&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #0000BB\">0<\/span><span style=\"color: #007700\">, <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #DD0000\">'msg'&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #DD0000\">'Something&nbsp;went&nbsp;wrong,&nbsp;please&nbsp;try&nbsp;again&nbsp;after&nbsp;some&nbsp;time.' <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">); <br \/>&nbsp;&nbsp;&nbsp;&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;Retrieve&nbsp;value&nbsp;from&nbsp;the&nbsp;form&nbsp;input&nbsp;fields&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$name&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">trim<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$_POST<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'name'<\/span><span style=\"color: #007700\">]);&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$email&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">trim<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$_POST<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'email'<\/span><span style=\"color: #007700\">]);&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$message&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">trim<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$_POST<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'message'<\/span><span style=\"color: #007700\">]);&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$valErr&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #DD0000\">''<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;if(empty(<\/span><span style=\"color: #0000BB\">$name<\/span><span style=\"color: #007700\">)){ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$valErr&nbsp;<\/span><span style=\"color: #007700\">.=&nbsp;<\/span><span style=\"color: #DD0000\">'Please&nbsp;enter&nbsp;your&nbsp;name.&lt;br\/&gt;'<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;} <br \/>&nbsp;&nbsp;&nbsp;&nbsp;if(empty(<\/span><span style=\"color: #0000BB\">$email<\/span><span style=\"color: #007700\">)&nbsp;||&nbsp;!<\/span><span style=\"color: #0000BB\">filter_var<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$email<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">FILTER_VALIDATE_EMAIL<\/span><span style=\"color: #007700\">)){ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$valErr&nbsp;<\/span><span style=\"color: #007700\">.=&nbsp;<\/span><span style=\"color: #DD0000\">'Please&nbsp;enter&nbsp;a&nbsp;valid&nbsp;email.&lt;br\/&gt;'<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;} <br \/>&nbsp;&nbsp;&nbsp;&nbsp;if(empty(<\/span><span style=\"color: #0000BB\">$message<\/span><span style=\"color: #007700\">)){ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$valErr&nbsp;<\/span><span style=\"color: #007700\">.=&nbsp;<\/span><span style=\"color: #DD0000\">'Please&nbsp;enter&nbsp;your&nbsp;message.&lt;br\/&gt;'<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;} <br \/> <br \/>&nbsp;&nbsp;&nbsp;&nbsp;if(empty(<\/span><span style=\"color: #0000BB\">$valErr<\/span><span style=\"color: #007700\">)){ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;Validate&nbsp;reCAPTCHA&nbsp;response&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">if(!empty(<\/span><span style=\"color: #0000BB\">$_POST<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'g-recaptcha-response'<\/span><span style=\"color: #007700\">])){&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;Google&nbsp;reCAPTCHA&nbsp;verification&nbsp;API&nbsp;Request&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$api_url&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #DD0000\">'https:\/\/www.google.com\/recaptcha\/api\/siteverify'<\/span><span style=\"color: #007700\">;&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$resq_data&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;array(&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #DD0000\">'secret'&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #0000BB\">$secretKey<\/span><span style=\"color: #007700\">,&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #DD0000\">'response'&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #0000BB\">$_POST<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'g-recaptcha-response'<\/span><span style=\"color: #007700\">],&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #DD0000\">'remoteip'&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #0000BB\">$_SERVER<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'REMOTE_ADDR'<\/span><span style=\"color: #007700\">] <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;);&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;Initialize&nbsp;cURL&nbsp;request <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$curlConfig&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;array(&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">CURLOPT_URL&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #0000BB\">$api_url<\/span><span style=\"color: #007700\">,&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">CURLOPT_POST&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #0000BB\">true<\/span><span style=\"color: #007700\">,&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">CURLOPT_RETURNTRANSFER&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #0000BB\">true<\/span><span style=\"color: #007700\">,&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">CURLOPT_POSTFIELDS&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #0000BB\">$resq_data<\/span><span style=\"color: #007700\">,&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">CURLOPT_SSL_VERIFYPEER&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #0000BB\">false&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">);&nbsp; <br \/>&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$ch&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">curl_init<\/span><span style=\"color: #007700\">();&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">curl_setopt_array<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$ch<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$curlConfig<\/span><span style=\"color: #007700\">);&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$response&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">curl_exec<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$ch<\/span><span style=\"color: #007700\">);&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(<\/span><span style=\"color: #0000BB\">curl_errno<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$ch<\/span><span style=\"color: #007700\">))&nbsp;{&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$api_error&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">curl_error<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$ch<\/span><span style=\"color: #007700\">);&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">curl_close<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$ch<\/span><span style=\"color: #007700\">);&nbsp; <br \/>&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;Decode&nbsp;JSON&nbsp;data&nbsp;of&nbsp;API&nbsp;response&nbsp;in&nbsp;array&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$responseData&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">json_decode<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$response<\/span><span style=\"color: #007700\">);&nbsp; <br \/>&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;If&nbsp;the&nbsp;reCAPTCHA&nbsp;API&nbsp;response&nbsp;is&nbsp;valid&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">if(!empty(<\/span><span style=\"color: #0000BB\">$responseData<\/span><span style=\"color: #007700\">)&nbsp;&amp;&amp;&nbsp;<\/span><span style=\"color: #0000BB\">$responseData<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">success<\/span><span style=\"color: #007700\">){&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;Send&nbsp;email&nbsp;notification&nbsp;to&nbsp;the&nbsp;site&nbsp;admin&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$to&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$recipientEmail<\/span><span style=\"color: #007700\">;&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$subject&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #DD0000\">'New&nbsp;Contact&nbsp;Request&nbsp;Submitted'<\/span><span style=\"color: #007700\">;&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$htmlContent&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #DD0000\">\"&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h4&gt;Contact&nbsp;request&nbsp;details&lt;\/h4&gt;&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;&lt;b&gt;Name:&nbsp;&lt;\/b&gt;\"<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">$name<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #DD0000\">\"&lt;\/p&gt;&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;&lt;b&gt;Email:&nbsp;&lt;\/b&gt;\"<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">$email<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #DD0000\">\"&lt;\/p&gt;&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;&lt;b&gt;Message:&nbsp;&lt;\/b&gt;\"<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">$message<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #DD0000\">\"&lt;\/p&gt;&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\"<\/span><span style=\"color: #007700\">;&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;Always&nbsp;set&nbsp;content-type&nbsp;when&nbsp;sending&nbsp;HTML&nbsp;email&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$headers&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #DD0000\">\"MIME-Version:&nbsp;1.0\"&nbsp;<\/span><span style=\"color: #007700\">.&nbsp;<\/span><span style=\"color: #DD0000\">\"\\r\\n\"<\/span><span style=\"color: #007700\">;&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$headers&nbsp;<\/span><span style=\"color: #007700\">.=&nbsp;<\/span><span style=\"color: #DD0000\">\"Content-type:text\/html;charset=UTF-8\"&nbsp;<\/span><span style=\"color: #007700\">.&nbsp;<\/span><span style=\"color: #DD0000\">\"\\r\\n\"<\/span><span style=\"color: #007700\">;&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;Sender&nbsp;info&nbsp;header&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$headers&nbsp;<\/span><span style=\"color: #007700\">.=&nbsp;<\/span><span style=\"color: #DD0000\">'From:'<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">$name<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #DD0000\">'&nbsp;&lt;'<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">$email<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #DD0000\">'&gt;'&nbsp;<\/span><span style=\"color: #007700\">.&nbsp;<\/span><span style=\"color: #DD0000\">\"\\r\\n\"<\/span><span style=\"color: #007700\">;&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;Send&nbsp;email&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">@<\/span><span style=\"color: #0000BB\">mail<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$to<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$subject<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$htmlContent<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$headers<\/span><span style=\"color: #007700\">);&nbsp; <br \/> <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$response&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;array( <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #DD0000\">'status'&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #0000BB\">1<\/span><span style=\"color: #007700\">, <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #DD0000\">'msg'&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #DD0000\">'Thank&nbsp;you!&nbsp;Your&nbsp;contact&nbsp;request&nbsp;has&nbsp;been&nbsp;submitted&nbsp;successfully.' <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">); <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}else{ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$response<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'msg'<\/span><span style=\"color: #007700\">]&nbsp;=&nbsp;!empty(<\/span><span style=\"color: #0000BB\">$api_error<\/span><span style=\"color: #007700\">)?<\/span><span style=\"color: #0000BB\">$api_error<\/span><span style=\"color: #007700\">:<\/span><span style=\"color: #DD0000\">'The&nbsp;reCAPTCHA&nbsp;verification&nbsp;failed,&nbsp;please&nbsp;try&nbsp;again.'<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}else{ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$response<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'msg'<\/span><span style=\"color: #007700\">]&nbsp;=&nbsp;<\/span><span style=\"color: #DD0000\">'Please&nbsp;check&nbsp;the&nbsp;reCAPTCHA&nbsp;checkbox.'<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} <br \/>&nbsp;&nbsp;&nbsp;&nbsp;}else{ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$valErr&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;!empty(<\/span><span style=\"color: #0000BB\">$valErr<\/span><span style=\"color: #007700\">)?<\/span><span style=\"color: #DD0000\">'&lt;br\/&gt;'<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">trim<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$valErr<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #DD0000\">'&lt;br\/&gt;'<\/span><span style=\"color: #007700\">):<\/span><span style=\"color: #DD0000\">''<\/span><span style=\"color: #007700\">;&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$response<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'msg'<\/span><span style=\"color: #007700\">]&nbsp;=&nbsp;<\/span><span style=\"color: #DD0000\">'Please&nbsp;fill&nbsp;all&nbsp;the&nbsp;mandatory&nbsp;fields:'<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">$valErr<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;} <br \/>&nbsp;&nbsp;&nbsp;&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;Return&nbsp;response <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">echo&nbsp;<\/span><span style=\"color: #0000BB\">json_encode<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$response<\/span><span style=\"color: #007700\">); <br \/>} <br \/><\/span><span style=\"color: #0000BB\">?&gt;<\/span><\/pre>\n<p class=\"seeAlso\"><span><\/span><a href=\"https:\/\/www.codexworld.com\/integrate-google-recaptcha-v3-in-html-form-with-php\/\">Integrate Google reCAPTCHA v3 in HTML Form with PHP<\/a><\/p>\n<h2>Conclusion<\/h2>\n<p>The popup element is very useful to display multiple sections on a single web page. Using Bootstrap&#8217;s JavaScript modal plugin, you can add a dialog window to the web page with HTML and CSS. This example code helps you to protect the form on the popup using the reCAPTCHA checkbox in HTML. Here we have used contact form elements, but you can add any type of form (login, registration, etc.) to popup and integrate Google reCAPTCHA protection to Ajax form in popup box.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Google reCAPTCHA is designed to protect websites from spam and abuse. It helps to integrate CAPTCHA functionality into the web page without any hassle. You can add Google reCAPTCHA in HTML form and verify the <\/p>\n","protected":false},"author":1,"featured_media":5488,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[7],"tags":[28,250,208,21,16,166,14],"class_list":["post-5484","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ajax","tag-ajax","tag-api","tag-captcha","tag-google-recaptcha","tag-jquery","tag-library","tag-php","cat-7-id","has_thumb"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Integrate Google reCAPTCHA in Modal Popup Form with Ajax using PHP - CodexWorld<\/title>\n<meta name=\"description\" content=\"Google reCAPTCHA checkbox integration in popup box - Add CAPTCHA functionality to Ajax form in modal dialog window with reCAPTCHA API using PHP. Example code to integrate Google reCAPTCHA v2 API in lightbox popup with Ajax using jQuery.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.codexworld.com\/integrate-google-recaptcha-in-modal-popup-form-with-ajax-using-php\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Integrate Google reCAPTCHA in Modal Popup Form with Ajax using PHP - CodexWorld\" \/>\n<meta property=\"og:description\" content=\"Google reCAPTCHA checkbox integration in popup box - Add CAPTCHA functionality to Ajax form in modal dialog window with reCAPTCHA API using PHP. Example code to integrate Google reCAPTCHA v2 API in lightbox popup with Ajax using jQuery.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codexworld.com\/integrate-google-recaptcha-in-modal-popup-form-with-ajax-using-php\/\" \/>\n<meta property=\"og:site_name\" content=\"CodexWorld\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codexworld\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/codexworld\" \/>\n<meta property=\"article:published_time\" content=\"2023-09-29T05:49:46+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-06-24T05:49:24+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codexworld.com\/wp-content\/uploads\/2023\/09\/integrate-google-recaptcha-checkbox-in-modal-popup-form-with-ajax-using-php-codexworld.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"CodexWorld\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@codexworldblog\" \/>\n<meta name=\"twitter:site\" content=\"@codexworldweb\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"CodexWorld\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/integrate-google-recaptcha-in-modal-popup-form-with-ajax-using-php\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/integrate-google-recaptcha-in-modal-popup-form-with-ajax-using-php\\\/\"},\"author\":{\"name\":\"CodexWorld\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\"},\"headline\":\"Integrate Google reCAPTCHA in Modal Popup Form with Ajax using PHP\",\"datePublished\":\"2023-09-29T05:49:46+00:00\",\"dateModified\":\"2025-06-24T05:49:24+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/integrate-google-recaptcha-in-modal-popup-form-with-ajax-using-php\\\/\"},\"wordCount\":853,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/integrate-google-recaptcha-in-modal-popup-form-with-ajax-using-php\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2023\\\/09\\\/integrate-google-recaptcha-checkbox-in-modal-popup-form-with-ajax-using-php-codexworld.png\",\"keywords\":[\"Ajax\",\"API\",\"Captcha\",\"Google reCAPTCHA\",\"jQuery\",\"Library\",\"PHP\"],\"articleSection\":[\"Ajax\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/integrate-google-recaptcha-in-modal-popup-form-with-ajax-using-php\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/integrate-google-recaptcha-in-modal-popup-form-with-ajax-using-php\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/integrate-google-recaptcha-in-modal-popup-form-with-ajax-using-php\\\/\",\"name\":\"Integrate Google reCAPTCHA in Modal Popup Form with Ajax using PHP - CodexWorld\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/integrate-google-recaptcha-in-modal-popup-form-with-ajax-using-php\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/integrate-google-recaptcha-in-modal-popup-form-with-ajax-using-php\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2023\\\/09\\\/integrate-google-recaptcha-checkbox-in-modal-popup-form-with-ajax-using-php-codexworld.png\",\"datePublished\":\"2023-09-29T05:49:46+00:00\",\"dateModified\":\"2025-06-24T05:49:24+00:00\",\"description\":\"Google reCAPTCHA checkbox integration in popup box - Add CAPTCHA functionality to Ajax form in modal dialog window with reCAPTCHA API using PHP. Example code to integrate Google reCAPTCHA v2 API in lightbox popup with Ajax using jQuery.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/integrate-google-recaptcha-in-modal-popup-form-with-ajax-using-php\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/integrate-google-recaptcha-in-modal-popup-form-with-ajax-using-php\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/integrate-google-recaptcha-in-modal-popup-form-with-ajax-using-php\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2023\\\/09\\\/integrate-google-recaptcha-checkbox-in-modal-popup-form-with-ajax-using-php-codexworld.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2023\\\/09\\\/integrate-google-recaptcha-checkbox-in-modal-popup-form-with-ajax-using-php-codexworld.png\",\"width\":1920,\"height\":1080,\"caption\":\"integrate-google-recaptcha-checkbox-in-modal-popup-form-with-ajax-using-php-codexworld\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/integrate-google-recaptcha-in-modal-popup-form-with-ajax-using-php\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.codexworld.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Integrate Google reCAPTCHA in Modal Popup Form with Ajax using PHP\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/\",\"name\":\"CodexWorld\",\"description\":\"Web &amp; Mobile App Development Company\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.codexworld.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\",\"name\":\"CodexWorld\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/codexworld-logo.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/codexworld-logo.png\",\"width\":200,\"height\":19,\"caption\":\"CodexWorld\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/codexworld\",\"https:\\\/\\\/x.com\\\/codexworldweb\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/codexworld\",\"https:\\\/\\\/www.youtube.com\\\/codexworld\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\",\"name\":\"CodexWorld\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"caption\":\"CodexWorld\"},\"description\":\"CodexWorld is a programming blog, one-stop destination for web professionals \u2014 developers, programmers, freelancers, and site owners.\",\"sameAs\":[\"http:\\\/\\\/www.codexworld.com\",\"https:\\\/\\\/www.facebook.com\\\/codexworld\",\"https:\\\/\\\/x.com\\\/codexworldblog\"],\"url\":\"https:\\\/\\\/www.codexworld.com\\\/author\\\/nitya192265\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Integrate Google reCAPTCHA in Modal Popup Form with Ajax using PHP - CodexWorld","description":"Google reCAPTCHA checkbox integration in popup box - Add CAPTCHA functionality to Ajax form in modal dialog window with reCAPTCHA API using PHP. Example code to integrate Google reCAPTCHA v2 API in lightbox popup with Ajax using jQuery.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.codexworld.com\/integrate-google-recaptcha-in-modal-popup-form-with-ajax-using-php\/","og_locale":"en_US","og_type":"article","og_title":"Integrate Google reCAPTCHA in Modal Popup Form with Ajax using PHP - CodexWorld","og_description":"Google reCAPTCHA checkbox integration in popup box - Add CAPTCHA functionality to Ajax form in modal dialog window with reCAPTCHA API using PHP. Example code to integrate Google reCAPTCHA v2 API in lightbox popup with Ajax using jQuery.","og_url":"https:\/\/www.codexworld.com\/integrate-google-recaptcha-in-modal-popup-form-with-ajax-using-php\/","og_site_name":"CodexWorld","article_publisher":"https:\/\/www.facebook.com\/codexworld","article_author":"https:\/\/www.facebook.com\/codexworld","article_published_time":"2023-09-29T05:49:46+00:00","article_modified_time":"2025-06-24T05:49:24+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2023\/09\/integrate-google-recaptcha-checkbox-in-modal-popup-form-with-ajax-using-php-codexworld.png","type":"image\/png"}],"author":"CodexWorld","twitter_card":"summary_large_image","twitter_creator":"@codexworldblog","twitter_site":"@codexworldweb","twitter_misc":{"Written by":"CodexWorld","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codexworld.com\/integrate-google-recaptcha-in-modal-popup-form-with-ajax-using-php\/#article","isPartOf":{"@id":"https:\/\/www.codexworld.com\/integrate-google-recaptcha-in-modal-popup-form-with-ajax-using-php\/"},"author":{"name":"CodexWorld","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0"},"headline":"Integrate Google reCAPTCHA in Modal Popup Form with Ajax using PHP","datePublished":"2023-09-29T05:49:46+00:00","dateModified":"2025-06-24T05:49:24+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codexworld.com\/integrate-google-recaptcha-in-modal-popup-form-with-ajax-using-php\/"},"wordCount":853,"commentCount":0,"publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"image":{"@id":"https:\/\/www.codexworld.com\/integrate-google-recaptcha-in-modal-popup-form-with-ajax-using-php\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2023\/09\/integrate-google-recaptcha-checkbox-in-modal-popup-form-with-ajax-using-php-codexworld.png","keywords":["Ajax","API","Captcha","Google reCAPTCHA","jQuery","Library","PHP"],"articleSection":["Ajax"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.codexworld.com\/integrate-google-recaptcha-in-modal-popup-form-with-ajax-using-php\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.codexworld.com\/integrate-google-recaptcha-in-modal-popup-form-with-ajax-using-php\/","url":"https:\/\/www.codexworld.com\/integrate-google-recaptcha-in-modal-popup-form-with-ajax-using-php\/","name":"Integrate Google reCAPTCHA in Modal Popup Form with Ajax using PHP - CodexWorld","isPartOf":{"@id":"https:\/\/www.codexworld.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codexworld.com\/integrate-google-recaptcha-in-modal-popup-form-with-ajax-using-php\/#primaryimage"},"image":{"@id":"https:\/\/www.codexworld.com\/integrate-google-recaptcha-in-modal-popup-form-with-ajax-using-php\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2023\/09\/integrate-google-recaptcha-checkbox-in-modal-popup-form-with-ajax-using-php-codexworld.png","datePublished":"2023-09-29T05:49:46+00:00","dateModified":"2025-06-24T05:49:24+00:00","description":"Google reCAPTCHA checkbox integration in popup box - Add CAPTCHA functionality to Ajax form in modal dialog window with reCAPTCHA API using PHP. Example code to integrate Google reCAPTCHA v2 API in lightbox popup with Ajax using jQuery.","breadcrumb":{"@id":"https:\/\/www.codexworld.com\/integrate-google-recaptcha-in-modal-popup-form-with-ajax-using-php\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codexworld.com\/integrate-google-recaptcha-in-modal-popup-form-with-ajax-using-php\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/integrate-google-recaptcha-in-modal-popup-form-with-ajax-using-php\/#primaryimage","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2023\/09\/integrate-google-recaptcha-checkbox-in-modal-popup-form-with-ajax-using-php-codexworld.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2023\/09\/integrate-google-recaptcha-checkbox-in-modal-popup-form-with-ajax-using-php-codexworld.png","width":1920,"height":1080,"caption":"integrate-google-recaptcha-checkbox-in-modal-popup-form-with-ajax-using-php-codexworld"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codexworld.com\/integrate-google-recaptcha-in-modal-popup-form-with-ajax-using-php\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codexworld.com\/"},{"@type":"ListItem","position":2,"name":"Integrate Google reCAPTCHA in Modal Popup Form with Ajax using PHP"}]},{"@type":"WebSite","@id":"https:\/\/www.codexworld.com\/#website","url":"https:\/\/www.codexworld.com\/","name":"CodexWorld","description":"Web &amp; Mobile App Development Company","publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codexworld.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codexworld.com\/#organization","name":"CodexWorld","url":"https:\/\/www.codexworld.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/09\/codexworld-logo.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/09\/codexworld-logo.png","width":200,"height":19,"caption":"CodexWorld"},"image":{"@id":"https:\/\/www.codexworld.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codexworld","https:\/\/x.com\/codexworldweb","https:\/\/www.linkedin.com\/company\/codexworld","https:\/\/www.youtube.com\/codexworld"]},{"@type":"Person","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0","name":"CodexWorld","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","caption":"CodexWorld"},"description":"CodexWorld is a programming blog, one-stop destination for web professionals \u2014 developers, programmers, freelancers, and site owners.","sameAs":["http:\/\/www.codexworld.com","https:\/\/www.facebook.com\/codexworld","https:\/\/x.com\/codexworldblog"],"url":"https:\/\/www.codexworld.com\/author\/nitya192265\/"}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2023\/09\/integrate-google-recaptcha-checkbox-in-modal-popup-form-with-ajax-using-php-codexworld.png","jetpack_shortlink":"https:\/\/wp.me\/p6bxIh-1qs","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/5484","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/comments?post=5484"}],"version-history":[{"count":4,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/5484\/revisions"}],"predecessor-version":[{"id":5812,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/5484\/revisions\/5812"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media\/5488"}],"wp:attachment":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media?parent=5484"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/categories?post=5484"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/tags?post=5484"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}