How to Implement Google ReCAPTCHA v2

Steps in implementing Google reCAPTCHA v2:

1. Create your google reCAPTCHA site key - Google Documentation

2. Add the Google reCAPTCHA API in the head tag

   1. Go to Settings
   2. Go to Head Tags
   3. Create a custom head tag (Tag = Script, Attribute = src, Value = https://www.google.com/recaptcha/api.js)
   4. Save head tag

3. In the Code app, add the site key attribute in the HTML element where you want the Google reCAPTCHA to appear - (see reCAPTCHA v2 documentation for more details)

   1. HTML

      <form id="recaptcha-form" method="POST">
      	// insert necessarry fields for your form here
        
        // This is the HTML element for Google reCAPTCHA. In this case it will show at the bottom of the form.
      	<div class="g-recaptcha" data-sitekey="[mySiteKey]"></div>
        <input type="submit" value="Submit">
      </form>
      
      // Add a script for validation of the input fields in the form including the reCAPTCHA
      <script type="text/javascript">
      	document.addEventListener('DOMContentLoaded', function () {
          document.querySelector("#recapthca-form input[type='submit']").addEventListener("click", validateForm)
       	}
        
        function validateForm() {
       		// add validation for input fields in the form (if there is any)
          
          // add validation for reCAPTCHA
         	// reCAPTCHA failed validation
          if (grecaptcha.getResponse().length === 0) {
          	// add the logic if the reCAPTCHA fails here
          }
          // reCAPTCHA passed validation
          else {
          	// add the logic if the reCAPTCHA passed here
          }
      	}  
      </script>