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

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.

<!-- jQuery is OPTIONAL -->
<script src="/path/to/cdn/jquery.min.js"></script>

<!-- IconCaptcha Files -->
<link href="/css/icon-captcha.min.css" rel="stylesheet">
<script src="/js/icon-captcha.min.js"></script>

2. Add a icon captcha placeholder to your HTML form.

<form method="post">
  <!-- Additional security token to prevent CSRF. Optional but highly recommended - disable via IconCaptcha options. -->
  <input type="hidden" name="_iconcaptcha-token" value="<?= IconCaptcha::token() ?>"/>
  <!-- The IconCaptcha will be rendered in this element -->
  <div class="iconcaptcha-holder" data-theme="light"></div>
</form>

3. Call the function to generate an icon captcha inside the form element.

// Vanilla JS
document.addEventListener('DOMContentLoaded', function() {
  IconCaptcha.init('.iconcaptcha-holder', {
    // options here
  });
});

// jQuery
$(document).ready(function() {
  $('.iconcaptcha-holder').iconCaptcha({
    // options here
  })
});

4. Default options to customize the icon captcha.

$('.iconcaptcha-holder').iconCaptcha({
  general: {
    // path to captcha-request.php
    validationPath: null,
    fontFamily: null,
    // show, hide or disable the credits element of the captcha
    // show, hide or disabled
    credits: 'show',
  },
  security: {
    clickDelay: 1500,
    hoverDetection: true,
    enableInitialMessage: true,
    initializeDelay: 500,
    selectionResetDelay: 3000,
    loadingAnimationDelay: 1000,
    invalidateTime: 1000 * 60 * 2,
  },
  messages: {
    initialization: {
      loading: 'Loading challenge...',
      verify: 'Verify that you are human.'
    },
    header: 'Select the image displayed the <u>least</u> amount of times',
    correct: 'Verification complete.',
    incorrect: {
      title: 'Uh oh.',
      subtitle: "You've selected the wrong image."
    },
    timeout: {
      title: 'Please wait 60 sec.',
      subtitle: 'You made too many incorrect selections.'
    }
  }
})

5. Available event handlers.

$('.example').iconCaptcha()
  .on('init', function(e, id) {
    // Event: Captcha initialized
  }).on('selected', function(e, id) {
    // Event: Icon selected
  }).on('refreshed', function(e, id) {
    // Event: Captcha refreshed
  }).on('success', function(e, id) {
    // Event: Correct input
  }).on('error', function(e, id) {
    // Event: Wrong input
  }).on('invalidated', function(e, id) {
    // Event: Wrong input
  }).on('timeout', function(e, id) {
    // Event: Wrong input
  });

Changelog:

2023-04-04

• v3.1.2

---

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