reCAPTCHA is a common protection tool for a website to keep the spambots away and reduce spam, we usually add it to the login page, register page, etc.

On Google, if it detects unusual traffic, user needs to solve the reCAPTCHA to continue searching.

Recently, my website has been threatened by spam comments, I believe they were made by spambots, so I added the reCAPTCHA on my website.

WordPress page can be protected as a password, but it is no ‘reCAPTCHA Protected’ option and there is a lack of plugins for using reCAPTCHA to protect a page.

So, I wrote some codes to use the reCAPTCHA to protect my website. I have a strong programming ability with HTML, JavaScript and CSS.

Do you can’t wait to protect your website? Let’s begin and install the reCAPTCHA Protection!


First, Make Sure you got a Site Key and Secret Key for reCAPTCHA v2 Tickbox

In order to use Google’s reCAPTCHA, you need to get a Site Key and Secret Key from Google’s reCAPTCHA Page.

1. Go to Google’s reCAPTCHA Page and click “Admin Console”.

2. Register a new site. (Remember to add correct domains on it, otherwise reCAPTCHA will not work on your website)

3. Get your Site Key and Secret Key (You don’t have to use Secret Key).


Now, Let’s Add the Code to your Page

Method 1: HTML at All

1. Open HTML Module in WordPress Editor.

If you are using WordPress Block Editor, Add “Custom HTML” Block.

If you are using other editors (e. g. Elementor, Beaver Builder), you just need to add HTML Code section. For more information, please view their support documentation.

2. Copy and Paste the code below.

<script src="https://recaptcha.net/recaptcha/api.js" async="" defer=""></script> <!-- Comment out this code if you already added this code before closing </head>. -->
<!-- Set Style (You can change it, especially color) -->
<style>
	#submitreCaptcha{
		border: none;
		border-radius: 4px;
		outline: none;
		padding-top: 10px;
		padding-bottom: 10px;
		padding-left: 16px;
		padding-right: 16px;
		font-size: 16px;
		color: white;
		background-color: #7d0dff;
		font-family: inherit;
		cursor: pointer;
		-webkit-appearance: none;
	}
	#reCaptchaNotVeriAlt{
		display: none;
		width: 100%;
		padding: 5px;
		padding-left: 12px;
		padding-right: 12px;
		margin-top: 25px;
		border: 2px solid red;
		color: red;
		box-sizing: border-box;
	}
	#submitreCaptcha:hover{
		background-color: #5407ae;
	}
</style>
<div id="reCAPTCHA1">
	Before you access to this content, you need to solve the reCAPTCHA.<br>
	<a href="javascript:void(0)" onclick="whyUseReCAPTCHA();">Why this website uses reCAPTCHA verification?</a>
	<br>
	<!--Alert box to user-->
	<div id="reCaptchaNotVeriAlt">
		You need to solve the reCAPTCHA first.
	</div>
	<br>
	<!--reCAPTCHA box-->
	<div id="reCAPTCHAProtectContent001"></div>
	<br>
	<input id="submitreCaptcha" type="button" value="Submit" onclick="showContent();">
</div>
<!--Content Box-->
<div id="captchaSuccess" style="display: none;">
	<!-- Put your normal contents here as HTML format -->
	<!-- This is the contents to show after the user passed the reCAPTCHA -->
	<!-- You should use HTML language instead of using Blocks to write the content below. -->
	<p>This is the content that shows after you passed the reCAPTCHA.</p>
</div>
<script>
	var reCAPTCHAProtectContent001 = null;
	var reCAPTCHA1 = document.getElementById("reCAPTCHA1");
	var captchaSuccess = document.getElementById("captchaSuccess");
	var reCaptchaNotVeriAlt = document.getElementById("reCaptchaNotVeriAlt");
	var response = null;
	var onloadCallback = function(){
		reCAPTCHAProtectContent001 = grecaptcha.render('reCAPTCHAProtectContent001', {
			'sitekey' : 'Enter-your-site-key-here', /*Enter your site key here.*/
		});
	}
	function showContent1(){
		reCAPTCHA1.style.display = "none";
		captchaSuccess.style.display = "block";
	}
	function showContent(){
		var reCAPTCHAProtectContent001Response = grecaptcha.getResponse(0);
		if (reCAPTCHAProtectContent001Response.length > 0) {
			// reCaptcha verified
			showContent1();
		} else {
			// reCaptcha not verified
			reCaptchaNotVeriAlt.style.display = "block";
		}
	}
	function whyUseReCAPTCHA(){
		alert("This website uses reCAPTCHA because the site owner needs to reduce spam from the website.");
	}
