In an increasingly digital world, web security is paramount. Protecting your web forms from spam and automated threats is crucial, and PHP Captcha and reCaptcha offer robust solutions. In this article, we’ll delve into the realm of web form security and user experience enhancement. We’ll guide you through the implementation of PHP Captcha and reCaptcha options using JavaScript and PHP, ensuring your web forms are safeguarded while providing a seamless user experience.

In this post, we’ll explore a straightforward method to create a captcha code with reCaptcha options using simple JavaScript and PHP code. With the rise in spam messages these days, it’s essential to implement effective measures to combat spam and validate web forms. This article will guide you through the steps to construct a simple captcha system using JavaScript and PHP, enhancing the security of your forms.

PHP Captcha and reCaptcha options for web forms using javascript | Anil Labs

PHP Captcha and reCaptcha options for web forms using javascript | Anil Labs

PHP Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<?php
//Start the session so we can store what the security code actually is
session_start();

//Send a generated image to the browser
create_image();
exit();

function create_image()
{
    //Let's generate a totally random string using md5
    //$md5_hash = md5(rand(0,999));
    //We don't need a 32 character long string so we trim it down to 5
   // $security_code = substr($md5_hash, 15, 4);
   
   $security_code = rand(1000,9999);
    //Set the session to store the security code
    $_SESSION["security_code"] = $security_code;

    //Set the image width and height
    $width = 120;
    $height = 35;

    //Create the image resource
    $image = ImageCreate($width, $height);  

    //We are making three colors, white, black and gray
    $white = ImageColorAllocate($image, 255, 255, 255);
    $black = ImageColorAllocate($image, 0, 0, 0);
    $grey = ImageColorAllocate($image, 204, 204, 204);
   
    $red = ImageColorAllocate($image, 252, 0, 0);

    //Make the background black
    ImageFill($image, 0, 0, $white);

    //Add randomly generated string in white to the image
    //ImageString($image, 5, 40, 7, $security_code, $white);
    $font = 'font1.ttf';
     imagettftext($image, 18, 0, 15, 28, $red, $font, $security_code);
    //Throw in some lines to make it a little bit harder for any bots to break
    ImageRectangle($image,0,0,$width-1,$height-1,$grey);
    //imageline($image, 0, $height/2, $width, $height/2, $grey);
    //imageline($image, $width/2, 0, $width/2, $height, $grey);
 
    //Tell the browser what kind of file is come in
    header("Content-Type: image/jpeg");

    //Output the newly created image in jpeg format
    ImageJpeg($image);
   
    //Free up resources
    ImageDestroy($image);
}
?>

In the HTML file:

1
2
3
<div class="top_spacing">
        <div class="user_width user_width_captcha"><img id="imgCaptcha" src="create_image.php" /><input id="btnCaptcha" type="button" value="&nbsp;" name="btnCaptcha" onclick="getParam()" /><div style="clear:both" ></div></div>
   </div>

In JavaScript Code:

1
2
3
4
5
6
7
8
9
10
<script language="javascript" type="text/javascript">

function getParam()
   {
      img = document.getElementById('imgCaptcha');
      //Change the image
      img.src = 'create_image.php?' + Math.random();
   }
   
</script>

In StyleSheet Code:

1
2
3
4
5
6
7
 <style type="text/css">
 .top_spacing{ margin:5px 0px 0px 0px;}
.user_width_captcha{ background:#f5f5f5; border:1px solid #CCCCCC; padding:10px 0 10px 10px; margin-left:14px; width:160px}
.user_width_captcha img{ display:block; float:left}
.user_width{ width:150px; font:12px Arial, Helvetica, sans-serif; }
.user_width_captcha input{margin-top:5px; width:24px; height:24px; border:0; background:url(refresh.gif) no-repeat; float:left; margin-left:5px; cursor:pointer}
</style>

Implementing PHP Captcha and reCaptcha options for your web forms using JavaScript and PHP is a proactive approach to fortifying your website’s security against spam and automated threats. By following the steps and guidelines in this article, you can significantly enhance your web form security while ensuring a user-friendly experience for your visitors. Safeguard your web forms and protect your online presence with these powerful tools and techniques.


2 Comments

Trinadh · January 27, 2011 at 3:36 am

very cool & good tut for better comment system, thank you very much for sharing.

Tweets that mention PHP Captcha and reCaptcha options for web forms using javascript « ANIL KUMAR PANIGRAHI 's Blog -- Topsy.com · January 21, 2011 at 7:14 am

[…] This post was mentioned on Twitter by Mahesh Prasad, Anil Kumar Panigrahi. Anil Kumar Panigrahi said: PHP Captcha and reCaptcha options for web forms using javascript : http://goo.gl/PnuZ3 […]

Leave a Reply

Avatar placeholder

Your email address will not be published. Required fields are marked *