{"id":9487,"date":"2026-06-03T05:00:00","date_gmt":"2026-06-03T03:00:00","guid":{"rendered":"https:\/\/mybox.com\/help\/?post_type=manual_kb&#038;p=9487"},"modified":"2026-06-03T05:00:07","modified_gmt":"2026-06-03T03:00:07","slug":"cum-se-adauga-protectia-google-recaptcha-la-un-formular-de-contact-html","status":"publish","type":"manual_kb","link":"https:\/\/mybox.com\/help\/ro\/knowledgebase\/how-to-add-google-recaptcha-protection-to-an-html-contact-form\/","title":{"rendered":"Cum s\u0103 ad\u0103uga\u021bi protec\u021bia Google reCAPTCHA la un formular de contact HTML"},"content":{"rendered":"<div class=\"translation-block translation-block-merged\">\n<p class=\"wp-block-paragraph\">Contact forms are a common target for automated spam submissions. Google reCAPTCHA helps protect your forms by verifying whether a visitor is a real user before allowing the form to be submitted.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This article shows how to integrate <strong>reCAPTCHA v3<\/strong> into a standard HTML contact form.<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_86 ez-toc-wrap-left counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/mybox.com\/help\/ro\/knowledgebase\/how-to-add-google-recaptcha-protection-to-an-html-contact-form\/#Before_You_Begin\" >Before You Begin<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/mybox.com\/help\/ro\/knowledgebase\/how-to-add-google-recaptcha-protection-to-an-html-contact-form\/#Step_1_Load_the_reCAPTCHA_JavaScript_Library\" >Step 1: Load the reCAPTCHA JavaScript Library<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/mybox.com\/help\/ro\/knowledgebase\/how-to-add-google-recaptcha-protection-to-an-html-contact-form\/#Step_2_Add_the_Submission_Callback\" >Step 2: Add the Submission Callback<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/mybox.com\/help\/ro\/knowledgebase\/how-to-add-google-recaptcha-protection-to-an-html-contact-form\/#Step_3_Update_the_Submit_Button\" >Step 3: Update the Submit Button<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/mybox.com\/help\/ro\/knowledgebase\/how-to-add-google-recaptcha-protection-to-an-html-contact-form\/#How_It_Works\" >How It Works<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/mybox.com\/help\/ro\/knowledgebase\/how-to-add-google-recaptcha-protection-to-an-html-contact-form\/#Important_Security_Consideration\" >Important Security Consideration<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/mybox.com\/help\/ro\/knowledgebase\/how-to-add-google-recaptcha-protection-to-an-html-contact-form\/#Summary\" >Summary<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Before_You_Begin\"><\/span>Before You Begin<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<\/div>\n\n<div id=\"mybox-3691952503\" class=\"mybox-content mybox-entity-placement\"><div class=\"early-access-banner-inpost\">\r\n  <div class=\"banner-left-inpost\">\r\n    <div class=\"icon-box-inpost\">\r\n      <img decoding=\"async\" src=\"https:\/\/mybox.com\/help\/wp-content\/uploads\/2026\/02\/square-info-icon.svg\" alt=\"Info\">\r\n    <\/div>\r\n    <div class=\"text-box-inpost\">\r\n      <span class=\"label-inpost\"><span class=\"translation-block translation-block-banner-text\">Acces timpuriu<\/span><\/span>\r\n      <h4><span class=\"translation-block translation-block-banner-text\">Mai ave\u021bi nevoie de ajutor?<\/span><\/h4>\r\n      <p><span class=\"translation-block translation-block-banner-text\">Contacta\u021bi echipa noastr\u0103 de servicii pentru clien\u021bi.<\/span><\/p>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div class=\"banner-right-inpost\">\r\n    <a href=\"https:\/\/panel.mybox.com\/helpdesk2\/v\/list\/\" class=\"banner-button-inpost\"><span class=\"translation-block translation-block-banner-text\">Trimite mesaj<\/span><\/a>\r\n  <\/div>\r\n<\/div><\/div>\n\n<div class=\"translation-block translation-block-merged\"><p class=\"wp-block-paragraph\">Before implementing reCAPTCHA, you will need:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A Google reCAPTCHA account<\/li>\n\n\n\n<li>A registered website in the reCAPTCHA dashboard<\/li>\n\n\n\n<li>A valid <strong>Site Key<\/strong> and <strong>Secret Key<\/strong><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">The Site Key is used on your website, while the Secret Key is used to verify requests on the server side.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_1_Load_the_reCAPTCHA_JavaScript_Library\"><\/span>Step 1: Load the reCAPTCHA JavaScript Library<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Add the following code inside the <code>&lt;head&gt;<\/code> section of your page:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script src=\"https:\/\/www.google.com\/recaptcha\/api.js\"&gt;&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">This script loads the resources required for reCAPTCHA to function.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_2_Add_the_Submission_Callback\"><\/span>Step 2: Add the Submission Callback<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Add the following JavaScript code before the closing <code>&lt;\/body&gt;<\/code> tag or within the page header:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script&gt;<br>function onSubmit(token) {<br>    document.getElementById(\"demo-form\").submit();<br>}<br>&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">This function is executed after reCAPTCHA validates the visitor and submits the form.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_3_Update_the_Submit_Button\"><\/span>Step 3: Update the Submit Button<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Add the following attributes to the button that submits the form:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;button<br>    class=\"g-recaptcha\"<br>    data-sitekey=\"YOUR_SITE_KEY\"<br>    data-callback=\"onSubmit\"<br>    data-action=\"submit\"&gt;<br>    Submit<br>&lt;\/button&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Replace <code>YOUR_SITE_KEY<\/code> with the Site Key generated in your Google reCAPTCHA account.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_It_Works\"><\/span>How It Works<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">When a visitor clicks the button:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>reCAPTCHA analyzes the request in the background.<\/li>\n\n\n\n<li>A verification token is generated.<\/li>\n\n\n\n<li>The <code>onSubmit()<\/code> function is executed.<\/li>\n\n\n\n<li>The form is submitted only after reCAPTCHA validation is completed.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Unlike previous versions, reCAPTCHA v3 does not typically require users to solve image-based challenges. Instead, it evaluates visitor behavior and assigns a score that can be checked on the server side.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Important_Security_Consideration\"><\/span>Important Security Consideration<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Adding reCAPTCHA to the form protects the client side of the application, but it should not be the only protection mechanism.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For proper validation, the generated token should also be verified on the server using your reCAPTCHA Secret Key. This prevents attackers from bypassing the protection by sending requests directly to the form processing script.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Summary\"><\/span>Summary<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Google reCAPTCHA v3 can help reduce automated spam submissions by validating visitors before a form is submitted. Integration requires loading the reCAPTCHA JavaScript library, adding a callback function, and updating the form&#8217;s submit button with the appropriate attributes. For maximum security, server-side token verification should also be implemented.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n<\/div>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"template":"","format":"standard","manualknowledgebasecat":[125],"manual_kb_tag":[3108,4096,5352,5353,5354,5355,5356,5357,5358,5359],"class_list":["post-9487","manual_kb","type-manual_kb","status-publish","format-standard","hentry","manualknowledgebasecat-websites","manual_kb_tag-spam-prevention","manual_kb_tag-contact-form","manual_kb_tag-google-recaptcha","manual_kb_tag-recaptcha-v","manual_kb_tag-recaptcha-integration","manual_kb_tag-form-validation","manual_kb_tag-javascript-library","manual_kb_tag-site-key","manual_kb_tag-secret-key","manual_kb_tag-server-side-verification"],"_links":{"self":[{"href":"https:\/\/mybox.com\/help\/ro\/wp-json\/wp\/v2\/manual_kb\/9487","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mybox.com\/help\/ro\/wp-json\/wp\/v2\/manual_kb"}],"about":[{"href":"https:\/\/mybox.com\/help\/ro\/wp-json\/wp\/v2\/types\/manual_kb"}],"author":[{"embeddable":true,"href":"https:\/\/mybox.com\/help\/ro\/wp-json\/wp\/v2\/users\/1"}],"version-history":[{"count":2,"href":"https:\/\/mybox.com\/help\/ro\/wp-json\/wp\/v2\/manual_kb\/9487\/revisions"}],"predecessor-version":[{"id":9488,"href":"https:\/\/mybox.com\/help\/ro\/wp-json\/wp\/v2\/manual_kb\/9487\/revisions\/9488"}],"wp:attachment":[{"href":"https:\/\/mybox.com\/help\/ro\/wp-json\/wp\/v2\/media?parent=9487"}],"wp:term":[{"taxonomy":"manualknowledgebasecat","embeddable":true,"href":"https:\/\/mybox.com\/help\/ro\/wp-json\/wp\/v2\/manualknowledgebasecat?post=9487"},{"taxonomy":"manual_kb_tag","embeddable":true,"href":"https:\/\/mybox.com\/help\/ro\/wp-json\/wp\/v2\/manual_kb_tag?post=9487"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}