How to insert Captcha
inside a web form

( A form with captcha inside the form )

This captcha solution will need some fiddling around with so if you
have even limited html knowledge then you should first try the
simple captcha solution where no programming of any sorts is required.
Go here for the simple captcha solution

Otherwise, if you know how to modify web forms, or how to insert a
few lines of PHP into your own existing forms - continue here below.

 

This form will take a bit of fiddling around with but anyone should
be able to get it working / personalize it on their server if PHP is
installed and if cookies are enabled in end user's browser.

You can download the whole captcha and form folder lower down below
but please either read the information on this page first, or read it from
the downloaded html document which has the same captcha instructions
as this page you are reading now.

How it works

[ if you are not a programmer and do not read from here to the bottom
of this page before you start to fiddle around with this, then it will be
a FRUSTRATING experience and you will be wasting your time
so PLEASE read this page right to the end before downloading anything ]

 

Here we go .....
First of all we need the form so here is the form:


Please insert the requested information below and you may win
TEN MILLION DOLLARS

Company :
 
If you are not a company leave empty
Name:
  Surname:
Address:
ZIP:
  City:   Region
Email:
 
Telephone:
   Mobile  

(erases all data inserted up to now )


Ready ? Ok, but before you click 'Send Form' please insert the same letters and numbers you see in this image into the box to your right ->
:

   

 

The above form is in the document 'form-and-captcha.html'
which is one of the three captcha files for downloading.

The fields in the form are also repeated in the php document   
' captcha.php '
also included in the download and what you want to make sure of is that the field names in the form above - OR EVEN IN YOUR OWN FORM are repeated and have the same names inside the captcha.php document.

And as you will see, these are repeated twice in captcha.php, once at the top and then again lower down in the captcha.php document so if you edit any fields in the form, or create your own form, make sure you also edit / add your field names from the form into the captcha.php document.

If you are going to be implementing this in your own form, then you are on your own and I do not offer support for setting up your own forms to work, so if in any doubt on how to insert the captcha calling source into your own form - either just use and modify this form above, or at least do this first and then when you get this form to work, give it a go on your own form.

I do not offer support in this case simply because I really am NOT a php programmer and have just about managed to fiddle this together to get it to work for me - but if you have minimal knowledge of html, which is more than I have - you should be able to get it working. Especially if you examine the form 'form-and-captcha.html' source code, and also the source code in the captcha.php document where there are ample comments to help you on your way.

The third document included for downloading is the captcha image generator 'captcha_image.php'
and in there you don't really need to do anything but just include it with the other two files mentioned above in the same location on your server.

Just by the by, the 'captcha_image.php' is the file that has the colour values of the form and this can be fiddled around with to change the colours and even the lines created in the captcha generated image.
I will be putting up a tutorial on how to do this sooner or later.

 

An idiot's understanding on how this captcha inside a form more or less works and interacts together.

1]
Once this page : 'form-and-captcha.html'
is loaded in a browser ( from your server and not locally from your HD )
the captcha image is generated by the 'captcha_image.php ' file.

2]
If the user then fills in the form, inserts the captcha generated code into the field and sends it, or even just fills in the captcha code and sends the form empty by clicking the Send Form button, the form verifies that the correct captcha code was inserted.
It does this via the captcha.php file through the variable $_POST["captcha_input"],
and the correct answer is stored in the cookie $_COOKIE["pass"]
The captcha.php file has comments inside it which may be usefull for your reference.

3]
If the inserted code was correct - then the form will be processed by the captcha.php file :
<form action="captcha.php" method="post">
and uses that to elaborate the data and send it off.

4]
If the wrong captcha code was inserted the form will generate an error inviting the user to try again

 

Code that you MUST change to get this working:

I suggest to start with you don't change any fields nor anything else EXCEPT for one thing.

The folder that you will download is named : captchaform

Open it, and open the file : captcha.php
in a text editor

and edit just the destination e-mail address ( your email address to which the form content will be sent to).

This is about half way down the page source:

//sends email via php to the following address
$mailuser = "yourName@yourDomainXYZ123.com";

Substitute: yourName@yourDomain.com
with your e-mail address and save.

Now upload the whole folder : captchaform
to the root of your website

Open your browser and go to the following URL:
http://www.yourWebsiteName.com/captchaform/form-and-captcha.html

Fill in the form, insert the captcha code, if the form is sent off, check your e-mail to see that you received the content.

If the form is not sent off and you get an error, then either PHP is not installed on your server, or you have cookies turned off in your browser.


Only after you have tested this in this way - and it works - should you start fiddling around with the form-and-captcha.html file to add or modify the fields and then do the same changes in the php file captcha.php, and if after it does not work - then you messed up somewhere.

Here you can download the folder that contains the three above mentioned files:
Download a free captcha form for your own free use

The file downloaded will appear as : captchaform.zip

UnZip it, and follow the above instructions to give it a go.

That's it.

 

Ok, so you have now gone through the first six sections on this web site which are aimed at captcha beginners, and / or you have also tried the captcha in a form stuff above.

How about getting into the real Captcha stuff and being able to modify the size of the captcha generated image, the colour of the lines or even the background colour etc. ?

Say no more and proceed to the following page which explains how to:
Modify the size of captcha images, set number of captcha lines, captcha font solour and size and many other things that can be done in implementing and modifying Captcha.

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

I would be grateful that if any of the captcha stuff on this website has made your life easier that you 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
link URL: http://www.captcha.tv

And this mainly because 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

 

More advanced captcha tutorials:

How to insert captcha inside a web form - this page

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    

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 ]