<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-md-6">
<form id="captcha-form" method="post" action="" class="mb-3">
<div class="mb-3">
<label for="name" class="form-label">Name</label>
<input type="text" class="form-control" id="name" name="name" required>
</div>
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email" name="email" required>
</div>
<div class="mb-3">
<label for="message" class="form-label">Message</label>
<textarea class="form-control" id="message" name="message" required></textarea>
</div>
<div class="mb-3 d-flex align-items-center">
<canvas id="captcha" width="200" height="80"></canvas>
<button type="button" class="btn btn-secondary" id="refresh-captcha">
<i class="fa fa-refresh"></i>
</button>
</div>
<div class="mb-3">
<label for="captcha-input" class="form-label">Enter Captcha</label>
<input type="text" class="form-control" id="captcha-input" required>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
canvas {
max-width: 100%;
}
$(document).ready(function () {
// Generate captcha on page load
generateCaptcha();
// Handle captcha refresh button click
$("#refresh-captcha").click(function () {
generateCaptcha();
$("#captcha-input").val("");
});
// Handle form submit
$("#captcha-form").submit(function (event) {
event.preventDefault();
// Validate captcha
var captchaInput = $("#captcha-input").val();
var captchaCode = sessionStorage.getItem("captchaCode");
if (captchaInput != captchaCode) {
alert("Invalid captcha code. Please try again.");
generateCaptcha();
$("#captcha-input").val("");
return;
}
// Form validation successful, submit form
alert("Form submitted successfully.");
$("#captcha-form").trigger("reset");
generateCaptcha();
});
// Define the function generateCaptcha()
function generateCaptcha() {
// Get the canvas element with ID captcha and create an instance of its canvas rendering context
var a = $("#captcha")[0],
b = a.getContext("2d");
// Clear the canvas
b.clearRect(0, 0, a.width, a.height);
// Define the string of characters that can be included in the captcha
var f = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789",
e = "",
g = -20,
h = 20,
i = h - g,
j = 20,
k = 30,
l = k - j;
// Generate each character of the captcha
for (var m = 0; m < 6; m++) {
// Select random letter from the pool to be part of the captcha
var n = f.charAt(Math.floor(Math.random() * f.length));
e += n;
// Set up the text formatting
b.font = j + Math.random() * l + "px Arial";
b.textAlign = "center";
b.textBaseline = "middle";
// Set the color of the text
b.fillStyle = "rgb(" + Math.floor(Math.random() * 256) + "," + Math.floor(Math.random() * 256) + "," + Math.floor(Math.random() * 256) + ")";
// Add the character to the canvas
var o = g + Math.random() * i;
b.translate(20 + m * 30, a.height / 2);
b.rotate(o * Math.PI / 180);
b.fillText(n, 0, 0);
b.rotate(-1 * o * Math.PI / 180);
b.translate(-(20 + m * 30), -1 * a.height / 2);
}
// Set the captcha code in session storage
sessionStorage.setItem("captchaCode", e);
}
})
