Building a Captcha to Deter Spammers Over the Internet — PHP gD Library Tutorial Part 3

As software development keeps on improving, the need for captcha is essential. What captcha does is that it prevents a robot from trying to submit a form on your site.

Our last tutorial discussed how to generate a watermark image using the PHP GD Library. In this tutorial, we’ll look at building a captcha. I also have other use cases for PHP GD at my blog.

If you would to like view the source code for this tutorial, please visit my Github_Repository. Show your appreciation by following me on GitHub.

Prerequisite

1. A code Editor(Vs Code or Sublime text)
2. Please make sure that GD(Graphics Draw) library is installed on your host. Most web hosts already have it. But if you don’t then you can install it, follow the instructions.

What you should know about Captcha

Here, we'll cover how to make a captcha using the GD library. We'll also look at PHP server-side captcha validation. Finally, we'll learn how to incorporate Captcha into a contact form.

On the Internet, scammers and hackers exist, and they create hazardous applications to gain access to your application. You might have a lot of trouble because of XSS attacks, SQL injection, and mass spam mailings.

Spam can increase server load and cause your online application to go down, which makes it unavailable. Customers or site users are immediately impacted. It affects your internet business as a result.

One of the greatest remedies for this affliction is a captcha. It guards against unauthorized access and spam bots. It stops bots from submitting pointless information through the PHP contact form.

A randomly generated code is used in the CAPTCHA. Run-time production takes place. It appears in a variety of shapes. Here are some examples of popular Captcha types:

Audio, Graphical (Image), and Text

The user must enter the random number that makes up the captcha code. Validation ensures that a genuine human entered the value; in essence, a bot has difficulty filling out the captcha code. In this manner, spam is avoided.

PHP Captcha With Registration Form Using GD Library

Now, we will be working on one of the most straightforward PHP CAPTCHA Script implementation examples. I created this project to show you the fundamentals of using a captcha to prevent spam.

You may get an idea of the planning we'll do to use our free PHP captcha script to stop spam by looking at the project structure below.

A captcha field has been set up first, after filling the captcha field and submitting. We will take to a straightforward contact form where visitors may provide their name, gender, and email. You have to go through the captcha test before you can fill out the main registration form, the captcha test is mandatory. As soon as the user submits the registration form, it will show successful at the top, below is the Structure of the project we will be working on.

\--How_to_build_a_simple_captcha_with_PHP_GD
  |-- css
    |-- style.css
  |--- fonts
    |-- Monofont.ttf
  |-- js
  |--- captcha.php
  |--- config.php
  |-- footer.php
  |--- form.php
  |--- header.php
  |-- index.php
  |-- register_action.php

HTML Contact Form with Captcha

The contact form has a file called header.php so create a file name header.php, the header.php file contains the HTML Doctype declaration and a set of link tags. The header page is a continuation of the index page I separated the full index page into three pieces the header, index, and footer. then I included them in the index page using the php include the statement below is the code snippet of header.php

Also, the contact form has a file called footer.php so create a file call it footer.php, the footer.php file contains the closing of the body and HTML tag, and some set of script tags. Below is the code snippet of the footer.php

The first page you will see when you open the project in your local host is the Index.php page, which is the captcha page that performs captcha validation before taking you to the registration page. Below is the code snippet for the index.php.

After writing the above code snippet, you will have to perform some styling, though I used Bootstrap v5 for the structure and the layout of the entire interface of the project. And we styled some tags and declared a variable in CSS. Below is the CSS Code Snippet for the styling.

Creating The Captcha Page Now Create a new file and call it captcha.php, the captcha page will be linked to the index.php file created earlier. Every code we will be writing on the captcha page will be linked to an image tag like the snippet you see below.

<img style="display: block; margin: 10%;" src="captcha.php" alt="image verification" />

In the image tag, we wrote an inline CSS that made our captcha to be positioned in the way it is.

While src='' we used it to link to the captcha.php page which means whatever is on the captcha page will be displayed as an image. The code below should be pasted in your Captcha.php file look at the code carefully you will notice how we got the captcha numbers.

We are generating random numbers using the md5() function, what this means is that we are getting different numbers with the function. Note, we can’t get the same set of numbers twice. Note that the MD5 algorithm is widely used because it is relatively fast and produces a relatively unique hash.

Just look at the code snippet carefully you will understand what we did there. Paste the code snippet below in the captcha.php file.

After running the above snippet the Interface below is what you will see on the index.php page on your browser.

Connect The Captcha To a Registration Form

Now, after running the captcha if it’s not successful it remains on the captcha page for you to try again, but if it’s successful it will take you to a page where you can register.

Now you will create a page called form.php and create another page called config.php the config will be the page that contains the database connection, below is the code snippet for the config page.

When using your form.php you will include the config.php first then you will include the header.php before writing the code for building the form. Below is the snippet for the form.php you created.

Note, you have to include the header and footer. So that the Form will have a good desktop and responsive view. If you follow the code simultaneously the interface below is what you will see in your browser.

Note, this form you just created has an action page, that enables the PHP validation process in the database. Please create a new file and call it register_action.php then write the code snippet below inside of the register_action.php.

Below is the action page of the form.php.

In the regster_action.php page, we selected the values in the name attribute in our form.php page saved them in a variable similar to their names and did some validation processes.

Now fill in the fields of the registration form and submit it, it will show success in a green background. But if it’s not successful it will take you to the captcha page to start afresh, like the interface below it shows success because the validation was successful.

Conclusion

We’ve come to the end of this tutorial, hopefully, you gained a ton of value from this tutorial.

In this GD library series, you have learned a lot, you can now generate watermark images, build a captcha, and more. We also did a level of form validation.

This is the end of this series GD library, I hope you have achieved a lot. Like this tutorial, drop a comment!!

Till next time, have a wonderful day!