PHP - Form Submission with Image Captcha Functionality

Last updated Jul 14, 2021


In PHP example script we will create a form and submit form with validating Image Captcha feature. First we will create a Form and adding captcha varification field with creating an image with random numbser string on the image. While submit the form we are verifying the entered field value with generated number string.

Here we have two files

  • captcha.php
  • index.php

 

View Demo

 

PHP Form submission with Image captcha

 

captcha.php file contains below code to generate image with number string

 

?php
        session_start();
        $text = rand(10000,99999);
        $_SESSION["vercode"] = $text;
        $height = 25;
        $width = 65;
        $image_p = imagecreate($width, $height);
        $black = imagecolorallocate($image_p, 0, 0, 0);
        $white = imagecolorallocate($image_p, 255, 255, 255);
        $font_size = 14;
        imagestring($image_p, $font_size, 5, 5, $text, $white);
        imagejpeg($image_p, null, 80);
        ?>

 

 

index.php file chich contains form creation and submit form to server

 

?php
        include_once("data-xyz.php");
        $insertdata=new DB_con();
        if(isset($_POST['submit']))
        {
        $fname=$_POST['fname'];
        $email=$_POST['email'];
        $contact=$_POST['contact'];
        $gender=$_POST['gender'];
        $education=$_POST['education'];
        $adrss=$_POST['address'];
        $sql=$insertdata->insert($fname,$email,$contact,$gender,$education,$adrss);
        if($sql)
        {
        echo "<script>alert('Data inserted');</script>";
        }
        else
        {
        echo "<script>alert('Data not inserted');</script>";
        }
        }
        ?>

!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>RRTutors | DEMO</title>
<meta name="generator" content="Bootply" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="https://rrtutors.com/uploads/php/css/bootstrap.min.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link href="https://rrtutors.com/uploads/php/css/styles.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" rel="home" href="https://rrtutors.com/">RRTutors</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
</nav>
<div class="container-fluid">
<div class="col-sm-6">
<div class="row">
<div class="col-xs-12">
<h3>Form Submission with Image Captcha Feature</h3>
<form name="insert" action="" method="post">
<table width="100%"  border="0">
<tr>
<th width="26%" height="60" scope="row">Full Name :</th>
<td width="74%"><input type="text" name="fname" value="" class="form-control" required /></td>
</tr>
<tr>
<th height="60" scope="row">Email :</th>
<td><input type="email" name="email" value="" class="form-control" required /></td>
</tr>
<tr>
<th height="60" scope="row">Contact no. :</th>
<td><input type="text" name="contact" value="" maxlength="10" class="form-control" required /></td>
</tr>
<tr>
<th height="60" scope="row">Gender :</th>
<td><input type="radio" name="gender" value="Male" required /> Male  &nbsp;
<input type="radio" name="gender" value="Female" required /> Female</td>
</tr>
<tr>
<th height="60" scope="row">Education :</th>
<td><select name="education" class="form-control">
<option value="">Select</option>
<option value="10th">11th</option>
<option value="12th">12th</option>
<option value="BTech">BTech</option>
<option value="Degree">Degree</option>
<option value="Diplamo">Diplamo</option>
<option value="MCA">MCA</option>
<option value="MBA">MBA</option>
<option value="Graduate">Graduate</option>
<option value="Post Graduate">Post Graduate</option>
</select> </td>
</tr>
<tr>
<th height="60" scope="row">Address :</th>
<td><textarea name="address" class="form-control">
</textarea></td>
</tr>
<tr>
<td>Verification code :</td>
<td><input type="text" name="vercode" size="10" required="required" />&nbsp;<img src="https://rrtutors.com/uploads/php/captcha.php" style="margin-top: 1%"></td>
</tr>
<tr>
<th height="60" scope="row">&nbsp;</th>
<td><input type="submit" value="Submit" name="submit" class="btn-primary" /></td>
</tr>
</table>
</form>
</div>
</div>
<hr>
</div>
<div class="col-sm-6"></div>
<!--/center-->
</div><!--/container-fluid-->
<!-- script references -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://rrtutors.com/uploads/php/js/bootstrap.min.js"></script>
</body>
</html>

 


Article Contributed By :
https://www.rrtutors.com/site_assets/profile/assets/img/avataaars.svg

73 Views

Subscribe For Daily Updates

Flutter Questions
Android Questions