captchfeaturebgimg

Google Form Captcha Setup Using PHP and Jquery

Hello Friends,

In this blog post, I am going to explain how to make a captcha functionality for your form. Here I will show you how to setup google form captcha using PHP and jquery.

Captcha is generally used for security purpose, and its aim is to stop all the bots entry into our forms.

Bots are the software which is capable to register inside your website through your form, these bots are generally used by spammers.

captchacontent_img


Softwares used for making this functionality are:

NetBeans IDE

Xampp Server

For making a captcha functionality for your form you need to go through step by step procedure given below.

Now create a project with a name say googlecaptcha or you can have any name as per your desire.

Now creates the files as given the below file structure.

captchafilestructure_img

After creating all the files you just need to copy and paste the below code into the respective file.


form.php

<html>
<head>
<title>Google Captcha Protection in form- Demo Preview</title>
<meta name="robots" content="noindex, nofollow" />
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="scripts.js"></script>
</head>
<body>

<div id="mainform">
<div class="innerdiv">
<h2>Google Captcha Creation</h2>
<!-- Required div starts here -->
<form method="post" id="myForm">
<h3>Fill Your Captcha!</h3>
<br/>
<table>
<tr>
<td><br/><br/><br/><br/><br/><br/></td>
<!--including google captcha image from captcha.php-->
<td><img id="captcha_img" src="captcha.php" /><br/>
<span id="reload">Can't read? try another one</span></td>
<tr>
<td>Enter Text:</td>
<td><input id="captcha1" name="captcha" type="text"></td>
</tr>

<tr>
<td></td>
<td><input type='submit' id="button" value='Submit'><br/>
</td>
</tr>
</table>
<?php
include 'verify.php';
?>
</form>
</div>
<!-- Right side div -->

</div>
</body>
</html>

scripts.js

$(document).ready(function() {
$("#reload").click(function() {
$("#captcha_img").attr("src", "captcha.php");
});
});

verify.php

<?php
if (isset($_POST["captcha"]))
{
session_start();
//Verifying user input captcha text with google generated captcha
if ($_SESSION["captcha"] == $_POST["captcha"])
{
echo "<b class=\"correct\">Correct Code Entered..!!</b>";
}
else
{
echo "<b class=\"wrong\">Wrong Code Entered..!!</b>";
}
unset($_SESSION['captcha']);
}
?>

 

style.css

@import url(http://fonts.googleapis.com/css?family=Fauna+One|Muli);
#mainform{
width:960px;
margin:20px auto;
padding-top:20px;
font-family: 'Fauna One', serif;
}

#mainform h2{
width:100%;
float:left;
text-align:center;
margin-top:35px;
}

.innerdiv{
width:65%;
float:left;
background-color: #CDDC39;
}

form{
background-color:white;
color:#123456;
box-shadow: 1px 1px 22px rgb(194, 194, 194);
width:500px;
margin:50px 250px 0 50px;
float:left;
height:430px;
text-align:center;
}

h3{
margin-top:0px;
margin-bottom:10px;
color:white;
background-color: #607D8B;
text-align:center;
width:100%;
height:50px;
padding-top:30px;
}

input{
width:250px;
height:30px;
border-radius:3px;
padding:2px;
box-shadow:0px 0px 10px darkgray;
margin:10px;
}

input[type=submit]{
background-color: #4CAF50;

border:1px solid white;
font-family: 'Fauna One', serif;
font-Weight:bold;
font-size:18px;
color:white;
margin-top: 15px;
}

span{
color:green;
font-size:14px;
}

#myForm div{
color:red;
font-size:14px;
}

table{
margin-left:40px;
}
#captcha_img{
margin-left:60px;;
}
#reload{
margin-left:40px;
cursor:pointer;
}
.correct{
color:green;
}
.wrong{
color:red;
}

Once you copy and paste all the files then run the form.php file and you will get desired captcha in your form on the browser.


In a case of any queries, you can write to us at anurag@a5theory.com we will get back to you ASAP.

Hope! you would have enjoyed this post.

Please feel free to give your important feedbacks in the comment section below.

Have a great time! Sayonara!