Anti-Bot Icon Captcha Plugin With jQuery And PHP - IconCaptcha | Web development blog. Laravel, WordPress, JS, jQuery news and tutorials

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