March 11, 2024 5:02 am

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.

create Image less CAPTCHA with PHP

[wpdm_file id=77]DEMO

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.&nbsp;&nbsp;&nbsp; <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.

[wpdm_file id=77]DEMO

I hope it helps you so please feel free to give us your suggestions and improvements in comments below for our upcoming tutorials.

Author Huzoor Bux

I am Huzoor Bux from Karachi (Pakistan). I have been working as a PHP Developer from last 5+ years, and its my passion to learn new things and implement them as a practice. Basically I am a PHP developer but now days exploring more in HTML5, CSS and jQuery libraries.


Tutorial Categories:

8 responses to “How to create Image less CAPTCHA using PHP”

  1. Frank says:

    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

    • huzoorbux says:

      Please check code creator file might be run 2 times check this again and please share your website link if its possible.

      • Frank says:

        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?

  2. O'Sayo Michael Makinwa says:

    Really nice and helpful tutorial Huzoor

  3. Ramesh Singh says:

    hi your code is working thanks for this..i want to make a refresh refresh button for this?

  4. Razor Mureithi says:

    thax works perfectly

  5. Michael Shaba says:

    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.

  6. Rahul says:

    we need image captcha like this one its urgent.
    pls help us

  7. Rahul says:

    we need image captcha like this one its urgent.
    pls help us

  8. Rahul says:

    we need image captcha like this one its urgent.
    pls help us

Leave a Reply

Your email address will not be published. Required fields are marked *