1. Code
  2. PHP

Create a Custom CAPTCHA and Contact Form in PHP

Scroll to top
Read Time: 11 min

Note: This tutorial was originally written 10 years ago. It has now been updated with entirely new code for generating a random string. Many of the comments in the discussion thread reference the original version of the code.

People write code every day to automate a variety of processes. We exploit the fact that computers are a lot faster and more accurate than humans, which lets us simplify a lot of mundane tasks. Unfortunately, these same abilities can be used to program computers to do something malicious like sending spam or guessing passwords. The focus of this tutorial will be on combating spam.

Let's say you have a website with a contact form to make it easy for visitors to contact you. All they have to do is fill out a form and hit the send button to let you know about a problem or request they have. This is an important feature of a public-facing website, but the process of filling out form values can be automated by malicious users to send a lot of spam your way. This type of spamming technique is not limited to contact forms. Bots can also be used to fill your forums with spam posts or comments that link to harmful websites.

One way to solve this problem is to devise a test which can distinguish between bots which are trying to spread spam and people who legitimately want to contact you. This is when a  CAPTCHA and PHP form come in. They generally consist of images with a random combination of five or six letters written on a colored background. The idea is that a human will be able to read the text inside the image, but a bot won't. Checking the user-filled CAPTCHA image value against the original can help you distinguish bots from humans. CAPTCHA stands for "completely automated public Turing test to tell computers and humans apart".

In this tutorial, we will learn how to create our own CAPTCHAs and then integrate them with the contact form we created in the tutorial.

How to Make a CAPTCHA

We will use the PHP GD library to create a CAPTCHA. You can learn more about writing text and drawing shapes with GD in one of my earlier tutorials. We will also have to write a little bit of code to create our random string to be written on the image that's created. Another tutorial, titled Generating Random Alphanumeric Strings in PHP, can help us in this regard.

Generate a Random String

All the code from this section will go in the captcha.php file. Let's begin by writing the function to create the random string.

The $permitted_chars variable stores all the characters that we want to use to generate our CAPTCHA string. We are only using capital letters in the English alphabet to avoid any confusion that might arise due to letters or numbers that might look alike. You can use any set of characters that you like to increase or decrease the difficulty of the CAPTCHA.

Our function creates a five-letter string by default, but you can change that value by passing a different parameter to the generate_string() function.

Generate a Cryptographically Secure Random String

You can use cryptographically secure functions to generate random strings and make the CAPTCHA PHP form harder to guess.

In this particular case, we can use the random_int() function in place of mt_rand(). It accepts the same two parameters but generates cryptographically secure random numbers. Here is our modified code for generating the random strings.

The only change we make here is the use of a third parameter in our generate_string() function. This third parameter called $secure is set to true by default. Later in the code, we check if $secure is set to true and then use random_int() to generate the string.

Modifying our function this way allows us to make the output of all our previous calls of the function cryptographically secure without making any changes to old code. It also allows us to generate random strings which are not cryptographically secure by explicitly setting the third parameter to false in any future calls.

How to Make a CAPTCHA Background

Once we have our random string, it's time to write the code to create a CAPTCHA image of our background. The CAPTCHA image background will be 200 x 50 pixels in size and will use five different colors for the background.

We begin with random values for the variables $red$green, and $blue. These values determine the final color of the CAPTCHA image background. After that, we run a for loop to create progressively darker shades of the original color. These colors are stored in an array. The lightest color is the first element of our $colors array, and the darkest color is the last element. The lightest color is used to fill the whole background of the image.

In the next step, we use a for loop to draw rectangles at random locations on our original image. The thickness of the rectangles varies between 2 and 10, while the color is chosen randomly from the last four values of our $colors array.

Drawing all these rectangles adds more colors to the background, making it a little harder to distinguish the foreground of the CAPTCHA string from the background of the image.

Your CAPTCHA picture background should now look similar to the following CAPTCHA image.

Here's a CAPTCHA PHP example of the background:

CAPTCHA background in PHPCAPTCHA background in PHPCAPTCHA background in PHP

Render the CAPTCHA String

For the final step, we just have to draw the CAPTCHA string on our background. The color, y-coordinate, and rotation of individual letters is determined randomly to make the CAPTCHA string harder to read.

As you can see, I'm using some fonts I downloaded from Google to get some variation in the characters. There is a padding of 15 pixels on both sides of the image. The leftover space—170 pixels—is divided equally among all the PHP form CAPTCHA letters.

After rendering the text string above the background, your result should look similar to the image below. The characters will be different, but they should be slightly rotated and a mix of black and white.

Here's a CAPTCHA PHP example of the background and the letters:

CAPTCHA background with textCAPTCHA background with textCAPTCHA background with text

Adding the CAPTCHA to Our PHP Contact Form

Now that we have created our CAPTCHA, it's time to add it to our contact form. We will use the contact form from my previous tutorial on how to create a PHP contact form and add the CAPTCHA just above the Send Message button.

We will be using sessions to store the CAPTCHA text and then validate the text entered by website visitors. Here is the complete code of our captcha.php file:

The fonts that you want to use will go into the fonts directory. Now, you simply have to add the following HTML code above the Send Message button from our previous tutorial on creating a contact form in HTML and PHP.

Sometimes, the PHP form and CAPTCHA text will be hard to read even for humans. In these situations, we want them to be able to ask for a new form with CAPTCHA in a user-friendly manner. The redo icon above helps us do exactly that. All you have to do is add the JavaScript below on the same page as the HTML for the contact form.

After integrating the PHP form and CAPTCHA and adding a refresh button, you should get a form that looks like the image below. Take a look at the following CAPTCHA PHP example:

PHP Contact form with CAPTCHAPHP Contact form with CAPTCHAPHP Contact form with CAPTCHA

The final step in our integration of the form with CAPTCHA we created with the contact form involves checking the PHP form and CAPTCHA value input by users when filling out the form and matching it with the value stored in the session. Update the contact.php file from the previous tutorial to have the following code.

We updated this file to first check if the CAPTCHA PHP code value stored in the session is the same as the value input by the user. If they are different, we simply tell the visitors that they entered an incorrect CAPTCHA. You can handle the situation differently based on what your project needs.

Final Thoughts on the Form with CAPTCHA

In this tutorial, we created our custom CAPTCHA in PHP from scratch and integrated it with a PHP contact form we built in one of our earlier tutorials. We also made the form with CAPTCHA more user-friendly by adding a refresh button so that users get a new string with a new background in case the previous one was unreadable.

You can also use the logic from this tutorial to create a CAPTCHA picture that relies on solving basic mathematical equations like addition and subtraction.

If you want to add a CAPTCHA picture to your website, you should check out some of the form and CAPTCHA plugins available from CodeCanyon. Some of these have CAPTCHA and many other features like a file uploader built in.

If you have any questions or suggestions, feel free to let me know in the comments. You should also take a look at this list of the best PHP contact forms.

Editorial Note: This post has been updated with contributions from Gonzalo Angulo. Gonzalo is a staff writer with Envato Tuts+.

Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.