</script>
<script src="https://recaptcha.net/recaptcha/api.js?onload=onloadCallback&amp;render=explicit" async="" defer=""></script>

3. Replace ‘Enter-your-site-key-here’ to your site key you got in the code.

var onloadCallback = function(){
	reCAPTCHAProtectContent001 = grecaptcha.render('reCAPTCHAProtectContent001', {
		'sitekey' : 'Enter-your-site-key-here', /*Enter your site key here.*/
	});
}

For example (Test Site Key, for test purpose only):

var onloadCallback = function(){
	reCAPTCHAProtectContent001 = grecaptcha.render('reCAPTCHAProtectContent001', {
		'sitekey' : '6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI', /*Enter your site key here.*/
	});
}

4. Comment out or delete the first line only if you already added it before closing </head>.

<script src="https://recaptcha.net/recaptcha/api.js" async="" defer=""></script> <!-- Comment out this code if you already added this code before closing </head>. -->

Comment out the code like this:

<!--<script src="https://recaptcha.net/recaptcha/api.js" async="" defer=""></script>--> <!-- Comment out this code if you already added this code before closing </head>. -->

5. Customize the “Submit” button and reCAPTCHA not verified alert box using CSS (e. g. Background Color, Font Size).

<style>
	#submitreCaptcha{
		border: none;
		border-radius: 4px;
		outline: none;
		padding-top: 10px;
		padding-bottom: 10px;
		padding-left: 16px;
		padding-right: 16px;
		font-size: 16px;
		color: white;
		background-color: #7d0dff;
		font-family: inherit;
		cursor: pointer;
		-webkit-appearance: none;
	}
	#reCaptchaNotVeriAlt{
		display: none;
		width: 100%;
		padding: 5px;
		padding-left: 12px;
		padding-right: 12px;
		margin-top: 25px;
		border: 2px solid red;
		color: red;
		box-sizing: border-box;
	}
	#submitreCaptcha:hover{
		background-color: #5407ae;
	}
</style>

6. Add your content on the page

Add your content between <div> and </div> as HTML format.

If you don’t want to use HTML to edit your contents, you should use method 2.

<div id="captchaSuccess" style="display: none;">
	<!-- Put your normal contents here as HTML format -->
	<!-- This is the contents to show after the user passed the reCAPTCHA -->
	<!-- You should use HTML language instead of using Blocks to write the content below. -->
	<p>This is the content that shows after you passed the reCAPTCHA.</p>
</div>

Method 2: Normal Blocks (WordPress Block Editor Only)

1. Open HTML Module in WordPress Editor and add “Custom HTML” Block.

2. Copy and Paste the code below.

<script src="https://recaptcha.net/recaptcha/api.js" async="" defer=""></script> <!-- Comment out this code if you already added this code before closing "head". -->
<!--reCAPTCHA box-->
<style>
#submitreCaptcha{
border: none;
border-radius: 4px;
outline: none;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 16px;
padding-right: 16px;
font-size: 16px;
color: white;
background-color: #7d0dff;
font-family: inherit;
cursor: pointer;
-webkit-appearance: none;
}
#reCaptchaNotVeriAlt{
display: none;
width: 100%;
padding: 5px;
padding-left: 12px;
padding-right: 12px;
margin-top: 25px;
border: 2px solid red;
color: red;
box-sizing: border-box;
}
#submitreCaptcha:hover{
background-color: #5407ae;
}
</style>
<div id="reCAPTCHA1">
Before you access to this content, you need to solve the reCAPTCHA first.<br>
<a href="javascript:void(0)" onclick="whyUseReCAPTCHA();">Why this website uses reCAPTCHA verification?</a>
<br>
<div id="reCaptchaNotVeriAlt">
You need to solve the reCAPTCHA first.
</div>
<br>
<div id="reCAPTCHAProtectContent001"></div>
<br>
<input id="submitreCaptcha" type="button" value="Submit" onclick="showContent();">
</div>
<!--Content Box-->
<!--<div id="captchaSuccess" style="display: none;">-->
<!-- Put the contents to show after the user passed the reCAPTCHA -->
<!-- You should use HTML language instead of using Blocks to write the content below. -->
<!--<p>This is the content that shows after you passed the reCAPTCHA.</p>-->
<!--</div>-->
<script src="https://recaptcha.net/recaptcha/api.js?onload=onloadCallback&amp;render=explicit" async="" defer=""></script>
<div id="captchaSuccess" style="display: none;">

