In this article, we will see how to create a simple Math CAPTCHA form with the help of PHP, along with understanding its implementation through the example. To accomplish this task, we will use the PHP rand() function and check the sum of random numbers with the answer provided by the user.
Generally, we all have seen Google reCaptcha for the validation of the form submission. The CAPTCHA stands for Completely Automated Public Turing test to tell Computers and Humans Apart. It is a simple form validation technique that validates whether the user fills out all required things or not. In simple words, in reCaptcha validation, our task is to identify similar pictures or write text or numbers that are given by Google. Here is a new kind of captcha Math reCaptcha. The Math captcha is used that produces random numbers and checksum of these random numbers with user input.
Approach: To create Math ReCaptcha, we use PHP, JavaScript, HTML, and CSS. We will create a basic HTML form and style it using CSS. To generate the random numbers for the addition, we use the PHP rand() function, in order to check the user. If it is correct then redirect to the next page (in my case Welcome.php), else it will show the error “invalid captcha entered”.
The following steps will be followed to create the Math CAPTCHA form:
Step 1: Create an HTML form that will take the name, email, & text as input fields for filling in the captcha.
- index.php:
HTML
<!DOCTYPE html><html><head> <title>Math recaptcha</title> <link rel="stylesheet" href="style.css" type="text/css"/></head><body> <h1 style="color:green"> Geeksforneveropen </h1> <div class="container"> <form method="POST"> Name: <input type="text" name="name" autocomplete="off" required><br> Email: <input type="text" name="email" autocomplete="off" required><br> <div class="col-12"> <div class="row"> <div class="col-md-6"> <div class="row"> <label for="quiz" class="col-sm-3 col-form-label"> </label> <div class="col-sm-9"> <input type="hidden" name="no1"> <input type="hidden" name="no2"> <input type="text" name="test" class="form-control quiz-control" autocomplete="off" id="quiz" required> </div> </div> </div> </div> </div> <input type="submit" name="submit" id="submit"> </form> </div></body></html> |
- style.css:
CSS
* { margin: 5; padding: 0;}body { align-items: center; justify-content: center;}h1, h3 { text-align: center;}.container { margin: auto; padding: 3px; height: 400px; width: 300px;}.container input[type=text], select { width: 100%; padding: 10px 18px; margin: 6px 0; display: inline-block; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box;}.container input[type=submit] { width: 100%; background-color: #4CAF60; color: white; padding: 14px 20px; margin: 8px 0; border: none; border-radius: 4px; cursor: pointer;}.container input[type=submit]:hover { background-color: green;} |
Step 2: Add PHP code for Math Operation
This is the main part of Math ReCaptcha using PHP to implement math reCaptcha. First, we take two random numbers using rand($min, $max) that takes two values one is the minimum and the second is the maximum value. Then, we display the random numbers before the captcha input field.
<?php echo $num1 . '+' . $num2; ?>
Then we take hidden inputs to get the value of random numbers:
<input type="hidden"
name= "no1"
value="<?php echo $num1 ?>">
<input type="hidden"
name="no2"
value="<?php echo $num2 ?>">
Last we will check the sum of random is equal to the user input, if it is equal then redirect to the welcome.php or print the statement invalid captcha entered.
Example: This example describes the basic Math CAPTCHA form using PHP.
- index.php
PHP
<?php $min = 1; $max = 10; $num1 = rand( $min, $max ); $num2 = rand( $min, $max );?><!DOCTYPE html><html><head> <title>Math recaptcha</title> <link rel="stylesheet" href="style.css" type="text/css"></head><body> <h1 style="color:green"> neveropen </h1> <h3> Creating a Simple Math CAPTCHA form using PHP </h3> <div class="container"> <form method="POST"> Name: <input type="text" name="name" autocomplete="off" required><br> Email: <input type="text" name="email" autocomplete="off" required><br> <div class="col-12"> <div class="row"> <div class="col-md-6"> <div class="row"> <label for="quiz" class="col-sm-3 col-form-label"> <?php echo $num1 . '+' . $num2; ?> </label> <div class="col-sm-9"> <input type="hidden" name="no1" value="<?php echo $num1 ?>"> <input type="hidden" name="no2" value="<?php echo $num2 ?>"> <input type="text" name="test" class="form-control quiz-control" autocomplete="off" id="quiz" required> </div> </div> </div> </div> </div> <input type="submit" name="submit" id="submit"> </form> <?php if(isset($_REQUEST["submit"])) { $test=$_REQUEST["test"]; $number1=$_REQUEST["no1"]; $number2=$_REQUEST["no2"]; $total=$number1+$number2; if ($total==$test) { header("Location: welcome.php"); exit(); } else { echo "<p> <font color=red font face='arial' size='5pt'> Invalid captcha entered ! </font> </p>"; } } ?> </div></body></html> |
- welcome.php
This file shows our form was submitted successfully.
PHP
<html><body> <h1 style="color:green"> Welcome to neveropen </h1> <?php echo "<p> <font color=blue font face='arial' size='10pt'> Your form submitted successfully ! </font> </p>"; ?></body></html> |
Output:
