captcha modification logo

A completely different Captcha,
all done in PHP only.
And ... how to modify and change
the Captcha image parameters

 

 

In this Captcha section we have something a little bit different.

Here we will be examining a form with captcha inside the form, but also the various options with which we can modify or change the actual captcha generated image.

So this tutorial will server both as an insight on how the actual Captcha image generating PHP script can be modified and also to present a different type of Captcha usage.

If you are an absolute HTML / PHP expert, then you may want to skip all the following explanations, scroll down to the bottom of this page and just download the phpcaptcha folder and fiddle around with it by yourself.
There again, you may save yourself time and aggro in just skimming through this page.

For this captcha to work, other than having PHP installed on your server, and cookies active in the user's browser, you also must make sure that your server has freetype support enabled.

If you are not such an expert in PHP etc, then you should read this page from top to bottom.

First of all ... let's just give this particular captcha a go.

Click here to see the captcha and php we will be examining and that you will later download for your own use - opens a new window - when done close the window and continue reading here

The first thing you may have noticed is that now we are working in PHP alone.
The actual form which contains the captcha generated image is now a .php web document and no longer a HTML document with php embedded.

You can deduce this just by analysing the url of the above link which was:
http://www.captcha.tv/captcha-modifications/form-and-captcha.php

And form-and-captcha.php was the actual form document.

This is why this section is under the Know-it-all label:

because once you download the included captcha files below, you will soon discover that simply modifying the actual fields of the form cannot be easily accomplished in a web editor such as Dreamweaver or FrontPage because the file format is PHP pure, and this is why minimal knowledge of messing around with PHP is required. At least to reconfigure the form fields for your own use.

Also, we are now using a font file which needs to be uploaded to your server along with the other files because we are using this font file to be able to more precisely access and modify the character attributes.
Meaning that we can change the size, colour, angle of the font in question which then appears in the captcha image.
For this captcha to work, other than having PHP installed on your server, and cookies active in the user's browser, you also must make sure that your server has freetype support enabled.
This is something your server provider should activate for you if it is not already active.

I won't go as far as to explain the actual modifications of the form fields because as by now you probably know, I am not a programmer and to modify the fields in the form, to add more or to redesign their positioning etc. it is presumed that being versed in php forms, that you already know how to do this.

But... you will find information further down on which parts of the captcha generating image php script you should modify to be able to do a number of things.

For example:
if you open the two following links together, both will open a new browser window, you will get the same form that you opened above and another form where the captcha code has been modified to obtain a different captcha image.
Just open them both and view them side by side in your browser.

Click here to open the previous form (opens in a new browser window)

and then click here to open the modified captcha form (opens new browser window)


Isn't that just great ?
A larger Captcha image with giant letters, background colour changed etc.

Quite a few people have written in saying that the captcha solutions presented on this site were perfect - except for their small size - which is a main complaint by anti-captcharians who say that for the short or impaired sighted, captchas usually tend to be too small.

Not anymore and now we can make GIGANTIC captcha images and also keep the font character in good resolution, not to mention the thickness of the lines and angle modification.

All these parameters are dead easy to modify, and once you have gotten your form sorted out with all the fields in place, you can then just change a few numbers in the captcha generating script to add size, colour and angle.

But that's not all that Tony, my super italian programmer has added upon my millionth ridiculous request ( Grazie Tony!)

Try this version.
After you open the form in a new browser window, just scroll down to the form, don't bother filling it in but just click the 'Send Form' button ... and be amazed.

What should happen is that you will obviously get an error because you did not insert any captcha code at all, but you will notice that after the page redraws itself to give you the error - the browser scrolls automatically down to where the form is.

Try it now ( opens in a new browser window )

Yeah, yeah, yeah, .... I can already feel my ears burn as all you expert programmers say .. so what ?
For me, the php/HTML idiot, this function is almost as good as the new Apple iPhone which I won't have until later this year.

Also a nice addition now is that if the user gets the captcha code wrong, the page is reloaded, and a new code is generated automatically, and the contents of the filled in fields if the form remains. Meaning the user does not have to start filling out the forms from scratch.


So - let's get started:

The captcha download folder phpcaptcha (further down) that you will download contains the following files - and all of these should be uploaded to your server:

arial.ttf
captchaCheck.php
captchaImage.php
form-and-captcha.php
result.php

 

arial.ttf = the font that PHP uses to generate the captcha image
you must make sure that your server has freetype support enabled,
otherwise this Captcha won't work.

captchaCheck.php = this file checks that the correct captcha code
was inserted ( see below )

captchaImage.php = the captcha image generator and also where you can modify the size of the image generated, background colour, font colour, how many lines, thickness of lines and many other captcha parameters.

form-and-captcha.php = the actual form document with the fields to be filled out by user, where the captcha generated image appears and the send form button etc.
Also shows the user an error warning in case the user inserts a wrong code, in which case a newly generated captcha image is shown.

result.php = this works side by side with the form page and stores all the information the user inserted into the form fields, and then if the captcha code was correct, sends them off.
Also contains the e-mail address to which you want to send the content of the form.

 

 

A few notes on all these files and how they work together:

I wouldn't dare start giving all you PHP experts lessons in PHP, but for the rest of you who only half know what you are doing - like those who think they can modify the form without PHP knowledge, add more fields etc. and generally fiddle around with this with minimal PHP know-how - here is what you should be aware of...

As far as the font file is concerned, arial.ttf ... you don't need to know anything here, EXCEPT THE FACT that your server must have freetype support for PHP for this captcha to work.
If not sure ask your server provider to install freetype support on your server.
Otherwise just include this file with all the other files and then forget about it.
By include I mean upload to server with the rest.

The actual web form is the form-and-captcha.php file and this works together with the result.php file and as you will see, the fields in the first one are and must be repeated in the second one.

The file that contains the e-mail address to which the content of the form will be sent to is the result.php file.
Here is the part in the script of the result.php file where you must change the e-mail address:
// send the form contents to an email address
$mailuser = "yourName@yourDomainnNamee.com"; // destination email address

Instead of:
yourName@yourDomainnNamee.com
insert the email address that will receive the form content.

The captchaCheck.php file and what it does:
When the form is sent we have to check that the captcha code inserted was correct.
In previous captchas on this website we had a situation where after the user clicked the send form button, if she erroneously typed in the captcha code, she ended up at another page telling her that she made an error and the user had to click back in her browser to try again.
In this particular captcha when the user clicks the send form button, the form page (form-and-captcha.php) is reloaded and the first script it encounters is contained inside the captchaCheck.php file which checks the correctness of the captcha code inserted by the user, if correct the form is sent using other parameters inside the result.php file such as to which e-mail address to send the contents of the form fields ... and the user is presented with the results page
where he can see a recap of all the information he inserted into the form.
If the inserted captcha code is not correct, the user remains on the form page which informs him of his error, and also regenerates the new captcha image, and he has to try again in inserting a new captcha code.
In a nutshell:
If the captcha code inserted is correct, the user won't even see the reloading of the form page. If the captcha code inserted is NOT correct, the user will be presented with the reloaded form page.

[ I go by the assumption that if you have reached this point on this web site that you MUST be aware of the fact that most of the stuff which deals with Captcha and PHP cannot be tested locally on your computer HD or PC/Mac desktop but must be uploaded to a server and then tested via an internet connection and a browser - live...]

To modify the captcha generated image we need to open the captchaImage.php file with a text editor and change some parameters:
// custom parameters
$box_w = 180; // Width of the captcha box
$box_h = 45; // Height of the captcha box
$font = 'arial.ttf'; // Used font
$font_size = 36; // Size of the font
$font_angle = 0; // Angle of text
$font_x = 10; // Margin left
$font_y = 5; // Margin top
$color_background = 'black'; // Bakground color: black, white, green, blu, red
$color_text = 'white'; // Text color: black, white, green, blu, red
$color_lines = 'white'; // Lines color: black, white, green, blu, red
$thickness = 2; // Thickness of lines
$lines_angle = 4; // angle of lines (from 1 to 10)
$lines_number = 9; // numbers of lines

These are all pretty self explanatory and if you are not too sure what the effect will be, then start by changing just one parameter, save and upload the file to your server, open the form page in your browser, see how your modification appears, and then try some more.

For example, if you want a white background then this is what you need to change:
$color_background = 'white'; // Bakground color: black, white, green, blu, red

In this case if you want blue - then you must write blu and NOT blue!

If you want to change the thickness of the lines, then change that parameter. Watch it here because the values in this particular case go from 1 to 10 ONLY.

If you want a larger font then substitute the number 36 with a bigger value - like 64.

You can also pre-determine the letters and numbers that you want to use. In our Captcha, we have opted to use the following:
$chars = 'ABEFHKMNRVWX'; // custom used chars
$numbers = array(1,2,3,4,7); // custom used numbers

This for obvious reasons.
Capital letters are less confusing with numbers and even then we have eliminated some of the capital letters.
For example the capital letter O is pretty similar to the number zero (0) so the capital letter O is not included.
Same for some numbers such as the number 5 which could be confused with the capital letter S. ... and so on.

See the script here bellow for an overview where you can see the capital letters we are using and also the numbers
which in this case are : 1. 2. 3, 4, 7.
// set a passcode
$pass = '';
$nchar = 5; // number of used char
for($i=1;$i<=$nchar;$i++){
$charOnumber = rand(1,2);
if($charOnumber == 1){
$chars = 'ABEFHKMNRVWX'; // custom used chars
$n = strlen($chars)-1;
$x = rand(1,$n);
$char = substr($chars,$x,1);
$pass .= $char;
} else {
//$number = rand(3,7);
$numbers = array(1,2,3,4,7); // custom used numbers
$n = count($numbers)-1;
$number = $numbers[rand(1,$n)];
$pass .= $number;
}
}

Also, you will notice the line:
$nchar = 5; // number of used char
and here we have decided to generate up to 5 characters inside the captcha code. If you change the five to a 3 for example, then the captcha image will only generate up to and no more than 3 characters

So, in a nutshell, to modify the captcha image generator's parameters, and if you are not a PHP expert, try and modify only those parameters in the code in lines which also contain the two slashes:
$box_w = 180; // Width of the captcha box
$box_h = 45; // Height of the captcha box

...same for the rest in this part of the script

and:
$nchar = 5; // number of used char
$chars = 'ABEFHKMNRVWX'; // custom used chars
$numbers = array(1,2,3,4,7); // custom used numbers

Attention please.
If you are not absolutely sure of what you are doing, then start by uploading the phpcaptcha folder to your server, test the whole thing to see if it works on your server ( instructions in the next section )
and only then open the captchaImage.php file AND START BY CHANGING ONLY ONE PARAMETER AT A TIME.

For example, change the background colour of the Captcha image.
Save the file, upload to where the files are on your server - in this case just substitute the captchaImage.php that was already on your server with the modified version, open the form page form-and-captcha.php in a browser, see that your background colour modification has taken effect, and then try the whole procedure again changing some other parameter.
You should get the hang of this within 10 minutes of changing values, uploading and seeing the result in your browser

Download files and instructions:

Download file = phpcaptcha.zip (is further down because I really would like you to read all the instructions to avoid receiving unnecessary support request)
The folder you will get once you unzip the download is named:
phpcaptcha

Procedure in testing if it works on your server.
[ you must have PHP AND php freetype support installed on your server for this captcha to work - and cookies enabled in your browser]

Open the phpcaptcha folder, find and open the result.php file and with a text editor edit the email address.
In the following part of the script:
// send the form contents to an email address
$mailuser = "yourName@yourDomainnNamee.com"; // destination email address

Instead of:
yourName@yourDomainnNamee.com
insert the email address that will receive the form content.
Obviously this email address that you insert must be active and you must have access to downloading e-mail from it.
Make sure you don't erase anything else.
For example, if your email address is : frankzappa@yowza.com
then the script should look like this:
// send the form contents to an email address
$mailuser = "frankzappa@yowza.com"; // destination email address

Then save the result.php file and upload the whole phpcaptcha folder to the root of your web site

Then in your browser go to:
http://www.yourDomainName.com/phpcaptcha/form-and-captcha.php
[[[[ ehm .... needless to say - you are connected to the internet and are about to go live to your website and not just to your local HD ]]]

The web form should now be open in your browser and you can give it a go.
Fill in the fields, insert the captcha code and send off the form - wait for a few seconds and then download your e-mail for the email address you inserted into the result.php file.
If it works, and you receive the contents of the form via e-mail there you have it and now you can start personalizing the form fields, and even the captcha image parameters.

If it does not work - then either your server does not support PHP, or you have no freetype support installed - see your provider about this, you have disabled cookies in your browser, or you have messed up somewhere.
Maybe whilst editing the email address you overwrote some part of the rest of the code.

Here is the download file for the captcha and PHP explained above:
phpcaptcha.zip


Problems, bugs and not having read the f#@k!ng manual

Before you write in to say that the above is not clear, do yourself a favour and follow the above instructions to the letter.
Most people skim, think they know-it-all, miss a point, then try it, and it screws up, and don't realize that the point they missed is not a bug or misinformation but their own lack of attention.

Also, from support requests that I have received in the past, 100% of any problems that people had with the captchas presented on this website were:
PHP was not installed on their server
Freetype support in PHP was missing ( necessary for this captcha version )
They had cookies disabled in their browsers
They forgot to include all the files necessary ( and supplied)
They got the paths wrong when fiddling around with web site location or where they decided to place the files here included
They erased half the php code when inserting their e-mail address or when changing the image parameters
And - yep has happened ... they were attempting to run the actual form and all the php scripts locally on their computer and not live on the web.

However - if you really do find any incongruity in the above, or have constructive suggestions on all or any part that would help me make it even more fool proof and crystal clear - don't hold your breath and please let me know.

Same goes for the php code and the functionality of the actual captcha sequence and form.
This was all put together by Tony, my good friend and programmer, from scratch and has been tested exhaustively with various browsers, even edited and preconfigured up on a Mac, and run from a few servers and should work without a hitch.

If you do find any bugs - please let me know.

--------------------------------------------------------------------------

If you found any of this Captcha stuff usefull, especially if it worked for you, then feel free to show your appreciation and help support this website .... ehm I mean help support my smoking habit by making a minimal donation .... the amount is up to you - thanks.

Also if any of the captcha stuff on this website has made your life easier then feel free to place a link on your website to this site to help other users with understanding captcha and captcha implementation.
Suggested text for link: How to use Captcha - no brain surgery needed.
link URL: http://www.captcha.tv

If you found any of this useful, so will thousands of other non programming webmasters like you and myself and here it really is a case of spreading the word to some good old free stuff which aims to combat spam.

Thanks

Pete

 


Site Index:

How to use the Captcha tutorials :

How best to use this captcha website - where should you start from ?

 

The six part captcha tutorial for beginners:

1 - How to use captcha

2 - Forms without captcha   

3 - Forms using captcha

4 - More examples of using captcha in forms 

5 - The captcha solution anyone can use on their website  

6 - Free Captcha download and implementation of captcha

6a - Captcha for the short sighted - implementation of large and readable captcha

 

More advanced captcha tutorials:

How to insert captcha inside a web form

Captcha for more advanced web masters with some php know-how:

How to modify a captcha image - this page

 

Online examples of Captcha:

Using captcha  

Another example of captcha   

Captcha within a web form

Very simple captcha    

Fully functional example of captcha and form

Large, BiG, GIANT Captcha, with captcha image tweaking options

 

Contact www.captcha.tv

Contact this website - if you have anything interesting to add


Other captcha information:

Captcha programmer

Captcha links to captcha resources

 

Captcha web site navigation

Captcha web site map


[ andare qui per tutorial su Captcha in italiano ]