Add CAPTCHA to Your Custom Form Without Using a Plugin

There are several WordPress plugins which provide the ability to add CAPTCHA to forms, on your site. Which is great. Because A) CAPTCHA prevents spam, and B) You don’t need to code anything. But when you are a developer, and in the need of adding CAPTCHA, in a custom form displayed by the plugin, you cannot rely on the availability of these plugins.

We came across this need, when we wanted to add a spam protection feature, to our custom plugin, Product Enquiry Pro for WooCommerce. Having a CAPTCHA is a great way to prevent spammers from flooding your mailbox with spam mails, or to prevent bots from accessing sensitive data.

Adding reCAPTCHA in Your Custom Form

Forms which provide access to confidential information, need solid spam protection. The reCAPTCHA provided by Google, provides a CAPTCHA service, to protect forms from malicious attacks. You might have surely come across one. Random skewed text is and displayed in an image. You have to read and enter the text, which is only possible for humans, to successfully submit the form.

To add such a feature to custom form in your plugin, you will need to do the following:

1. Option to Add API keys: The reCAPTCHA is a free service which you can avail using the reCAPTCHA API. You need to sign up at Google reCAPTCHA for your API keys. If your form has to display the reCAPTCHA, the user of the plugin needs to sign up for the service and use the received API keys. The plugin will provide an option to add and save the received public and private API keys.

2. Using the PHP Library: For your WordPress plugin, you need to use the reCAPTCHA PHP library, which wraps around the API. The library allows easy integration of the CAPTCHA in your custom form.

   • Start by downloading the reCAPTCHA library, and add it in the same directory as your plugin.
   • You will need to add the following code in your form, to display the reCAPTCHA

require_once('recaptchalib.php');
$publickey = get_option( 'your_public_key' );
echo recaptcha_get_html($publickey);

where your_public_key, is the option to get the user’s public API key.

• To validate the CAPTCHA, you have to add the following code in the form validation section of your plugin.

require_once('recaptchalib.php');
$privatekey = get_option( 'your_private_key' );
$resp = recaptcha_check_answer ($privatekey,
$_SERVER["REMOTE_ADDR"],
$_POST["recaptcha_challenge_field"],
$_POST["recaptcha_response_field"]);
if (!$resp->is_valid) {
    // captcha mis-match, return an error
} else {
    // reCAPTCHA success, validate other fields.
}

where ‘your_private_key’ is the user’s private API key. Remember, such a CAPTCHA can slow down the display of your form. For more details refer the detailed documentation, for Using reCAPTCHA with PHP.

Adding a Simple Custom CAPTCHA to Your Form

A CAPTCHA is basically used to differentiate between humans and computers. This can be achieved by simpler means as well. For some forms, the reCAPTCHA might be an overkill, especially when you want visitors to fill the form, yet keep away spammers. The reCAPTCHA is fairly overcomplicated. For simpler, less sensitive forms, you can add a basic CAPTCHA. An uncomplicated CAPTCHA might be some simple mathematical equation, or random alphanumeric text. Including such a CAPTCHA is fairly simple. You can use session variables to check validate the result entered by the user.

To Add a Simple Mathematical CAPTCHA, you can use the below code:

1. Generate the Equation and Save the Result: The below code will generate two random numbers, and create an addition or subtraction equation.

session_start();
$digit1 = mt_rand(1,20);
$digit2 = mt_rand(1,20);
if( mt_rand(0,1) === 1 ) {
    $math = "$digit1 + $digit2";
    $_SESSION['answer'] = $digit1 + $digit2;
} else {
    $math = "$digit1 - $digit2";
    $_SESSION['answer'] = $digit1 - $digit2;
}

2. Display the Equation in your Form: You need to display the generated equation as part of your form.

<?php echo $math; ?> = <input name="answer" type="text" />

3. Validate the Text Entered by the User: The final step is to validate whether the value entered by the user is correct, or not.

<?php
session_start();
if ($_SESSION['answer'] == $_POST['answer'] ) {
    // value entered is correct
}
else {
    // value is incorrect, kindly try again
}

And there you have it, a simple, yet effective CAPTCHA. But do note, many-a-times you must’ve observed, that the CAPTCHA text is usually in an image. This is because text placed in an image, is more difficult to crack, as compared to plain text. Do you have any questions regarding the above stated implementation? Or do you have any tips you’d like to share? Do leave your comments in the comment section below.

• WordPress Tips & Tricks
• With tags: CAPTCHA, Plugin Customization, Plugin Development, WordPress Plugin

Share:

• Aparna G

Please note, some of the links in this blog post might be affiliate links. This means if you go on to purchase a product using such a link, we receive a small commission (at no additional cost to you). This helps us support the blog and produce free content. We only recommend products we work with or love. Thank you for your support!