"Captcha Generator"
Bootstrap 4.1.1 Snippet by SOJITRA

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
canvas {
max-width: 100%;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(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
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Material Dashboard Pro

Questions / Comments: