Web Development: Create a Simple Math CAPTCHA for Your Forms With PHP and JavaScript

Create a Simple Math CAPTCHA for Your Forms With PHP and JavaScript

In this new tutorial we’ll discuss a straightforward approach for reducing spam from form submissions. This technique will use PHP and JavaScript to block form submission until the user provides the correct answer to a simple math CAPTCHA.

Here’s a quick video that demonstrates the expected functionality:

It’s important to note that this is just a simple, quick method that adds an extra layer of protection and should not replace other more elegant solutions like reCAPTCHA whenever they are applicable. If you’re familiar with the WordPress Contact Form 7 (CF7) plugin, you might already know its quiz tag that provides similar functionality.

What is CAPTCHA?

CAPTCHA stands for Completely Automated Public Turing test to tell Computers and Humans Apart. You’ll know them in the form of distorted images or audio, quizzes to find objects within photos, or (in the case of Google’s reCaptcha) a checkbox to prove you aren’t a robot.

Sure, they can be annoying, but they are a necessary evil in the fight against spam. We’ll be creating our own CAPTCHA by asking users to answer a simple math quiz.

Build the Form

For the purposes of this demonstration, we’ll need a form. Let’s create a Bootstrap 5 form by taking advantage of its grid system and a few utility classes. Don’t worry if you’d rather not use Bootstrap though; the primary goal of this tutorial isn’t to show you how to create a form but to demonstrate how you can protect it regardless of how you build it.

Here’s our form:

So far, it looks good visually, but it doesn’t contain any protection method for spam emails. A bot can easily fill its fields and send us unwanted information.

Add the Math CAPTCHA

To prevent this as much as possible, we’ll build a simple math CAPTCHA. To build the CAPTCHA, we can use any sort of server-side language or even client-side JavaScript. In our case, we’ll go with PHP.

Processing the form data upon submission is beyond the scope of this tutorial

Here are the steps we’ll follow:

1. Setup the PHP Document

In a new PHP document, we’ll generate two random numbers between 0 and 300 thanks to PHP's rand() function. On page load, these numbers will almost certainly change.

<?php
$min  = 1;
$max  = 300;
$num1 = rand( $min, $max );
$num2 = rand( $min, $max );
$sum  = $num1 + $num2;
?>

Underneath this we can add page structure and the HTML markup of our form exactly as we created it before.

2. Create New Form Input

We’ll now create a new text input where the user should fill the sum of these two numbers.

<label for="quiz" class="col-sm-3 col-form-label">
    <?php echo $num1 . '+' . $num2; ?>?
</label>
<div class="col-sm-9">
    <input type="text" class="form-control quiz-control" id="quiz">
</div>

3. Update the Submit Button

By default, the submit button will be disabled using the disabled attribute.

We’ll also pass the expected result of $num1 + $num2 to the data-res attribute of the submit button. For better security, we can also pass the target number inside a pattern to make it difficult for a bot to guess it.

<div class="col-md-6">
    <button data-res="<?php echo $sum; ?>" type="submit" class="btn btn-dark w-100 fw-bold" disabled>Send</button>
</div>

4. Check the Answer Using JavaScript

Each time the user sets the value of the quiz field, we’ll use JavaScript to evaluate their answer compared to the expected one. If both match, we’ll remove the disabled attribute from the submit button, otherwise the button will remain disabled.

const submitButton = document.querySelector('[type="submit"]');
const quizInput = document.querySelector(".quiz-control");
quizInput.addEventListener("input", function(e) {
        const res = submitButton.getAttribute("data-res");
        if ( this.value == res ) {
                submitButton.removeAttribute("disabled");
        } else {
                submitButton.setAttribute("disabled", "");
        }
});

5. Finished Form

Here’s how our form will look after these modifications:

You can download the full code from this GitHub repo. There's just a single PHP file. To open the project, use a local server like XAMPP or Laragon.

PHP

How to Run a PHP File

Sajal Soni

Conclusion

I hope you enjoyed this little exercise where we went through a quick approach to making our forms less spammy.

Again, in general, for better results, it's recommended that you use more effective approaches like reCAPTCHA. However, in cases this isn't possible for any reason, you can try the solution we discussed here. You can even make it more elegant by using other types of CAPTCHAs and quizzes. For example, you could have an array of 10 questions along with their expected answers. Then, serve on the front-end randomly one of those questions and handle the user’s response in the same way we did with the math quiz.

It's worth noting that if you are a Bootstrap lover and want to provide users custom form validation instead of the default browser one, you’re lucky! Bootstrap offers such implementation. Feel free to extend this example as wish!

Last but not least, if you want to know how to reduce the spam messages that are sent through email links, have a look at another tutorial where we discuss two effective techniques.

As always, thanks a lot for reading!