AJAX Login Modals - Adding Google reCaptcha to Your Registration Form

Upon installing the AJAX Login Modals Extension, you will have access to the enable Google reCaptcha setting found under the General Settings Tab when creating or editing your registration form, as seen in the screenshot below:

enable-recaptcha.jpg

Getting Google reCaptcha on Your Site

For this check box to actually do anything at all, the first thing we have to do is register our site to use the Google API. Start this process by visiting the Google reCaptcha page, and clicking the Get reCaptcha link in the upper right corner:

get-recaptcha.jpg

From here, you will be asked to register and label your site, plus provide a domain name:

get-recaptcha-2.jpg

Once you’ve registered your new site, you’ll be presented with a key, a secret, and some steps to complete the process.

The Key and Secret

Keep these close by, as we’ll make use of them within the WordPress Admin shortly. For now, we can just skip to the steps:

get-recaptcha-3.jpg

Connecting Your Site to the Google API

To get our site on the same page with the Google API, we need to insert some code into the header of our site, as it’s explained in the screenshot below:

get-recaptcha-4.jpg

Obviously, we want this reCaptcha utility available throughout our site, wherever our login popups may be. As such, you’ll want to paste the code in your header.php file found in your site files under Appearance > Editor in the WordPress Admin.

Notice the next part of the instructions above, “Paste this snippet at the end of the <form> where you want the reCaptcha widget to appear.” We’ve already taken care of this in the very first step of this doc by checking the box within Popup Maker that states, “Enable Google reCaptcha”. By checking that box, the code has already been appended to the end of the form, we’re now going through the process to make it work.

However, if you need to use Google reCaptcha anywhere else on your site, not inside our login popups for example, then you will have to use that code.

Integrate with Popup Maker

Now we can make use of the Key and the Secret within the WordPress Admin! Navigate to Popup Maker > Settings, and click the Extensions tab.

We are looking for the two fields called “Google reCaptcha Site Key” and “Google reCaptcha Secret Key”, as shown below:

get-recaptcha-5.jpg

Insert your Key and Secret, and click the Save Changes button.

Refresh your AJAX Registration Modal with Google reCaptcha enabled, and you should have a beautiful, elegant spam preventing beast at the end of your form!

Still need help? Contact Us Contact Us