Building the blog, Wordpress

Add reCAPTCHA to wordpress page form

Add reCAPTCHA to wordpress page form

As owner of a blog that is around for a while with any traffic, you will find sooner or later annoying amount of spam comments taking your blog by storm. If the akismet is not your cup of tea and you do not want to pay for possible license (commercial use), then I can show you how to easily implement your own recaptcha v3 from google.

Update: After using the version 1 I have received rather a lot of spam comments, 70% of spam was not recognized. I have added another feature that hopefully will make it little bit harder for spam bots to get around my Recaptcha v3. If this does not help will add more checks. If you have any tips please leave comment.

You will need to register your site recaptcha v3 to get two keys one used on frontend (site key) and one at backend (secret key). For more information refer to developer’s guide. For our need we will use the very basic setup that is taken straight from the documentation as it was.

  • Load the JavaScript API.
 <script src="https://www.google.com/recaptcha/api.js"></script>
  • Add a callback function to handle the token.
 <script>   function onSubmit(token) {     document.getElementById("form").submit();   } </script>
  • Add attributes to your html button.
  <button  class="g-recaptcha button" 
        data-sitekey="SITE_KET" 
        data-callback="onSubmit" 
        data-action="submit">

Now that we know what to do we need to change our template files and to do that we can use sftp or navigate to Appearances > Theme editor

Form

First we will change the front end for which we do require recaptcha. Most likely site owners use it on comment or contact us section, basically any publicly accessible form that we do not want to get overtaken by spam. Do the following changes to the function comment_form in the file comments.php located in your active theme. How to add custom layout and styles to your comments please see the post Style WordPress comments in bootstrap

<?php
	comment_form(
		array(
			'logged_in_as'       => null,
			'title_reply'        => esc_html__( 'Leave a comment', 'twentytwentyone' ),
			'title_reply_before' => '<h2 id="reply-title" class="comment-reply-title">',
			'title_reply_after'  => '</h2>',
			'id_submit' => 'submitcomment',
			'class_submit'          => 'g-recaptcha',
			'name_submit'          => 'submitbutton',
			'submit_button'        => '<button name="%1$s" id="%2$s" class="%3$s" data-sitekey="<site_key>" 
			data-callback="onSubmit" data-action="submit">%4$s</button>'
		)
	);
	?>

</div><!-- #comments -->
<script src="https://www.google.com/recaptcha/api.js"></script>
<script>
   function onSubmit(token) {
     document.getElementById("commentform").submit();

   }
</script>

In order to recaptcha submit I had to rename attributes id, name to something else than submit. Also attribute type=”submit” when using input instead the submit button had be removed because the recaptcha will never trigger or trigger incorrectly.

Now with the front end sorted out the last thing we need to take a look at the back end part of comment verification.

We will use WordPress functionality of action hooks and add custom functionality to insert_wp_comment

To add hooks we need to change file functions.php inside your theme.

//custom functionality
add_action('wp_insert_comment','remove_comment_from_default_table', $comment);
function remove_comment_from_default_table( $id ){
	function validateComment() 
	{
		try {

			$url = 'https://www.google.com/recaptcha/api/siteverify';
			$data = [
						'secret'   => '<application_secret>',
						'response' => $_POST['g-recaptcha-response'],
						'remoteip' => $_SERVER['REMOTE_ADDR']
					];
					
			$options = [
				'http' => [
					'header'  => "Content-type: application/x-www-form-urlencoded\r\n",
					'method'  => 'POST',
					'content' => http_build_query($data) 
				]
			];
		
			$context  = stream_context_create($options);
			$result = file_get_contents($url, false, $context);
			$result = json_decode($result);
			return [$result->success, $result->score];
		}catch (Exception $e) {
			return null;
		}
	}
	//get the results from recapcha api validation
    list($isValid, $score) = validateComment();
  	//add score meta to the comment for further analysis
	add_metadata( 'comment', $id, 'spam-score', $score );
  	//trehold by which the comment is considered as spam
  	//I have cerated general option where I can set the number as needed
	$spamTreshold = get_option('mtn_comment_post_spam_score') ? floatval(get_option('mtn_comment_post_spam_score')):0.5;
	if ($score < $spamTreshold || !$isValid)
	    wp_set_comment_status($id, 'spam');// mark it as spam
    	//wp_delete_comment($id, $force_delete = true); // delete right away
}

