php tutorial - How to Setup Google Captcha PHP - php programming - learn php - php code - php script




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.

 captcha

Learn php - php tutorial - captcha - php examples - php programs

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>
click below button to copy the code. php tutorial - team

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");
});
});
click below button to copy the code. php tutorial - team

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']);
}
?>
click below button to copy the code. php tutorial - team

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
}
click below button to copy the code. php tutorial - team


Related Searches to How to Setup Google Captcha PHP

Adblocker detected! Please consider reading this notice.

We've detected that you are using AdBlock Plus or some other adblocking software which is preventing the page from fully loading.

We don't have any banner, Flash, animation, obnoxious sound, or popup ad. We do not implement these annoying types of ads!

We need money to operate the site, and almost all of it comes from our online advertising.

Please add wikitechy.com to your ad blocking whitelist or disable your adblocking software.

×