Ask your WordPress questions! Pay money and get answers fast! (more info)

How to protect jquery button with Invisible reCaptcha?


I want to protect my jquery button from bots without annoying the users, so i thought of adding google's invisible recaptcha to it. However implementation isn't as easy as i though and i can't seem to do it. PS: I am doing this on a wordpress theme.

It's worth mentioning that i'm already using a recpatcha plugin (wp-recaptcha-integration) which i cannot remove since i am using it to add regular captcha to custom ajax login forms of my theme (this was done by a dev months ago).

Because of this plugin, this code is already present on single post:
<script src=";render=explicit" async defer></script>

And the "Site Key" and "Secret Key" are already set on the plugin interface so you can grab them from there: Plugin info:

Official invisible re-captcha documentation:

Create invisible recaptcha keys:

And this is what i have:

HTML single post template:

<button class="acf-get-content-button">Show Link</button>
<div class="fa" id="acf-content-wrapper" data-id="<?php echo $post_id; ?>"></div>

JS on footer:

(function($) {
$('.acf-get-content-button').click(function(e) {
$('.fa').addClass('fa-cog fa-spin fa-4x');
var $contentWrapper = $('#acf-content-wrapper');
var postId = $'id');

url: "/public/ajax.php",
type: "POST",
data: {
'post_id': postId
.done(function(data) {
$('.fa').removeClass('fa-cog fa-spin fa-4x');
$('.acf-get-content-button').mouseup(function() {
if (event.which == 1) {

ajax.php (retrieves custom field, using ACF but you can use the_meta for testing without it)

define('WP_USE_THEMES', false);
require_once( $_SERVER['DOCUMENT_ROOT'] . '/wp-load.php' );
global $post;
$post_id = $_REQUEST["post_id"];
$content = get_field( 'ebook_link_pdf', $post_id );
echo ($content);

Answers (2)


Francisco Javier Carazo Gil answers:

Ok, so what you want really is protect an AJAX call using your captcha.

I am going to see how it can be done.

Francisco Javier Carazo Gil comments:

Have you tried it?

var response = grecaptcha.getResponse();

if(response.length == 0)
//reCaptcha not verified

//reCaptch verified

User161508 comments:

Yes i think so, i probably used the wrong terms.
I want to implement google invisible recaptcha so bots can't retrieve the content.
I thought not having the content on the source code was enough but apparently it isn't so i need recaptcha.

User161508 comments:

Where exactly would it go?

Francisco Javier Carazo Gil comments:

But what I don't understand is: if you have a invisble recatpcha, how human users are going to do it?

Francisco Javier Carazo Gil comments:

Could you show me what have you done? The link to this form.

User161508 comments:

humans don't have to do it.

Francisco Javier Carazo Gil comments:

There is a conceptual problem.

If you create a captcha only for bots, captcha is not the solution. captcha should be filled by humans and cannot be filled by bots.

How will it work?

What you need is a honeypot: something like it.


Arnav Joy answers:

can you please give me url of your site ?

Arnav Joy comments:

you have not used code to show google recaptcha like <div class="g-recaptcha" data-sitekey="your_sitekey"></div> and on form submit you need to check whether this code is correct or not
// code on form submit
var captcha_response = grecaptcha.getResponse();
if(captcha_response.length == 0)
// Captcha is not Passed
return false;
// Captcha is Passed
return true;