2. Add Custom HTML Block again, copy and Paste the code below.

</div>
<script>
var reCAPTCHAProtectContent001 = null;
var reCAPTCHA1 = document.getElementById("reCAPTCHA1");
var captchaSuccess = document.getElementById("captchaSuccess");
var reCaptchaNotVeriAlt = document.getElementById("reCaptchaNotVeriAlt");
var response = null;
var onloadCallback = function() {
reCAPTCHAProtectContent001 = grecaptcha.render('reCAPTCHAProtectContent001', {
'sitekey' : 'Enter-your-site-key-here',
});
}
function showContent1(){
reCAPTCHA1.style.display = "none";
captchaSuccess.style.display = "block";
}
function showContent(){
var reCAPTCHAProtectContent001Response = grecaptcha.getResponse(0);
if(reCAPTCHAProtectContent001Response.length > 0){
// reCaptcha verified
showContent1();
}else{
// reCaptcha not verified
reCaptchaNotVeriAlt.style.display = "block";
}
}
function whyUseReCAPTCHA(){
alert("This website uses reCAPTCHA because the site owner needs to reduce spam from the website.");
}
</script>

Caution: Do Not add 2 parts above in the same Custom HTML Block. They must be added separately.

3. Replace ‘Enter-your-site-key-here’ to your site key you got in the code.

var onloadCallback = function(){
	reCAPTCHAProtectContent001 = grecaptcha.render('reCAPTCHAProtectContent001', {
		'sitekey' : 'Enter-your-site-key-here', /*Enter your site key here.*/
	});
}

For example (Test Site Key, for test purpose only):

var onloadCallback = function(){
	reCAPTCHAProtectContent001 = grecaptcha.render('reCAPTCHAProtectContent001', {
		'sitekey' : '6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI', /*Enter your site key here.*/
	});
}

4. Comment out or delete the first line only if you already added it before closing </head>.

<script src="https://recaptcha.net/recaptcha/api.js" async="" defer=""></script> <!-- Comment out this code if you already added this code before closing </head>. -->

Comment out the code like this:

<!--<script src="https://recaptcha.net/recaptcha/api.js" async="" defer=""></script>--> <!-- Comment out this code if you already added this code before closing </head>. -->

5. Customize the “Submit” button and reCAPTCHA not verified alert box using CSS (e. g. Background Color, Font Size).

<style>
	#submitreCaptcha{
		border: none;
		border-radius: 4px;
		outline: none;
		padding-top: 10px;
		padding-bottom: 10px;
		padding-left: 16px;
		padding-right: 16px;
		font-size: 16px;
		color: white;
		background-color: #7d0dff;
		font-family: inherit;
		cursor: pointer;
		-webkit-appearance: none;
	}
	#reCaptchaNotVeriAlt{
		display: none;
		width: 100%;
		padding: 5px;
		padding-left: 12px;
		padding-right: 12px;
		margin-top: 25px;
		border: 2px solid red;
		color: red;
		box-sizing: border-box;
	}
	#submitreCaptcha:hover{
		background-color: #5407ae;
	}
</style>

6. Add your content between 2 Custom HTML Blocks.

Like This:

Note: I am from China, so I changed www.google.com to recaptcha.net in the codes because www.google.com is blocked in China. If the code uses www.google.com, visitors in China will not able to pass the reCAPTCHA verification. You also can change it back if you want.


最后的笔记

I hope this tutorial is helpful for you to protect your website.

This tutorial is not supported on wordpress.com because it bans JavaScript.

You can view my reCAPTCHA test (demonstration) page on my website.

If you have any questions or issues about this, feel free to contact me. You also can start a live chat to me by clicking the banner on the right-bottom corner on my website.

感谢你的阅读!

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据