Adding a Captcha Field to the Form

In this tutorial, we will add a Captcha field to our registration form. Captcha fields are important to make sure that a human and not a bot is registering for an account on your website.

Before we begin...

If you have not been following along with the form tutorials, you can either complete the tutorials or copy and paste the following code. So far in the tutorials, we have created a form in HTML and a process_form.php file to process the form and input the data into a database.

The form code (index.php):

<html>
<head>
	<title>Form Tutorial</title>
<style>
	body {
		margin: 0px;
		padding: 0px;
	}
	h1 {
		color: white;
		margin-left: 20px;
		font-family: "Comic Sans MS", cursive, sans-serif;
	}
	hr { 
		height: 0; 
		border-style: dotted; 
		border-width: 2px 0 0 0; 
		border-color: #EB464B; 
		width: 50%; 
		text-align: left; 
		margin-left: 20px;
		}
	#header {
		width: 100%;
		height: 50px;
		background-color: #82A9FF;
	}
	#content {
		background-color: #FFE5C2;
		margin-left: 50px;
		width: 800px;
		height: 100%;
	}
	#content form {
		margin-left: 90;
		padding: 10px;
		background-color: #EFFA71;
		width: 600px;
		height: 90%;
	}
	#content form h2{
		margin-left: 20px;
		font-family: "Comic Sans MS", cursive, sans-serif;
	}
	#submit_button{
		margin-left: 150px;
	}
</style>
</head>

The php code (process_form.php):

Downloading the Captcha files...

I use Securimage to generate the images for the Captcha. It is an open-source FREE PHP Captcha script and is very easy to add into your website.

Go to the following link and download either the 3.0.1 zip version or the 3.2RC2 zip version. For this tutorial, I am using the 3.0.1 version.

SecurImage Download Page
Unzip the Captcha files into a folder on the server where your website is located.

The HTML Code...

Now that we have the Captcha images installed and stored on the server, let's write the code to make them visible on our form.

On our form, in between the Selection List and the Submit button, we are going to add the code for our Captcha image.
First, we need to display the image. We do that by using the IMG SRC html tag and linking it to securimage_show.php in the folder that we copied onto the server.
We also need to add an input field for the user to enter the letters displayed in the image. We set the name of this field to Captcha_code.

The code for the HTML page:

Copy the Code: (The entire code for our form - Index.php)

<body>
<div id="header">
	<h1>Registration Form Tutorial</h1>
</div>
	<div id="content">
		<form method="POST" action="Process_form.php">
		<?php
			if (isset($_GET['error'])){
				if ($_GET['error'] == 1)
					echo "There was an error processing the form.";
				else
					echo "Your registration was successful.";
			}
		?>
		<h2>Site Registration</h2>
		<hr align="left" /><br />
		     <b>Username:</b> <input type="text" name="username" /><br />
		     <b>Password:</b>  <input type="password" name="password" /><br /><br />
		     <b>How do you get around?</b><br />
		     <select name="transportation">
		     	<option value="car">Car</option>
		     	<option value="bike">Bike</option>
		     	<option value="foot">Foot</option>
		     	<option value="broomstick">Broomstick</option>
		     </select><br /><br />
		     <b>Are you a human? Prove it by entering the text from the image below:</b><br />
		     <input type="text" name="captcha_code" size="10" maxlength="6" />
			 <br /><br />
		     <img id="captcha" src="/securimage/securimage_show.php" alt="CAPTCHA Image" /> <br /> 
		     <a href="#" onclick="document.getElementById('captcha').src = '/securimage/securimage_show.php?' + Math.random(); return false">
		     [ New Image ]</a><br /><br /> 
		     <input id ="submit_button" type="submit" name="submit_form" value="Join My Site" />
		</form>
	</div>
</body>
</html>

Making Sure the Text Matches the Image...

Finally, we are going to edit the process_form.php file to make sure that the input in the text field matches the text on the Captcha image.

We have to include the securimage.php file from the downloaded Captcha files on the server.
We need to create a variable that invokes a new securimage object.
We write the code to check if the input matches the image.

The PHP Code:

Copy the code: (Process_form.php - full code including Captcha additions)

Our form now has a working captcha to prevent bots from signing up on our website.

And this is what it looks like...

Thanks for following along. Leave a post if you have any questions or topics that you would like a blog post on.

Design My Mall

Search This Blog

Adding a Captcha Field to the Form

Comments

Post a Comment