How to Add a Captcha to HTML Contact Page

How to Add a Captcha to HTML Contact Page
Page content

Introduction

Before I jump into the code to add a captcha to an HTML contact page, I would to answer the question on what a captcha actually is. Well, a captcha is an image with human readable code embedded that requires any human intending to submit a form to verify a predefined code by replicating it to assure the system that it is not an automated piece of software that is actually filling out a contact form. Captchas are widely used to combat spam at the client side level.

Components of a Captcha

Captchas consist of three main sections. The first is the part that resides on the client end or the rather the web browser and that is the part that the user interacts with. The second section is the one that generates the code and presents it in the form of an image file which is human-readable but poses a problem to software or machines trying to read it. The third section validates the code to ensure it matches the code it generated.

The HTML Source Code

To add a Captcha to the HTML contact page, you would use a simple piece of code like the one below and include it in your HTML contact page.

The code above has three elements to it. There is the image which is actually a link to the dynamic image generation script with parameters read from the ID shown in the third element above and mapped with a one time piece of text which is entered in the text field named “Captcha” in the HTML code above. That is all you need to do as far as the HTML portion of the code goes.

The Rest of the Captcha

The rest of the captcha will be run off the server, which has several components to it. The first component is the script which generates a random ID and random text that is mapped to the ID and stores it in a database.

The second component is the script that generates an image by reading the respective ID and generated random text and then creating an image based on that with some level of noise to it so as to make it difficult to read for anything other than human beings.

The third component is the component that compares the ID submitted with the contact form and the value typed in by the human being with the ID and corresponding text in the database. If they match, your form validates otherwise your form fails to validate and the user to retype the details.

The server side components of captchas involve some lengthy code but you need not worry as in almost all cases if you import captcha scripts you will not be required to edit any code on the server side but rather place the files in the correct location.

In many cases adding a captcha to a HTML contact page would require some additional dependencies to be installed onto your server which mostly consist of the your web server’s ability to dynamically generate images on the fly. To get information on whether you have a compatible server you may have to contact you hosting service or your systems administrator.

Conclusion

You can find and download the files for the captcha class and dependencies here. as the code is too complex to post here. With these you can add a captcha to a HTML contact page. This sample script requires that your web server has GD graphics library installed and that it runs PHP 5. The file called securimage_show.php would be one pointed to in the contact form which in turn would be responsible for connecting to the rest of the components.

You cn find out more about captchas here and get other tips on captcha alternatives here as well.