Social Networks

In this post I want explain how to create and implement a Captcha in PHP. We are using inbuilt features available in PHP for creating an image. This is very simple and basic tutorial and we are not using any custom fonts for generating captcha image. Captcha code used to avoid spam/abuse or auto-submission.  The random value of this image appears inside the generated CAPTCHA image which can be refreshed if not readable. This Captcha Code you can implement on the website level as well on any specific page like contact form.

Live Demo of PHP Captcha and source code download free –

Demo  Download Source

Captcha.php

1
2
3
4
5
6
7
8
9
10
11
< ?php
session_start();
$ranStr = md5(microtime());
$ranStr = substr($ranStr, 0, 6);
$_SESSION['cap_code'] = $ranStr;
$newImage = imagecreatefromjpeg("cap_bg.jpg");
$txtColor = imagecolorallocate($newImage, 0, 0, 0);
imagestring($newImage, 5, 5, 5, $ranStr, $txtColor);
header("Content-type: image/jpeg");
imagejpeg($newImage);
?>

Here we are storing a captcha code in SESSION variable and while verifying we have to compare the session variable with user entered data.

$_SESSION[‘cap_code’] – is having actual captcha code
$_POST[‘captcha’] – user entered captcha code
captcha-php
 

1
2
3
4
5
6
7
8
9
10
11
< ?php
session_start();
$cap = 'notEq';
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    if ($_POST['captcha'] == $_SESSION['cap_code']) {
        // Captcha verification is Correct. Do something here!
    } else {
        // Captcha verification is wrong. Take other action
    }
}
?>

Complete Captcha working 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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
        <title>Captcha - PHP | Jquery</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $('#submit').click(function(){
                    var name = $('#name').val();
                    var msg = $('#msg').val();
                    var captcha = $('#captcha').val();
 
                    if( name.length == 0){
                        $('#name').addClass('error');
                    }
                    else{
                        $('#name').removeClass('error');
                    }
 
                    if( msg.length == 0){
                        $('#msg').addClass('error');
                    }
                    else{
                        $('#msg').removeClass('error');
                    }
 
                    if( captcha.length == 0){
                        $('#captcha').addClass('error');
                    }
                    else{
                        $('#captcha').removeClass('error');
                    }
 
                    if(name.length != 0 && msg.length != 0 && captcha.length != 0){
                        return true;
                    }
                    return false;
                });
 
                var capch = '< ?php echo $cap; ?>';
                if(capch != 'notEq'){
                    if(capch == 'Eq'){
                        $('.cap_status').html("Your form is successfully Submitted ").fadeIn('slow').delay(3000).fadeOut('slow');
                    }else{
                        $('.cap_status').html("Human verification Wrong!").addClass('cap_status_error').fadeIn('slow');
                    }
                }
 
 
 
            });
 
		function refresh()
		{
        document.getElementById('captcha-image-new').src='captcha.php?'+Math.random();
       document.getElementById('captcha').focus();
		}
        </script>
        <style type="text/css">
            body{
 
 
            }
            #form{
                margin:100px;
                width: 350px;
                outline: 5px solid #d0ebfe;
                border: 1px solid #bae0fb;
                padding: 10px;
				margin:0 auto;
            }
            #form label{
                font:bold 11px arial;
                color: #565656;
                padding-left: 1px;
            }
            #form label.mandat{color: #f00;}
            #form input[type="text"]{
                height: 30px;
                margin-bottom: 8px;
                padding: 5px;
                font: 12px arial;
                color: #0060a3;
            }
            #form textarea{
                width: 340px;
                height: 80px;
                resize: none;
                margin: 0 0 8px 1px;
                padding: 5px;
                font: 12px arial;
                color: #0060a3;
            }
            #form img{
                margin-bottom: 8px;
            }
            #form input[type="submit"]{
                background-color: #0064aa;
                border: none;
                color: #fff;
                padding: 5px 8px;
                cursor: pointer;
                font:bold 12px arial;
            }
            .error{
                border: 1px solid red;
            }
            .cap_status{
                width: 350px;
                padding: 10px;
                font: 14px arial;
                color: #fff;
                background-color: #10853f;
                display: none;
            }
            .cap_status_error{
                background-color: #bd0808;                
            }
        </style>
    </head>
    <body>
 
 
	<div style='margin:0 auto'>
	<h1>PHP Captcha Code </h1>
	<p>Online Web Applications is a global community dedicated to provide web technology archive | News and tutorials focused on Technology, Social Media, Blogging, Tutorials,  Software and WordPress</p>
	More similar post and tutorials <a rel="nofollow" href="http://onlinewebapplication.com/">onlinewebapplication.com</a>
      <form action="index.php" method="post">
            <div id="form">
                <table border="0" width="100%">
                    <tr>
                        <td colspan="2"><label>Name:</label><label class="mandat"> *</label><br />
                            <input type="text" name="name" id="name"/></td>
                    </tr>
                    <tr>
                        <td colspan="2"><label>Message:</label><label class="mandat"> *</label><br />
                            <textarea name="msg" id="msg"></textarea></td>
                    </tr>
                    <tr>
                        <td colspan="2"><label>Enter the contents of image</label><label class="mandat"> *</label></td>
                    </tr>
                    <tr>
                        <td width="60px">                           
                            <input type="text" name="captcha" id="captcha" maxlength="6" size="6"/></td>
                        <td><img id="captcha-image-new" name="captcha-image-new" src="captcha.php"/>
 
                        </td>
                    </tr>
                    <tr>
                        <td><input type="submit" value="Submit" id="submit"/></td>
                        <td><a rel="nofollow" href="#" onClick="javascript:refresh();"  id="change-image">Not readable? Change text.</a> </td>
                    </tr>
                </table>
            </div>
        </form>
        <div class="cap_status"></div>
		</div>
 
    </body>
</html>
 
 
&nbsp;

Leave a Reply

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

Allowed Tags:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>