Google captcha is used in forms to avoid spam users in websites. It also provide security to your contact form.

But, the thing is how to use it?

We do a lot of search in Google to understand how to add Google captcha in our from.



In Our previous blog post Captcha using PHP and jQuery, we have explained you how to create and implement your own captcha using PHP, jQuery and AJAX in your forms.

Now this blog post guide you to setup that captcha for your forms. Now to set it up, you need to use captcha library offered by Google.
That captcha library contains captcha.php file , which we will include in our PHP file i.e form.php to produce captcha image.

setup google captcha

HTML Form File: form.php

We have created a simple HTML form here and included google captcha image generated from captcha.php .

<!DOCTYPE html>
<html>
<head>
<title>Google Captcha Protection in form- Demo Preview</title>
<meta content="noindex, nofollow" name="robots">
<link href="style.css" rel="stylesheet" type="text/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">
<!-- Required Div Starts Here -->
<h2>Captcha creation using Google Library</h2>
<form id="myForm" method="post" name="myForm">
<h3>Fill Your Information!</h3>
<table>
<tr>
<!-- Including Google Captcha image from captcha.php -->
<td>
<img id="captcha_img" src="captcha.php">
<span id="reload">Can't read? try another one</span>
</td>
</tr>
<tr>
<td>Enter Text:</td>
<td><input id="captcha1" name="captcha" type="text"></td>
</tr>
<tr>
<td>
<input id="button" type='submit' value='Submit'>
</td>
</tr>
</table>
<?php include 'verify.php';?>
</form>
</div>
</div>
</body>
</html>

 

jQuery Code : scripts.js

Here, we can change captcha by clicking change captcha link.

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

 

VERIFYING CAPTCHA : verify.php

Verifying user input CAPTCHA text with google generated CAPTCHA .

<?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']);
}
?>

 

CSS File: style.css

Styling HTML elements.

@import "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
}
form{
background-color:#fff;
color:#123456;
box-shadow:1px 1px 22px #c2c2c2;
width:500px;
margin:50px 250px 0 50px;
float:left;
height:430px;
text-align:center
}
h3{
margin-top:0;
margin-bottom:10px;
color:#fff;
background-color:#ff8c00;
text-align:center;
width:100%;
height:50px;
padding-top:30px
}
input{
width:250px;
height:30px;
border-radius:3px;
padding:2px;
box-shadow:0 0 10px #a9a9a9;
margin:10px
}
input[type=submit]{
background-color:#ff8c00;
border:1px solid #fff;
font-family:'Fauna One',serif;
font-weight:700;
font-size:18px;
color:#fff;
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
}

Pabbly Form Builder


Conclusion:

So, in this way you can use google forms captcha in your forms. Keep following us to learn more.