How to implement Captcha.




How to use captcha : part 6 of 6

Captcha explained - for idiots like me.

Please note:
What follows is an idiot proof method of implementing the captcha that I myself use and presumes that you have almost no programming, php nor html code knowledge.

It does presume that you at least know how to link one web page to another. That's all there is to it.

The objective here is to bring the user inside the folder 'mycaptcha' that you will have later downloaded, and will uploaded onto your server.

This will make the user go through the captcha verification before ending up at your web form.

And you are going to accomplish this without making any changes to your present form, and above all, without having to change all the links on your web site that lead to your present existing form.


 

Initial captcha test implementation

Before you start, to make sure that php works on the server where your web site is, and also to get an idea of what we will partially be doing please follow the next instructions:

Download this captcha file:
testcaptcha.zip

and when un-zipped- you should have a folder named:
testcaptcha


Upload this folder testcaptcha to your web site server root, and then
open your browser and go to the following url:
http://www.nameOfYourWebiste.com/testcaptcha/start.html
and click the link on the page that appears.

This will take you through a captcha verification sequence.

[ here is a video tutorial which explains step by step how to upload the testcaptcha folder to your server and how to test if the captcha works ]

If this works, then your server supports PHP and you are ready to continue to the steps further down on this page to implement captcha around your existing web form.
If it works eliminate the testcaptcha folder from your web site root as you won't need it anymore.

If it doesn't work - then you may have a server with no PHP support so ask your hosting provider if that really is the case and if yes to get them to install php.
Also, make sure you have cookies enabled in your browser when testing the above.

 

Once you get the testcaptcha working, continue with the following:

 

This the general integration and implementation of captcha into your web site structure step by step.
After you have executed the following steps and everything works, you will understand the objective and then you can modify things like page names or their aspect to your liking

Here we go:

Step 1:
If you are a real beginner webmaster:
Before you do anything, make a copy of your web site folder that you have on your computer hd and put it in a safe place. [ You do have a copy of your website on your local HD don't you ??!!! ]
This is just in case you screw up something and then don't remember where everything was before and so if you have an exact copy of what you now have on your site server and if the worst comes to the worst, you can just upload the safe copy of your entire site back to the server.

Step 2:
Download the main mycaptcha folder form this web site
Not to be confused with the testcaptcha folder you already downloaded above.

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

To simplify the usage and implementation of this captcha solution, here is a step by step video tutorial on how to implement this captcha - but please read the rest of this page after you have viewed the tutorial

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

Place this folder, mycaptcha into your 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 3:
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 4:
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 '
but is now named
' form1.html ' .
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 page later to fit the look of your web site

 

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

Create a link from this new page that links to a file inside the mycaptcha folder that you have now in your web site root folder on your HD.
The file we need to link to is named captcha-page.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="mycaptcha/captcha-page.php">

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

RECAP: read this and then do step nr 6 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 mycaptcha.zip file
Unzipped it
And placed the folder mycaptcha into your 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 to the document:
captcha-page.php
which is inside the mycaptcha 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 captcha 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 a new page, that is named same as your old form, which will divert them through the mycaptcha folder, through the captcha verification process, at the end of which they will end up at your old (but renamed) form.

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 captcha folder - from which he will be taken to your old but renamed web form.

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

The document go.html is a simple web page where there is a link at the bottom of the page which will take the user to your renamed form.

All you now have to do is modify this link so that when clicked, it takes the user back to your old bur 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 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 mycaptcha folder in your web site root folder on your HD - you will find exact instructions.


Step 7:
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 on 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 mycaptcha folder - which you place in the root of your web site.

 

Step 8:
Once you have uploaded the above mentioned files, go to your web site now 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 in the captcha folder at the captcha-page.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 mycaptcha folder through the captcha verification, ( captcha-page.php ), after which he ends up at the page go.html (still inside the mycaptcha 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 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 captcha folder to the document named captcha-page.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.
If you have done all of the above by the letter, you have now implemented a captcha verification system on your web site without having had to do anything at all to your old web form except renaming it.

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

If you would like to implement a larger version of the above captcha
using the same system as described above - go here:
Captcha for the short sighted - implementation of large readable Captcha

To start this whole 6 page tutorial on Captcha again go back to part 1

.

 

This was the end of the 6 page captcha tutorial for beginners.
If you can manage to fiddle around with forms, have minimal knowledge of HTML, then you may want to go to the next section, which is a one page tutorial on how to insert captcha into a form.
Meaning that you will have the actual captcha verification prosecc 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:
How to insert captcha into web forms


Captcha image generator modifications:

Remember the problem with captcha that sometimes even a human has a hard job in reading the generated image ?
I have now added a completely new captcha sequence, which is for the intermediate webmaster with at least some knowledge on how to change the aspect of a form which is created in PHP only.
However - this will give you some insight on how to tweak the captcha generating parameters even in the simple captcha which we have dealt with up to now.
Also - how to add more letters and numbers.
Click here to see how captcha 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.

 

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

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 - this page

6a - Captcha for the short sighted - implementation of large 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

 

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 ]