API Request

API request are made to URL: https://www.google.com/recaptcha/api/siteverify METHOD: POST

POST ParameterDescription
secretRequired. The shared key between your site and reCAPTCHA.
responseRequired. The user response token provided by the reCAPTCHA client-side integration on your site.
remoteipOptional. The user’s IP address.
Parameters for google recaptcha validation API

API response

Response is retrieved as json object and can look something like:

{  
  "success": true|false,  
  "challenge_ts": timestamp,  // timestamp of the challenge load (ISO format yyyy-MM-dd'T'HH:mm:ssZZ)  
  "hostname": string,         // the hostname of the site where the reCAPTCHA was solved 
  "error-codes": [...],        // optional
  "score": number             // the score for this request (0.0 - 1.0) for reCaptcha v3
}

If all is correct you should be able to see floating recaptcha thumbnail on the bottom of your page. Next you can watch recaptcha do the work for you by looking at statistics in the admin console.

Recaptcha admin view

Oh hi there 👋
I have a FREE e-book for you.

Sign up now to get an in-depth analysis of Adobe and Salesforce Marketing Clouds!

We don’t spam! Read our privacy policy for more info.

Marcel Szimonisz
Marcel Szimonisz
MarTech consultant As a marketing automation consultant, I specialize in problem-solving, process automation, and driving innovation for clients' marketing platforms.

I hold certifications in Adobe Campaign v6 (3x certified) and Salesforce Marketing Cloud (5x certified), as well as 1x Salesforce Associate certified.

Moreover, I serve as a community advisor for Adobe Campaign, providing expert insights and guidance.

Beyond my professional pursuits, I explore various programming languages, CMSs, and frameworks, enhancing my technical expertise and staying at the forefront of industry advancements.
Take a look at our subscription offering in case you are looking for a Marketing Automation Consultant.

Leave a comment

Your email address will not be published. Required fields are marked *

Similar posts that you may find useful

Fade article effect on wordpress post
Building the blog, Wordpress

Fade post article effect in wordpress theme

3 minutes read

Adding visual interest and engaging design elements to your WordPress website is an essential part of creating a great user experience. One way to accomplish this is by adding a fade effect to your post articles, which can create an attractive and engaging visual transition for readers. In this blog post, we’ll show you how […]

Continue reading
Wordpress CMS tips
Wordpress

Disable google analytics when logged in as admin

2 minutes read

As the title suggests, I have no intention of tracking my admin activity on the page. The idea is to disable Google Analytics when the admin is logged in. To simply disable Google Analytics, you just need to set the ‘ga-disable’ window variable to ‘true’. I suppose this can be added anywhere on the page, […]

Continue reading
Comment form with bootstrap
Building the blog, Wordpress

Style WordPress comments with bootstrap

4 minutes read

With creating your own WordPress theme you will have to style comment section. For that purpose you will have to add a bit of own styling. In my case I used bootstrap CSS framework that makes life easier for programmers that are not that proficient with front end styling. This will make sure that your […]

Continue reading
Programing editor
Building the blog

Building blog from “scratch”

1 minute read

This is the first post from the series on how I built, or more precisely on how I will build this blog. Before you will start to build your own blog, well right after you chose your hosting provider and buy your domain, you will have to decide technology, CMS or blogging platform. Of course […]

Continue reading
Computer workplace
Building the blog, Wordpress

Beware! Work in progress

1 minute read

Page is in the works and, therefore you might see it changing time to time or perhaps sometimes experiencing weird errors. It’s all good it’s part of this project and the journey to get a blog and I am on the road to document it all. February 2022 Recaptcha v3 updated as spam still happened […]

Continue reading