Get Appointment

We have received your message and will contact you soon.

Thank you for choosing prositeweb, your web development agency in Montreal. Please call us at +1 (514) 548-2165 if you need immediate support.

Through this article, we will see how to use Google reCAPTCHA V3 and V2 to protect a website against spam. The purpose of our article will be to see how to add a captcha on a form. We will also see how Captcha V3 works. Finally, we are going to discuss captcha types and why V3 is better than other versions.

Prerequisites for the tutorial version of the article

  • For everyone – If you are a curious reader, you can read this article for general knowledge. We have a free plugin available for WordPress websites which you can download from wordpress.org
  • An option for developers – However, if you are a developer and would like to apply our advice on your project, you must have the

A developer will need:

  • Basic knowledge of HTML.
  • Some notions in PHP.
  • Knowledge of JavaScript would be a plus.

Protect your website against spam with Google reCAPTCHA V3 in just 3 steps

To be able to protect your website with Google reCAPTCHA V3, you only have to follow a few steps. In this section, we will see the different steps to follow. Home Captcha V3

Step 1 – Registering your website on the Google reCAPTCHA platform

To be able to use Google reCAPTCHA V3, you must first register your site on the Google reCAPTCHA platform. Please note that to register a site, it should be published on the net. Here are the steps to follow:

  • Visit the Google reCAPTCHA site – and click on admin console. The site will redirect you to the login page.
  • If you have a Gmail or G-Suite account, you must log in to access the Captchas management panel. Otherwise, you must create a Gmail account.
  • Click the plus in the top right corner of the admin panel and a website registration form will appear.
  • Via this form, you must enter the name of your site, the type of reCAPTCHA and the domain names (
  • After saving the form, the platform will generate a site key and a secret key. Copy the keys for the next steps.

captcha V3 - form

Step 2 – Adding parameters on the form and managing data on the client side.

We will use an HTML contact form for illustration. Please note that you might be able to add the catcha on any type of form.

Addition of hidden fields on the contact form

On our HTML contact form, we are going to add a hidden field called “responsecaptcha”. This field is intended to detect whether the user is a human or a robot. Here's what the initial form code might look like.

Code 1 – Initial code without the captcha field

After adding the hidden field and other parameters, we will have a form similar to the one below

Code 2 – Final code with captcha fields v3

Code Comments

  • In the event that you pay attention to Code 1 and Code 2, you will realize that we have added a hidden field to line 28 of code 2. We have also added JavaScript code from line 33.
  • To activate reCAPTCHA V3 on your site, you must replace LA_CLE_DE_VOTRE_SITE by the key obtained in step 1.
  • On line 36, you will notice a parameter called "action:". You can vary this parameter according to your objectives. The action is the name of the action you would like to perform. To learn more about the different options available to you, please refer to the documentation for the different options.

If you were able to follow the instructions, you should see the Google reCAPTCHA V3 icon appear on your site in the bottom right corner of your site. It simply means that the captcha is activated; but not yet functional. We look at the next step how to manage the sending of information.

Step 3 – Server Side Information Management

Managing data on the server side will simply consist of:

  • retrieve information sent by the user,
  • check if his score is above the average (usually 0.5)
  • Block the sending of the message when it seems suspicious.

Creation of the data reception file — send.php

We are going to create a PHP file that will allow us to retrieve the data submitted by the user. The file could have information similar to the data below:

Remark

Please note that the PHP code uses the file_get_contents function which is not necessarily supported by all servers for security or other reasons. In this case, an alternative could be CURL which is highly recommended. By replacing file_get_contents by CURL, the code above will become:

Other alternatives – using Google reCAPTCHA V2

Version 2 offers a checkbox to validate if a user is a robot or physically present on your website. In the event that you prefer version 2, here is the simple procedure to follow:

  1. Register your website
  2. Added parameters on the form and data management on the client side.
  3. Server-side information management

The main difference between Google reCAPTCHA V2 and V3 is in the approach. Indeed, reCAPTCHA V2 performs a test with images to be identified and version 3 uses a score. In the following, we will see the adjustments in the code for version 2.

Add an HTML field containing the public key in your HTML form

In the lines of code below, we illustrate what your code should look like. It is important to notice the line with the code below. < div class = "g-recaptcha" data - sitekey = "VOTRE_CLE_PUBLIC" > < / div > Your final code should look like this:

Then include the Google JavaScript which will take care of the validations.

Note: We have not gone back to site registration or key creation. To include your reCAPTCHA V2 keys, you must select version 2 when creating the keys.

Server-side data management

There is not a major difference in how to handle version 2 and 3. For version 3 you need to set an acceptable score for your website. On the other hand, for version 2, if there is a failure, the information returned will be empty.

A comparison between the reCAPTCHA V2 and V3

reCAPTCHA v3, is the latest version suggested by Google to help protect websites from spam emails. As a difference compared to the "I'm not a robot" version, it doesn't add an extra field to the form. Therefore, this has the effect of reducing the loss of the number of customers who may not pass the tests. The "I'm not a robot" version (V2) can sometimes be frustrating if the visitor fails to solve the puzzle for some reason. Moreover, for some reason, version 3 can be wrong in the evaluation of the score. In the event that this should happen, someone of your visitors might have trouble using your solution.

How to protect comment forms against spam (integrated features and reCAPTCHA)

You can use default WordPress features to protect WordPress comment forms from spam. Plus, if you combine this with reCAPTCHAs, you'll have peace of mind in running your blog. Indeed, a misconfiguration of the comments section of your website can be the cause of several security vulnerabilities. This article looks at how to perfectly set up the comments form in WordPress. We will also follow simple steps to add a reCAPTCHA to prevent spam. Thank you for reading our article, e. If at the end you have any questions or comments, we would love to hear your opinion. Leave us a message at the bottom of the message. You can also send us an email via the contact form .

Protect your website with WordPress features.

WordPress has a few options you can use to better protect your websites. Indeed, in the configuration section, there are options that you can configure in a few clicks. We examine some of them in the following. This configuration will be done in the Settings ⇒ Discussion tab. Please make the necessary configurations to better improve the security of your website. Indeed, a bad configuration can affect the way your website works. In addition, a website that does not filter message types is a gateway for hackers and spam. How to protect comment forms from spam (built-in features and reCAPTCHA)

Discussion options under the WordPress Settings tab allow you to customize how comments are on your website.

Notify all blogs linked to the article

When you checked this option, it will allow your blog or website to ping the website you tagged in the comments. If the website returns a ping, the website will be visible in the comment where the website was tagged. Please note that more tagged websites will cause more requests on pings and may slow down the website. You should therefore use it with caution.

Allow link notifications from other blogs (pingbacks and trackbacks) on new posts

This option will work side by side with notifications on blogs (option 1), where all pings received from tagged websites will be displayed in the comments section. Indeed, if you activate the notification of all blogs that are linked to your articles, you can also receive a message in return. This will allow you, for example, to have a return message if someone also talks about your article.

Allow users to submit comments on new posts

When you check this box, you allow users and others to post or submit comments on your posts. Therefore, a comment form will appear at the bottom of articles on your website. A form that visitors can use to leave their opinion.

The author of the comment must fill in their name and email address

You can turn this on if you don't want comments to be anonymous and want people to submit their name and email address to post comments.

Users must be registered and logged in before posting a comment

If you check the box, all users must be registered to post a comment. Indeed, if you want to limit spam, you can, for example, grant the publication of comments only to people who have an account.

Automatically close comments on articles older than [X] days

You must check this box, if you do not want any user to post comments after specific days when the post was published.

Show comment cookie enable checkbox, allowing comment author cookies to be enabled. Position

As the option suggests, this option, when checked, lets cookies with author information persist when they submit comments.

Enable threaded (nested) comments [X] levels deep

This option allows users to reply to comments, by creating nested comments at a specific level provided in the option.

Divide comments into pages with [X] top level comments per page and the [last/first] page displayed by default. Comments should be displayed with [older/newer] comments at the top of each page

If there are always multiple comments on your post and covers the whole page, this option will help diwordsments in the pages users go to and come to the comments pages to view them.

Email me: Email me whenever someone posts a comment

This option should be checked if you want to receive an email each time someone posts a comment on your post.

Send me an e-mail each time a comment is subject to moderation

When this option is checked, you will receive an email each time a comment is submitted for moderation. It can be used when you have more than one author on your website.

Before a comment appears: the comment must be manually approved

This option can be checked if you want to manually approve every comment on your posts.

Before a comment appears: the author of the comment must have a previously approved comment

This will only display comments from users that you have previously approved.

Comment moderation: keep a comment in the queue if it contains [X] or more links (a common characteristic of comment spam is the presence of many hyperlinks.)

This will automatically hold the comment for moderation if it only finds the allowed hyperlink in the comments. This option can be used to keep spam comments away from posting.

Unauthorized comment keys: When a comment contains any of these words in its content, the author name, URL, email address, IP address or agent channel browser user, it will be marked as spam. One word or IP per line. It will match the inner words, so “press” will match “WordPress”.

You should use this form when you want to exclude certain words or paraphrases from your comments section.

Avatar: avatar display

Check this box if you want the user's avatar to be visible in the comments section.

Avatar: maximum rating

The latter allows you to select the rating of user avatars from:

  • G — Suitable for all audiences.
  • PG — Perhaps generally offensive to audiences 13 and older.
  • R — Intended for adult audiences over the age of 17
  • X — Even more mature than above.

Avatar: Default avatar

You must use Default Avatar if you want to change or select the avatar type. This is particularly useful if you want to assign a default avatar to users who comment on your website. For users without a custom avatar, you can display a generic logo or a logo generated based on their email address.

Share :

npgilblas

Online Store Design — White Definition
04 May 2022
Creation of the Monga Anne Foundation website
22 August 2022

Do you have a project in mind? Contact our web agency for a free evaluation.

We are the experts in creating websites, online stores and functionalities for websites based in Montreal. Contact us today to create your website starting at $1,200.