Create Fast, Simple and User-Friendly Captcha in jQuery & PHP – IconCaptcha

by Posted on

If you are facing lot’s of spamming traffic on your website then you must apply Captcha which detect the traffic is organic or robots it also prevent form annoying boats from eating your bandwidth. That’s why in this post I am going to share simple jquery and PHP based Captcha plugin . IconCaptcha is a faster and more user-friendly captcha than most other captchas. You no longer have to read any annoying text-images, with IconCaptcha you only have to compare two images and select the image which is only present once.Besides being user-friendly, IconCaptcha is also developer-friendly. With just a few steps you can get the captcha up and running. Even developers new to JavaScript and PHP can easily install IconCaptcha. The demo page contains all the code needed to get the captcha working.

Features:

  • User Friendly: The captcha uses easily understandable images instead of hard to read texts to complete the captcha.
  • Server-side validation: Any validation done by the captcha will be performed on the server-side instead of the client-side.
  • Events: Events are triggered at various points in the code, allowing you to hook into them and execute custom code if necessary.
  • Themes: Select the design of the captcha without having to ever touch the stylesheet.
  • SASS: The project contains a SASS file, allowing you to easily style and compile the stylesheet.
  • Supports IE: The captcha supports Internet Explorer 8 and up.



Libraries

Include jQuery library and after that add Icon Captcha Plugin’s libraries on page.

<link href="style.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script src="script.min.js"></script>

HTML

Now simply integrate icon captcha placeholder to your HTML form.

<form action="" method="post">
    ...
 
    <!-- The captcha will be generated in this element -->
    <div class="captcha-holder"></div>
 
    ...
</form>



JS

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

$(function() { 
 $('.captcha-holder').iconCaptcha({
        // The captcha options go here
 });
});

PHP

Add following php code to apply server side validation.

<?php
    // Start a PHP session.
    session_start();
 
    // Include the IconCaptcha classes.
    require('resources/php/captcha-session.class.php');
    require('resources/php/captcha.class.php');
 
    // Set the path to the captcha icons. Set it as if you were
    // currently in the PHP folder containing the captcha.class.php file.
    // ALWAYS END WITH A /
    // DEFAULT IS SET TO ../icons/
    IconCaptcha::setIconsFolderPath('../icons/');
 
    // Enable or disable the 'image noise' option.
    // When enabled, some nearly invisible random pixels will be added to the
    // icons. This is done to confuse bots who download the icons to compare them
    // and pick the odd one based on those results.
    // NOTE: Enabling this might cause a slight increase in CPU usage.
    IconCaptcha::setIconNoiseEnabled(true);
 
    // Use custom messages as error messages (optional).
    // Take a look at the README file to see what each string means.
    // IconCaptcha::setErrorMessages(array('', '', '', ''));
 
    // If the form has been submitted, validate the captcha.
    if(!empty($_POST)) {
        if(IconCaptcha::validateSubmission($_POST)) {
            echo 'The form has been submitted!';
        } else {
            echo IconCaptcha::getErrorMessage();
        }
    }
?>

See live demo and download source code.

DEMO | DOWNLOAD

Visit official github repository for more information and follow for future updates. Don’t forget to read license for using this plugin in your projects.


Published by admin