How to

Captcha prevents forms to be filled automatically by robots for security reasons and to prevent spam. To do this the form request to user to insert a text hard to be guessed by a robot. The text is compared at server side with the expected value and if it doesn't match the form is refused.

To do this there are many on line services, the most used is the one provided by Google but with a little effort you can write your own captcha even in static site.

But as for Form sending, you need some server side work, so the easiest way is to serve static pages under a web server with php enabled. Then with some little scripts on server and on client you can do all the tasks.

Captcha images

To implement captcha the first step is to create some random images with a text hard to read by OCR systems. I did it with a Python script. It works for me, download it and adjust as you need. A sample is on form below.

The script generate the images and a json with index that associate the right text with the image name.

Random image

On the form in your client side, you need to load a random image each time the page is loaded or when the user ask for a refresh. This can be done with a little script in client side. Please look ad the source of this page to see a sample.

The function generateCaptcha() calculate a random numeric name from "00000" to the max of images generated by captcha images generator. In my case the maximum is "00099". Then put the image on the reserved image id, ad put the name on the hidden field of the form used to check the input by user.

The form

On the form you have to reserve a placeholder for the random image, a button to ask a refresh and an input field where the user can write the captcha ID, all this is present on the sample form below.

The server side

Once the form is filled, the user click on the "Send" button. This generate an action which send the data of the form somewhere. You can send data to an external service of you choice or if your static pages are under a web server with PHP enabled, you can call a php to do all tasks needed ob server side.

Look at source code of: ./media/php/send_mail_captcha.php to see a not configured script which do all tasks needed to check at the captcha and send an email if the captcha match. Download it but before you can use it you have to configure some parameters.

The script do the following tasks:

• Read the captcha index to abbinate file names with captcha ID.
• Check if the ID match with the one provided by user.
• If the captcha is ok, send an email to you with the content of form and write a log with fields of form to have a backup.
• If the captcha is wrong the user is informed to correct the ID.

Sample

A sample form follow. Please note that it doesn't work. You need to configure and adjust scripts in your production sites.