JavaScript:
// src - https://github.com/Wesamgerges/SlideToUnlock
<head>
<link rel="stylesheet" href="slideToUnlock.css">
<script type='text/javascript' src='jquery.min.js']</script>
<script type='text/javascript' src='jquery.slideToUnlock.js']</script>
<script>
$(function() {
$("#daSlider").slideToUnlock({
useData: false,
theme: "grey",
lockText: "Slide to Submit Form",
unlockText: "Success",
allowToLock: true,
status: false,
unlockfn: function () {
$("#request").append('<button id="submit" type="submit">Submit</button>');
$("#daSlider").fadeOut("slow", function () {
$("#daSlider").remove();
});
},
lockfn: function () { },
});
}); //jQuery
</script>
</head>
<body>
<form id="frm">
<div id="request"></div>
<div id="daSlider" class="col-5"></div>
</form>
</body>