Anti-Bot Icon Captcha Plugin With jQuery And PHP - IconCaptcha

Anti-Bot Icon Captcha Plugin With jQuery And PHP - IconCaptcha
File Size: 152 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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
});

Changelog:

2018-11-18

  • v2.5.0

This awesome jQuery plugin is developed by fabianwennink. For more Advanced Usages, please check the demo page or visit the official website.