We will use the PHP GD library to create our CAPTCHA. We will create a contact us form with PHP captcha using GD library then write a query to store data in database.
#index.php
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<title>Contact form</title>
<style>
body{
background: #ccc;
}
#contact-form{
background: #fff;
padding: 20px;
margin-top: 30px;
}
</style>
</head>
<body>
<div class="container">
<div class="col-md-4"></div>
<div class="col-md-4">
<form action="" method="post" id="contact-form">
<h3>Contact us</h3>
<?php
session_start();
if (isset($_POST['name'])) {
if (empty(($_POST['name'])) || empty(($_POST['email'])) || empty(($_POST['msg'])) || empty(($_POST['captcha']))) {
echo "All the fields is required";
} else if ($_SESSION['catcha_text'] != $_POST['captcha']) {
echo "Catcha is not matched , Try again..";
} else {
// if everthing is fine we can store data in mysql database
//connect to the db
$conn = new mysqli("localhost", 'username', 'password');
$conn->select_db("db_name");
// here you need to write insert query
$name = $_POST['name'];
$email = $_POST['email'];
$msg = $_POST['msg'];
$conn->query("INSERT INTO tablename (name , email, msg,) values ('$name' ,'$email','$msg')");
echo "thanks for contacting us";
}
}
?>
<br>
<div class="form-group">
Name
<input type="text" id="name" name="name" class="form-control">
</div>
<div class="form-group">
Email
<input type="email" id="email" name="email" class="form-control">
</div>
<div class="form-group">
Message
<textarea id="msg" name="msg" class="form-control"></textarea>
</div>
<div class="form-group">
Captcha
<input type="text" id="captcha" name="captcha" class="form-control">
</div>
<div class="form-group">
<img src="captcha.php" style="border: 1px solid #ccc;">
<a href="">
<i class="fa fa-refresh" aria-hidden="true"></i>
</a>
</div>
<div class="form-group">
<input type="submit"value="Submit" class="col-md-12 btn btn-primary">
<div class="clearfix"></div>
</div>
</form>
</div>
<div class="col-md-4"></div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
</body>
</html>
#captcha.php
<?php
session_start();
//making dynamic text for our image string
$chars = "abcdefr340fkdsfjvndssdjfdsfjJDJFKEUFJ";
$rand_str = '';
//we want only 8 char string
for($i = 0; $i < 8; $i++){
//apend it
$rand_str .= $chars[rand(0, strlen($chars) - 1)];
}
$_SESSION['catcha_text'] = $rand_str;
//this img string we will store in session so we can compare with our imput
$str = $rand_str; // this text we will make it dynamic letter
//create img
$img = imagecreate(150,50);// width & height
$img_bg = imagecolorallocate($img, 255,255,255); //rgba color name as white
$text_color = imagecolorallocate($img ,51,122,183); //sky color text image color
imagestring($img,4,30,25, $str,$text_color);
imagesetthickness($img, 3);
header("Content-type: image/png"); // we want png image
imagepng($img);
imagecolordeallocate($img, $img_bg); //background color
imagecolordeallocate($img, $text_color); // image text color
imagedestroy($img);
#data.php
<?php
if(isset($_POST['name'])){
if(empty($_POST['name']) || empty($_POST['email']) || empty($_POST['msg'])|| empty($_POST['captcha'])){
echo "All the fields is required";
} else {
//query to save data in database
}
}
?>
#output