Make Your Own Captcha System On User SignUp Using PHP And Ajax

Last Updated : Jul 1, 2023

IN - PHP Ajax | Written & Updated By - Pragati

In this tutorial we will teach you how to make your own captcha system with the help of PHP and Ajax, Captcha is the best way to avoid spamming your SignUp, Comments, Email and many other things that takes user input.

What is Captcha? It is a simple text combination of some uppercase and lowercase letters with some numbers generated randomly with some special kind of text type font.

It is mainly used for Human Verification whether the user is human or any computer script.

You may also like add google recaptcha in signup form using PHP.

CHECK OUT THIS TUTORIAL LIVE DEMO →

To Make Your Own Captcha System On User SignUp it takes only three steps:-

Make a HTML form for User SignUp
Generate Captcha
Connect to the database and insert data

Step 1. Make a HTML form for User SignUp

We make a HTML form with post method and save it with a name dosignup.html

<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">

function getcaptcha()
{
 $.ajax({
 type: 'post',
 url: 'captcha.php',
 success: function (response) {
  $('#captcha').attr('src','captcha.php')
 }
 });
}	
</script>

</head>
<body>
		
<form method="POST" action="insertdata.php" >
 <input type="text" name="username" >
 <input type="text" name="useremail" >
 <input type="password" name="userpass" >
 <img src="captcha.php" width="150" height="100" id="captcha">
 <input type="button" value="Reload Captcha" onclick="getcaptcha();" >
 <input type="text" name="captcha_text">
 <input type="submit" name="submit_form" value="SignUp">
</form>

</body>
</html>

In this there is nothing new except one thing a image tag this image tag is display the captcha image we made in captcha.php page.

The user also can request for another Captcha by clicking on Reload Captcha Button. You can do validation to make your code more secure or you can view our How to do validation before and after submitting the form tutorial.

Step 2. Generate Captcha

In this step we generate Captcha with the help of PHP GD functions. We load a image and make that image as a background for Captcha text and 7 random generated characters with numbers as a Captcha text.

We use larabiefont.ttf for captcha font you ca download any font file for captcha font without font file the captcha will not display.

// captcha.php

<?php

session_start();
header ('Content-type: image/png');

$chars = "012345678901234567abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ";

$captcha_text = '';
 
for ($i = 0; $i < 6; $i++) 
{
    $captcha_text .= $chars[rand(0, strlen($chars)-1)];
}	

$captcha_bg = @imagecreatefrompng("captcha.png"); 
	
imagettftext( $captcha_bg, 30, 0, 0, 40, imagecolorallocate ($captcha_bg, 0, 0, 0),
 'larabiefont.ttf', $captcha_text );

$_SESSION['captcha'] = $captcha_text;

imagepng($captcha_bg, NULL, 0);
imagedestroy($captcha_bg);

?>

First we start a session and generate some random character you can increase the length of the captcha text as many as you want.

Then we load captcha.png image for captcha background and with the help of a PHP GD function imagettftext(); we write our captcha text over the captcha background image the syntax of function is this.

array imagettftext ( resource $image , float $size , float $angle , int $x , int $y , int $color , string $fontfile , string $text );

If you want to get Complete information of PHP GD functions you can check from this site and then we put our captcha text in session variable.

Step 3. Connect to the database and insert data

Before we insert the data into database we check if the user captcha text is same as we store the captcha value in session if yes we insert the data and if no we do not signup and display a message for wrong captcha. You may also like jQuery form validation.

// insertdata.php

<?php

session_start();

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

$user_captcha = $_POST['captcha_text'];

if($user_captcha==$_SESSION['captcha'])
{
$name = $_POST['username'];
$email = $_POST['useremail'];
$password = $_POST['userpass'];

$host = 'localhost';
$user = 'root';
$pass = ' ';

mysql_connect($host, $user, $pass);

mysql_select_db('demo');

$insertdata=" INSERT INTO user VALUES( '$name','$email','$password' ) ";
mysql_query($insertdata);
}
else
{
echo "Wrong Captcha Please Try Again";
}
}
?>

That's all, this is how to make your own captcha system using PHP and Ajax. You can customize this code further as per your requirement. And please feel free to give comments on this tutorial.

I hope this tutorial on captcha verification using php helps you and the steps and method mentioned above are easy to follow and implement.

CHECK OUT THIS TUTORIAL LIVE DEMO →

About Pragati

Experienced coding content writer who enjoys breaking down complex concepts in programming languages like Java, Python, C, and C++. Over three years of experience producing interesting and relevant content for a variety of entities. Committed to providing concise and easy-to-understand articles that assist readers in easily understanding technology and industry trends in the world of coding and software development.

Follow Pragati On Linkedin 🡪