Generate a very simple and effective captcha image in PHP then integrate with html form with validation


File structure:

php-captcha-form/
┣ captcha.php
┗ index.php

captcha.php

<?php

session_start();
//making dynamic text for our image string
$chars = "abcdefr340fkdsfjvndssdjfdsfjJDJFKEUFJ";
$rand_str = '';

//we want only 8 char string
for($i = 0; $i < 8; $i++){
    
    //apend it
    $rand_str .= $chars[rand(0, strlen($chars) - 1)];
}

$_SESSION['catcha_text'] = $rand_str;

//this img string we will store in session so we can compare with our imput


$str = $rand_str; // this text we will make it dynamic letter
//create img
$img = imagecreate(150,50);// width & height
$img_bg = imagecolorallocate($img, 255,255,255);  //rgba color name as white
$text_color = imagecolorallocate($img ,51,122,183); //sky color text image color
imagestring($img,4,30,25, $str,$text_color);
imagesetthickness($img, 3);
header("Content-type: image/png");  // we want png image
imagepng($img);
imagecolordeallocate($img, $img_bg);  //background color
imagecolordeallocate($img, $text_color); // image text color
imagedestroy($img);


index.php

<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
        <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
        <title>Contact form</title>
        <style>
           

            #contact-form{
                background: #fff;
                padding: 20px;
                margin-top: 30px;
            }
        </style>
    </head>
    <body>

        <div class="container">
            <div class="col-md-3"></div>
            <div class="col-md-6">
                <form action="" method="post" id="contact-form">
                    <h3>Signup form</h3>
                    <?php
                    session_start();

                    if (isset($_POST['name'])) {

                        if ($_SESSION['catcha_text'] != $_POST['captcha']) {
                            echo "Catcha is not matched , Try again..";
                        } else {
                            // connect db and insert data in table
                        }
                    }
                    ?>
 
                    <div class="form-group">
                        Email
                        <input type="email" id="email" name="email" class="form-control">
                    </div>


                    <div class="form-group">
                        <img src="captcha.php" style="border: 1px solid #ccc;">
                        <a href="">
                            <i class="fa fa-refresh" aria-hidden="true"></i>
                        </a>
                    </div>

                    <div class="form-group">
                        <input type="submit"value="Submit" class="col-md-12 btn btn-primary">
                        <div class="clearfix"></div>
                    </div>

                </form>
            </div>
            <div class="col-md-3"></div>
        </div>


        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
        <script src="https://code.jquery.com/jquery-2.2.4.min.js" ></script>
    </body>
</html>


output: