Large Captcha for the short sighted.




Implementing simple but READABLE captcha : part 6a

Captcha for the shortsighted.

Please note:
If you have read through the last section (nr. 6 ) of the simple captcha implementation tutorials - you have not wasted your time as this section is very similar.

Once again this is captcha for non programmers with a slight difference.
We will again be creating a detour around your already existing web form and passing through the captcha verification before landing on your old but renamed web form.
But the captcha explained here produces much larger captcha generated code, and you can easily modify the size of the generated captcha code - but as opposed to the previous simple captcha, you also need freetype support in your server php - which if not there - can easily be installed by your server provider
( and if they charge you for the installation - change your server provider ).

Click here to preview the giant readable captcha for the short sighted (opens in a new browser window) that we will now be installing on your website


 

How to install giant readable captcha:

Before you start, make sure that php works on your server AND that freetype support is also installed on your server, AND that you have cookies enabled in your browser ...

 

Here we go:

 

Step 1:
Download the main giantcaptcha folder form this web site

If you click on this link:
giantcaptcha download
you will download a zipped file called :
giantcaptcha.zip

Once unzipped - a folder named:
giantcaptcha
should appear where your downloads usually appear
and if you open it you will see something like this:
readable captcha

Place this folder, giantcaptcha into your local web site folder on your HD
But ... Don't do anything to any of the files inside this folder yet
and no ... we are not yet ready to start uploading anything to your server.

.

 

Step 2:
Change the name of your existing web form.

In whatever location in your site your form is at presently - either if your form is directly placed in the root of your web site or in a sub-directory - just change it's name.
Presumably you will be doing this locally on your hd web site root folder.
If for example your existing form is called ' form.html ' - then change it to
'form1.html ' or something similar.

 

Step 3:
Create a new empty web page, in the same location as your old form used to be at, with the same name as your web form had before you renamed it.


In a nutshell, create a new empty web page in the same location where your existing form was and assign it the old name used for the form before.
If we continue along the naming example used above, then if your form used to be named
' form.html '
it is now named
' form1.html ' .
then the new empty .html page you create must be named as the old form so as in our case :
' form.html '

You can modify this new page ( form.html ) later to fit the look of your web site

 

Step 4:
Create a link in the body of this new and empty page - in our case we're going to do this in the new web page named ' form.html '

Create a link from this new page form.html that links to a file inside the giantcaptcha folder that you have now in your local web site root folder on your HD.
The file we need to link to is named start.php

If your new web page with the old form name resides in the direct root of your web site - then the code for the link should be :
<a href="giantcaptcha/start.php">

If your new web page with the old form name resides in a sub directory in the root of your web site - then the code for the link should be :
<a href="<a href="../giantcaptcha/start.php">


RECAP: read this and then do step nr 5 below
You should now have done the following:
And please note - we are still working inside your
web site folder ON YOUR COMPUTER - locally.
We are not yet doing anything on your server.

You have downloaded the giantcaptcha.zip file
Unzipped it
And placed the folder giantcaptcha into your web site root folder on your HD.

Wherever your web form was - you renamed it and left it at the same location

You created a new web page in the same location where your old and now renamed web form is, and given this new web page the same exact name that your form used to be named

You have added a link inside the body of the new web page
(named as your old form was named) to the document:
start.php which is inside the giantcaptcha folder

 

Why have we done this ?
We have created a new document in the same location as the old form, given this document the old form name so that all the links on your web site(s) still lead to the old form name in the same location but end up at a new web page which will be the entry page to the giantcaptcha folder.
We had to rename our old form as we cannot have two files of the same name in the same root or directory but the old form other than a name change has not undergone any changes.
AND has remained in the same location.

Result:
The result is that your users will still click the same link, or all the same already existing links on your website(s) to go to your old form, but will now end up at the new page, that is named same as your old form, which will divert them through the giantcaptcha folder, through the captcha verification process, at the end of which they will end up at your old (but renamed) form.

Still here (?)

If you have done this correctly - then each time your web user clicks the link to your web form, he ends up at a page which is not the web form, but is linked to the captcha verification.
Once in there, all he has to do is insert the captcha generated image code, and he will arrive at the 'go.html' page still inside the giantcaptcha folder - from which he will be taken to your old but renamed web form.

Step 5:
Modify the link in the body of the go.html document which is inside the giantcaptcha folder

The document go.html is a simple web page at which the user ends up on after going through the captcha verification process - and there is a link at the bottom of the go.html page which will take the user to your renamed form.

All you now have to do is modify this link with the correct path so that when clicked, it takes the user back to your old but renamed web form - wherever this is located in your web site structure.

Attention please, 50% of the support requests I receive involve the screwing up of this link.
You have to link the go.html file from inside the giantcaptcha folder to your old BUT RENAMED form wherever it was and still is in the structure of your website folder.

If you open the document:
go.html
which is inside the giantcaptcha folder in your web site root folder on your HD - you will find simple instructions as to where to add the link.
You can modify the look of the go.html document to suit the design of your website later.


