How to create Image less CAPTCHA using PHP
We all using old and traditional image captcha to to confirm that the user sending data is a human or a machine but to create that image captcha we have to create images for each page which takes few seconds to load the page. People don’t understand your captcha image reload the image, so now I am going to show you an alternate of image captcha is image less captcha with PHP where it generates the number as a phrase and ask user to type it in numbers.
We have used a PHP class ( imagelessCaptcha.php ) to perform this task let see how to use that class and make it working. We included a demo and source code to download.
Also Read: How to create CAPTCHA image verification in PHP and jQuery
PHP Code
<?php
session_start();
if (isset($_POST['submit']))
{
$number = floatval($_POST['number']);
if ($number != $_SESSION['correctNumber'])
{
$message = "<span class='errors'>The number you entered for the spam filter is incorrect.</span>";
}
else
{
$message = "<span class='success'>CAPTCHA Verified!!!</span>";
}
}
// include the class
include "imagelessCaptcha.php";
// implement imageless
$imgLess = new imagelessCaptcha();
$CaptchaPhrase = $imgLess->formPhrase();
$correctNumber = $imgLess->getInt();
$_SESSION['correctNumber'] = $correctNumber;
?>In this code we include imagelessCaptcha class and get a phrase of numbers with actual number and store actual number in session to verify input on form submission.
Show the phrase on your forms to prevent spamming on your websites.
HTML Form
<div class="main">'.$message.'<br>
<form action="index.php" method="post">
<label class="highlight"><span> '.$CaptchaPhrase.' :(spam filter)</span></label><br>
<input type="number" name="number" step="0.1" class="textInput" />
<input type="submit" value="Send" name="submit" class="submit" />
</form>
</div>This markup shows an input box and a phrase like: What is two-hundred and ninety-six point seven written as a number? you have to write it in numbers in input area and submit.
All together complete HTML,CSS and PHP
<?php
session_start();
if (isset($_POST['submit']))
{
$number = floatval($_POST['number']);
if ($number != $_SESSION['correctNumber'])
{
$message = "<br /><span class='errors'>The number you entered for the spam filter is incorrect.</span><br />";
}
else
{
$message = "<br /><span class='success'>CAPTCHA Verified!!!</span><br />";
}
}
// include the class
include "imagelessCaptcha.php";
// implement imageless
$imgLess = new imagelessCaptcha();
$CaptchaPhrase = $imgLess->formPhrase();
$correctNumber = $imgLess->getInt();
$_SESSION['correctNumber'] = $correctNumber;
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>How to create Image less CAPTCHA with PHP | PGPGang.com</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style>
.main
{
margin-left:auto;
margin-right:auto;
width:625px;
}
.highlight {
background:rgba(255,240,0,.2);
}
.submit,
button {
height:auto;
width:120px;
margin:0;
padding:10px 20px;
text-align:center;
color:#fff;
font:700 1.2em/1.0em Helvetica, Arial, Helvetica, sans-serif;
background-color:#4d63bc;
outline:none;
border:none;
cursor:pointer;
position:relative;
-webkit-border-radius:6px;
-moz-border-radius:6px;
border-radius:6px;
}
.textInput,
textarea {
width:80%;
padding:5px 7px;
margin:0;
color:#4f4f4f;
font:400 1.2em/1.2em Helvetica, Arial, Helvetica, sans-serif;
background:#fff;
outline:none;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
position:relative;
border:2px #4f4f4f solid;
-webkit-border-radius:6px;
-moz-border-radius:6px;
border-radius:6px;
}
.errors {
padding:20px 20px 20px 40px;
background: rgba(255, 0, 0, .2);
-webkit-border-radius:6px;
-moz-border-radius:6px;
border-radius:6px;
}
.success {
padding:20px;
background: rgba(0, 255, 0, .2);
-webkit-border-radius:6px;
-moz-border-radius:6px;
border-radius:6px;
list-style-type:none;
}
</style>
</head>
<body>
<h2>How to create Image less CAPTCHA with PHP jQuery example. <a href="https://www.phpgang.com/">Home</a> | <a href="http://demo.phpgang.com/">More Demos</a></h2>
<div class="main"><?php echo $message; ?><br />
<form action="index.php" method="post">
<label class="highlight"><span><?php echo $CaptchaPhrase; ?></span></label><br />
<input type="number" name="number" step="0.1" class="textInput" />
<input type="submit" value="Send" name="submit" class="submit" />
</form>
</div>
</body>
</html>This is the complete code to implement in your web projects.
I hope it helps you so please feel free to give us your suggestions and improvements in comments below for our upcoming tutorials.
Tutorial Categories:
Hello there, this is a nice little script you got here. I’ve taken this and tried to implement it into my register page but i have one strange error. I have a validation class that does all my validation. When i submit the registration form $number is never equal to $_SESSION[‘correctNumber’] because when i echo out the $_SESSION variable it always renew when i hit the submit button. Therefore the correctNumber is always the one being displayed. How do I fix this? I’ve even tried with changing the superglobal to $_COOKIE with no luck 🙁 Best regards. Frank
Please check code creator file might be run 2 times check this again and please share your website link if its possible.
Hello again. Thanks for the quick answer. Hmm.. i use a singleton pattern to get all my classes, maybe that has something to do with it? I dont know..it seems strange. Will try to load the class manually to see if the same thing happens then. I don’t think it runs two times tho. Is there anyway i can PM you the website link?
Really nice and helpful tutorial Huzoor
hi your code is working thanks for this..i want to make a refresh refresh button for this?
thax works perfectly
Hello Good day , and i am a beginner in php, but sorry to stree u please , i am working on an online application form as a project using PFBC predefined class. i have been able to build or instantiate the class but i can not print to screen the result when a user fill the form, on submission. please would need your assistance.
we need image captcha like this one its urgent.
pls help us
we need image captcha like this one its urgent.
pls help us
we need image captcha like this one its urgent.
pls help us