
IconCaptcha is a simple, flexible, customizable, user-friendly, jQuery & PHP based captcha plugin to prevent spam and bots on your web app.
Main features:
- Server-side validation with PHP.
- Light and dark themes.
- AJAX loading.
- Custom feedback messages.
- Useful events.
- Multiple instances on a page.
- Pixel perfect icons.
- Cross-browser.
How to use it:
1. Load jQuery library and the Icon Captcha Plugin's files in the html document.
<link href="/path/to/style.css" rel="stylesheet"> <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"> </script> <script src="/path/to/script.min.js"></script>
2. Add a icon captcha placeholder to your HTML form.
<form action="" method="post"> <!-- Form Fields Here --> <!-- Captcha Here --> <div class="example"></div> <!-- More Fields and Submit Button Here --> </form>
3. Call the function to generate an icon captcha inside the form element.
$('.example').iconCaptcha({ // options here });
4. Default plugin options to customize the icon captcha.
$('.example').iconCaptcha({ // Select the theme(s) of the Captcha(s). // Available: light, dark captchaTheme: [''], // Change the font family of the captcha. // Leaving it blank will add the default font to the end of the <body> tag. captchaFontFamily: '', // The delay during which the user can't select an image. captchaClickDelay: 1000, // Enable or disable the cursor hover detection. captchaHoverDetection: true, // Show, hide or disable the credits element. // Valid values: 'show', 'hide', 'disabled' (please leave it enabled). showCredits: 'show', // Enable of disable the fake loading animation. // Doesn't actually do anything other than look nice. enableLoadingAnimation: false, // How long the fake loading animation should play. loadingAnimationDelay: 2000, // How long should the script wait before requesting the hashes and icons? (to prevent a high(er) CPU usage during a DDoS attack) requestIconsDelay: 1500, // The path to the Captcha validation file. captchaAjaxFile: '../php/captcha-request.php', // Custom messages captchaMessages: { header: 'Select the image that does not belong in the row', correct: { top: 'Great!', bottom: 'You do not appear to be a robot.' }, incorrect: { top: 'Oops!', bottom: 'You\'ve selected the wrong image.' } } });
5. Available event handlers.
$('.example').iconCaptcha() // You can bind to custom events, in case you want to execute some custom code. .on('init.iconCaptcha', function(e, id) { // Event: Captcha initialized }).on('selected.iconCaptcha', function(e, id) { // Event: Icon selected }).on('refreshed.iconCaptcha', function(e, id) { // Event: Captcha refreshed }).on('success.iconCaptcha', function(e, id) { // Event: Correct input }).on('error.iconCaptcha', function(e, id) { // Event: Wrong input });
This awesome jQuery plugin is developed by fabianwennink. For more Advanced Usages, please check the demo page or visit the official website.
- Publication date: 13.05.2018
- Source