Step 6:
Once you have completed all the above steps, then all you have to do is upload the following files and folders to your server:

1 - the old renamed form to the exact location where it resides in your web site structure

2 - the new web document that you created that now has the same name as your form had to the exact location where your old form was and still is but is now renamed.

3 - the giantcaptcha folder - which you place in the root of your web site.

 

Step 7:
Once you have uploaded the above mentioned files, go to your web site and click any link that was designed to take the user to your web form and verify if everything works.

This is what should happen:
Click any link that takes you to the old form name - and you land on the new web page you created, which is now named as your form was, from here you end up inside the giantcaptcha folder at the start.php document
Do the captcha thing
end up at the go.html document
and from there you end up at your old but now renamed form.

Done.

In a nutshell - and I repeat for the sake of clarityityityity.......

The user in the end lands at your existing form but is taken on a short detour where when he clicks any link on your web site that lead to your old form, he ends up at a new page with the same old name as the form to avoid link breakage, from here goes into the giantcaptcha folder through the captcha verification, ( start.php ), after which he ends up at the page go.html (still inside the giantcaptcha folder ) and from where he is taken to your old form which has just been renamed.

Things to watch out for.
Not many, just make sure you get the path-names right when you create the new entry page - the one with the same name as your form used to have - and that it really does have exactly the same name as your old form.
That you then link from this new page correctly to inside the giantcaptcha folder to the document named start.php, and that you then correctly assign the link from the page go.html back to your renamed form - wherever that is located in your web site structure.

The end. [ and those idiot wikipedia external link deleting editor gods do not deem this website worthy of being included in their CAPTCHA section .. sheesh. ]


If you have done all of the above by the letter, you have now implemented a GIANT and READABLE captcha for the shortsighted verification system on your web site without having had to do anything at all to your old web form except renaming it.
And even without touching the captcha php generating code documents.... unless you now also want to modify the size of the captcha image, the colour of the fonts etc.

 

How to modify the parameters for the size of the captcha created image, change the colour of the font and of the lines etc:

BEFORE you do the following - pleeaaase just implement the giantcaptcha folder as explained above and test it to make sure everything works. And then try some captcha image generation tweaking....

If you open the document captchaimage.php with a text editor, you will see the following lines of code:

// custom parameters
$box_w = 125; // Width of the captcha box
$box_h = 35; // Height of the captcha box
$font = 'arial.ttf'; // Used font
$font_size = 24; // Size of the font
$font_angle = 0; // Angle of text
$font_x = 10; // Margin left
$font_y = 5; // Margin top
$color_background = 'black'; // Background 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 = 1; // Thickness of lines
$lines_angle = 5; // angle of lines (from 1 to 10)
$lines_number = 5; // numbers of lines

// set a passcode
$pass = '';
$nchar = 5; // number of characters in image
for($i=1;$i<=$nchar;$i++){
$charOnumber = rand(1,2);
if($charOnumber == 1){
$chars = 'ABEFHKMNRVWX'; // custom used characters
$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;
}
}

// set the session

...from which, unless you are really thick, you should already be able to see which parameters are those that can be modified and what they will modify.

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 at a time, 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 24 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 characters
$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 part of 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 characters in image
for($i=1;$i<=$nchar;$i++){
$charOnumber = rand(1,2);
if($charOnumber == 1){
$chars = 'ABEFHKMNRVWX'; // custom used characters
$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;
}
}

// set the session

 

Also, you will notice the line:
$nchar = 5; // number of characters in image
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, even 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 = 125; // Width of the captha box
$box_h =
35; // Height of the captha box
...same for the rest in this part of the script

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

Attention please... and yes I repeat myself for good reason....
If you are not absolutely sure of what you are doing, then start by uploading the giantcaptcha folder to your server, test the whole thing to see if it works on your server (as per instructions above )
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, go through the above explained procedure of the whole captcha sequence you have set up - 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.

 

-- End of the 6a part tutorial on implementing giant captcha for non php / HTML programmers. --

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


 

This was the end of the addition 6a part to the six-and-a-half page captcha tutorial for beginners.
If you can manage to fiddle around with forms, and have minimal knowledge of HTML, and some PHP, then you may want to go to the next section, which is a one page tutorial on how to use the above described captcha inside a form itself.
Meaning that you will have the actual giant captcha verification process on the same page as the web form.
You can either use the form provided, or try and modify your own form and again there is a captcha download folder with all the files you need:
Again you can tweak the captcha generating parameters - add more letters and numbers etc.
Click here to see how the giant captcha resides inside a form, and can be modified, how the captcha image can be made bigger, how to change the colour of the background, font, thickness of the lines etc.

 

 


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 - Readable Captcha download and implementation of giant captcha - this page

 

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

 

Online examples of Captcha:

Using captcha  

Another example of captcha   

Captcha within a web form

Very simple captcha    

Captcha clock anyone ?

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 ]