How To Add Recaptcha To User Meta Login Form

User Meta is a great plugin with even more features available in the Pro version.

When you create a new Login page to hold your User Meta form, you can easily add a basic Google Recaptcha to reduce spam attempts.

You will need to get the page number of your newly created Login page.  In this demonstration, we’ll say our Login page number is 215.  Then create a new file page template and name it page-215.php.

If you don’t already have a recaptcha Site Key for your website, visit https://www.google.com/recaptcha and get your key.  You’ll need that for recaptcha to work.

Now for the code.  The process is as follows:

• Use jQuery to position the recaptcha div above the login button
• Hide the login button
• Display the login button once recaptcha is returned successfully

1. We’re using CSS to hide the login button.
2. Created a div to contain our recaptcha using data-callback and data-sitekey.
3. Using jQuery to move our recaptcha div above the login button position.
4. Using javascript to handle the callback and display the login button if a successful response from Google Recaptcha is received.

Here’s the code to integrate recaptcha on your new User Meta login page.  Replace the data-sitekey with your own key.  Add this to the bottom of your page-215.php file.

This method would work with just about any implementation of Recaptcha on your website, as well as the register page.

<style>
.um_login_button {
  text-align: center;
  display: none;
}
</style>

<div class="g-recaptcha" data-callback="recaptcha_callback" data-sitekey="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"></div>

<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<script>
jQuery(document).ready(function($) {
  $('.g-recaptcha').insertBefore('.um_login_button');
});

function recaptcha_callback() {
  return new Promise(function(resolve, reject) {

  if (grecaptcha === undefined) {
    alert('Recaptcha is not defined');
    //return;
    reject();
  }

  var response = grecaptcha.getResponse();
  console.log('success' + response);

  if (!response) {
    alert('Coud not get recaptcha response');
    //return;
    reject();
  }

  if (response) {
    jQuery('.um_login_button').css('display', 'inline-block');
  }

  resolve();

  }); //end promise
};
</script