Google reCAPTCHA

reCAPTCHA is a free service that protects your site from spam and abuse. It uses advanced risk analysis techniques to tell humans and bots apart.

How to use?

1
Log in at the Google reCAPTCHA page. If you don’t have a Google account, you will need to create one, then go back to the reCAPTCHA page.
2
You have to register a new site to let Google know which site you will be using these keys on.
3
For the Label, enter your domain.
4
For the Choose the type of reCAPTCHA setting, you must choose reCAPTCHA v2. This must be v2
5
For the Domains, enter your site’s domain. If you using localhost, you can enter 127.0.0.1 or localhost.
6
Click Register. Then, you will be presented with your reCAPTCHA keys. You will have a Site key, and a Secret key.

Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.

                  
                    <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"></script>

Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.

                  
                    <script>
                      // initialization of Google reCAPTCHA
                      var onloadCallback = function() {
                        grecaptcha.render('element (ID)', {
                          'sitekey' : 'SITE_KEY',
                          'theme' : 'light'
                        });
                      };
                    </script>

Basic Example 

                        
                          <div id="example1"></div>
                        
                      
                        
                          <script>
                            // initialization of Google reCAPTCHA
                            var onloadCallback = function() {
                              grecaptcha.render('example1', {
                                'sitekey' : 'SITE_KEY',
                                'theme' : 'light'
                              });
                            };
                          </script>

Dark Theme

Use 'theme': 'dark'

                        
                          <div id="example2"></div>
                        
                      
                        
                         <script>
                           // initialization of Google reCAPTCHA
                           var onloadCallback = function() {
                             grecaptcha.render('example1', {
                               'sitekey' : 'SITE_KEY',
                               'theme' : 'dark'
                             });
                           };
                         </script>

Callbakc Function

Use 'callback': verifyCallback (function)

                        
                          <div id="example3"></div>
                        
                      
                        
                         <script>
                           // initialization of Google reCAPTCHA
                           var verifyCallback = function(response) {
                             alert('Succes!');
                           };

                           var onloadCallback = function() {
                             grecaptcha.render('example1', {
                               'sitekey' : 'SITE_KEY',
                               'theme' : 'light',
                               'callback' : verifyCallback
                             });
                           };
                         </script>