This below code is very useful for static web page (Html). Implement captcha in static web page solving problem using iframe
Step 1 . Make Form with captcha (Include two files - I js "jquery.min.js" and II Php "create_image.php" && also Loading images).
Create file "html-form-captcha.php" and Added Following Files
Step 2 . Backend Code with Email Function Code using php
Create file "formsu.php" and Add Mail function PHP Code
Step 3 . Simple Make js and Add url pass in Iframe tage
Create file "formurlcall.js" and Added one file "html-form-captcha.php" in iframe code
Step 4. Calling js in Static webpage (HTML)
Create file "form.html" and Added one file "formurlcall.js" in call js file in static Webpage
Main files
Step 1. html-form-captcha.php
Create file "html-form-captcha.php" and Added Following Files
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>HTML Form With captcha</title>
<script src="jquery.min.js" TYPE="text/Javascript"></script>
<script language="javascript">
function submitForm()
{var objForm=document.userForm;if(validateForm())
{$("#loadImg").attr('src','ajax-loader.gif');var order=$("#contact").serialize();$.post("formsu.php",order,function(theResponse){if(theResponse=='success')
{$("#loadImg").attr('src','blank-loader.gif');alert("Thanks You! submitted successfully.");objForm.fullname.value='';objForm.email.value='';objForm.captcha.value='';reloadCaptcha();}
else
{$("#loadImg").attr('src','blank-loader.gif');alert("Error: "+theResponse);reloadCaptcha();}});}}
function reloadCaptcha()
{d=new Date();$("#captchacode").attr('src',"create_image.php?"+d.getTime());}
function validEmail(str)
{mailRE=new RegExp();mailRE.compile('^[\._a-z0-9-]+@[\.a-z0-9-]+[\.]{1}[a-z]{2,4}$','gi');return(mailRE.test(str));}
function validateForm(){if(document.userForm.fullname.value=="")
{alert("Put your name");document.userForm.fullname.focus();return false;}
else if(document.userForm.email.value=="")
{alert("Please enter Email ID");document.userForm.email.focus();return false;}
else if(validEmail(document.userForm.email.value)==false){alert("Please Check your Email ID");document.userForm.email.focus()
return false;}
else if(document.userForm.captcha.value=="")
{alert("Enter Security Code");document.userForm.captcha.focus();return false;}
return true;}</script>
</head>
<body>
<h1>Static web page with Implement Captcha </h1>
<div id="contact-form" style="width:320px; height:150px; background:gray; overflow:hidden; padding:0 0 0 2px;">
<form name="userForm" id="contact" action="" method="post">
<table width="300" border="0" cellpadding="1" cellspacing="7">
<tr> <td width="100px">Name *</td> <td width="200px">
<input type="text" name="fullname" style="width:100px;height:20px;"/>
</td></tr>
<tr> <td >Email *</td> <td >
<input type="text" name="email" style="width:100px;height:20px;" />
</td></tr>
<tr> <td >Enter Code *</td> <td >
<img align="absmiddle" src="create_image.php" id="captchacode"> <input type="text" name="captcha" value="" maxlength="4" style="width:100px;height:20px;" /><img align="absmiddle" src="blank-loader.gif" id="loadImg" style=" position:relative; right:-60px; top:-20px;">
</td></tr>
<tr><td style="text-align:center; padding:0px 0 0 0px;"> <button type="button" onclick="submitForm()">Go Add !</button> </td> </tr> </table>
</form></div></body>
</html>
Support Files create_image.php code
<?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);
//Set the session to store the security code
$_SESSION["security_code"] = $security_code;
//Set the image width and height
$width = 50;
$height = 20;
//Create the image resource
$image = ImageCreate($width, $height);
//We are making three colors, white, black and gray
$white = ImageColorAllocate($image, 255, 255, 201);
$black = ImageColorAllocate($image, 0, 0, 0);
$grey = ImageColorAllocate($image, 204, 204, 204);
//Make the background black
ImageFill($image, 0, 0, $black);
//Add randomly generated string in white to the image
ImageString($image, 3, 10, 3, $security_code, $white);
//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);
}
?>
Step 2. formsu.php
Create file "formsu.php" and Add Mail function PHP Code
<?php
session_start();
//Make sure that the input come from a posted form. Otherwise quit immediately
if ($_SERVER["REQUEST_METHOD"] <> "POST")
die("You can only reach this page by posting from the html form");
//Check if the securidy code and the session value are not blank
//and if the input text matches the stored text
if ( ($_REQUEST["captcha"] == $_SESSION["security_code"]) &&
(!empty($_REQUEST["captcha"]) && !empty($_SESSION["security_code"])) ) {
// echo "<h1>Test successful!</h1>";
echo 'success';
$name=ucwords(stripslashes($_REQUEST['fullname']));
$email=$_REQUEST['email'];
$cu_date=date("Y-m-d");
$to = "abc@gmail.com";
$subject = "Admain Subjetc";
$headers = "MIME-Version: 1.0" . "\r\n";
$headers .= "Content-type:text/html;charset=iso-8859-1" . "\r\n";
//$headers .= "Bcc: $bcc"."\r\n";
$headers .= "From: $email" . "\r\n";
$body = "Admin";
mail($to, $subject, $body, $headers);
$to1 = $email;
$headers1 = 'MIME-Version: 1.0' . "\r\n";
$headers1 .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
$headers1 .= "From: $to" . "\r\n";
$subject1 = 'Thanks You :user';
$message="User Section";
mail($to1, $subject1, $message, $headers1);
}
else {
echo 'code worng ';
}
?>
Step 3 formurlcall.js
Create file "formurlcall.js" and Added one file "html-form-captcha.php" in iframe code
// JavaScript Document
document.write('<iframe scrolling="no" src="html-form-captcha.php" width="405" height="360px" frameborder="0" style="background-color:#FFF"></iframe>');
Support Files html-form-captcha.php Already Above code
Step 4 form.html
Create file "form.html" and Added one file "formurlcall.js" in call js file in static Webpage
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
Implement captcha in static web page solving problem using iframe
<BODY>
<div style="width:400px; height:auto; overflow:hidden; margin:15px 0 0 0px">
<script language="javascript" src="formurlcall.js"></script>
</div>
</BODY>
</HTML>
Support Files formurlcall.js Already Above code
How to implement captcha in static web page
Step 1 . Make Form with captcha (Include two files - I js "jquery.min.js" and II Php "create_image.php" && also Loading images).
Create file "html-form-captcha.php" and Added Following Files
- ajax-loader.gif
- blank-loader.gif
- create_image.php
- jquery.min.js (Downlaod)http://jquery.com/download/
Step 2 . Backend Code with Email Function Code using php
Create file "formsu.php" and Add Mail function PHP Code
Step 3 . Simple Make js and Add url pass in Iframe tage
Create file "formurlcall.js" and Added one file "html-form-captcha.php" in iframe code
Step 4. Calling js in Static webpage (HTML)
Create file "form.html" and Added one file "formurlcall.js" in call js file in static Webpage
Main files
Step 1. html-form-captcha.php
Create file "html-form-captcha.php" and Added Following Files
- ajax-loader.gif
- blank-loader.gif
- create_image.php
- jquery.min.js (Downlaod)http://jquery.com/download/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>HTML Form With captcha</title>
<script src="jquery.min.js" TYPE="text/Javascript"></script>
<script language="javascript">
function submitForm()
{var objForm=document.userForm;if(validateForm())
{$("#loadImg").attr('src','ajax-loader.gif');var order=$("#contact").serialize();$.post("formsu.php",order,function(theResponse){if(theResponse=='success')
{$("#loadImg").attr('src','blank-loader.gif');alert("Thanks You! submitted successfully.");objForm.fullname.value='';objForm.email.value='';objForm.captcha.value='';reloadCaptcha();}
else
{$("#loadImg").attr('src','blank-loader.gif');alert("Error: "+theResponse);reloadCaptcha();}});}}
function reloadCaptcha()
{d=new Date();$("#captchacode").attr('src',"create_image.php?"+d.getTime());}
function validEmail(str)
{mailRE=new RegExp();mailRE.compile('^[\._a-z0-9-]+@[\.a-z0-9-]+[\.]{1}[a-z]{2,4}$','gi');return(mailRE.test(str));}
function validateForm(){if(document.userForm.fullname.value=="")
{alert("Put your name");document.userForm.fullname.focus();return false;}
else if(document.userForm.email.value=="")
{alert("Please enter Email ID");document.userForm.email.focus();return false;}
else if(validEmail(document.userForm.email.value)==false){alert("Please Check your Email ID");document.userForm.email.focus()
return false;}
else if(document.userForm.captcha.value=="")
{alert("Enter Security Code");document.userForm.captcha.focus();return false;}
return true;}</script>
</head>
<body>
<h1>Static web page with Implement Captcha </h1>
<div id="contact-form" style="width:320px; height:150px; background:gray; overflow:hidden; padding:0 0 0 2px;">
<form name="userForm" id="contact" action="" method="post">
<table width="300" border="0" cellpadding="1" cellspacing="7">
<tr> <td width="100px">Name *</td> <td width="200px">
<input type="text" name="fullname" style="width:100px;height:20px;"/>
</td></tr>
<tr> <td >Email *</td> <td >
<input type="text" name="email" style="width:100px;height:20px;" />
</td></tr>
<tr> <td >Enter Code *</td> <td >
<img align="absmiddle" src="create_image.php" id="captchacode"> <input type="text" name="captcha" value="" maxlength="4" style="width:100px;height:20px;" /><img align="absmiddle" src="blank-loader.gif" id="loadImg" style=" position:relative; right:-60px; top:-20px;">
</td></tr>
<tr><td style="text-align:center; padding:0px 0 0 0px;"> <button type="button" onclick="submitForm()">Go Add !</button> </td> </tr> </table>
</form></div></body>
</html>
Support Files create_image.php code
<?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);
//Set the session to store the security code
$_SESSION["security_code"] = $security_code;
//Set the image width and height
$width = 50;
$height = 20;
//Create the image resource
$image = ImageCreate($width, $height);
//We are making three colors, white, black and gray
$white = ImageColorAllocate($image, 255, 255, 201);
$black = ImageColorAllocate($image, 0, 0, 0);
$grey = ImageColorAllocate($image, 204, 204, 204);
//Make the background black
ImageFill($image, 0, 0, $black);
//Add randomly generated string in white to the image
ImageString($image, 3, 10, 3, $security_code, $white);
//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);
}
?>
Step 2. formsu.php
Create file "formsu.php" and Add Mail function PHP Code
<?php
session_start();
//Make sure that the input come from a posted form. Otherwise quit immediately
if ($_SERVER["REQUEST_METHOD"] <> "POST")
die("You can only reach this page by posting from the html form");
//Check if the securidy code and the session value are not blank
//and if the input text matches the stored text
if ( ($_REQUEST["captcha"] == $_SESSION["security_code"]) &&
(!empty($_REQUEST["captcha"]) && !empty($_SESSION["security_code"])) ) {
// echo "<h1>Test successful!</h1>";
echo 'success';
$name=ucwords(stripslashes($_REQUEST['fullname']));
$email=$_REQUEST['email'];
$cu_date=date("Y-m-d");
$to = "abc@gmail.com";
$subject = "Admain Subjetc";
$headers = "MIME-Version: 1.0" . "\r\n";
$headers .= "Content-type:text/html;charset=iso-8859-1" . "\r\n";
//$headers .= "Bcc: $bcc"."\r\n";
$headers .= "From: $email" . "\r\n";
$body = "Admin";
mail($to, $subject, $body, $headers);
$to1 = $email;
$headers1 = 'MIME-Version: 1.0' . "\r\n";
$headers1 .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
$headers1 .= "From: $to" . "\r\n";
$subject1 = 'Thanks You :user';
$message="User Section";
mail($to1, $subject1, $message, $headers1);
}
else {
echo 'code worng ';
}
?>
Step 3 formurlcall.js
Create file "formurlcall.js" and Added one file "html-form-captcha.php" in iframe code
// JavaScript Document
document.write('<iframe scrolling="no" src="html-form-captcha.php" width="405" height="360px" frameborder="0" style="background-color:#FFF"></iframe>');
Support Files html-form-captcha.php Already Above code
Step 4 form.html
Create file "form.html" and Added one file "formurlcall.js" in call js file in static Webpage
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
Implement captcha in static web page solving problem using iframe
<BODY>
<div style="width:400px; height:auto; overflow:hidden; margin:15px 0 0 0px">
<script language="javascript" src="formurlcall.js"></script>
</div>
</BODY>
</HTML>
Support Files formurlcall.js Already Above code
No comments:
Post a Comment