Crema Captcha

I began developing this plugin in 2013 with a simple goal in mind: 1 block spam without annoying users. Your clients don't want to decipher garbled words or play "Find the Storefront". Over several years, it evolved from a disjointed medly of basic functions into an advanced, easy-to-use pure javascript plugin with customizable spam filtering.

1. Goals accomplished with head-banging. Fueled by coffee.

Get Started Download

Currently v4.4.0-rc (See Older Versions)

How it Works

  1. The plugin loads your settings and initializes default fields. Each form is assumed valid, until proven invalid. 😏
  2. Every time a field changes, it checks all inputs against all enabled filters:
    • If all fields are valid, your defined form action is added and the submit button is enabled.
    • If an enabled filter gets tripped, the form action is removed and the button is disabled.
  3. Huzzzaah! Now either the user can submit the form or the bot can "take a hike".
See a Demo

Feature Summary

Summary of options, which can be toggled on/off when initializing the plugin:

Checkbox

Since this is inserted via JS and isn't marked as a required field, it tricks bots that either aren’t smart enough to click it OR have JS disabled.

Honeypot

This hidden input field tries to bait bots that lazily fill out every field. If this “honeypot" field gets filled out, the form won’t send.

Required

The required filter makes sure all required fields are filled out. This is for bots that ignore / don't support HTML5 required attributes.

Russian

Blocks messages containing Cyrillic characters. This was added recently, when I realized a lot of our spam contained strange Russian text.

Profanity

Checks all the form fields for profanity. If it’s above five words or over 50% of the message (whichever comes first), the email is blocked.

Timer (Removed)

If the user completes the form in less than one second, the message is blocked. This filter has been disabled, due to too many false positives.

Custom Validation Callbacks

By default, this plugin toggles form actions and button classes when a form is validated. However, developers can override these default actions with "valid" and "invalid" callbacks. Why is this important?

User Information New

Collects user info like language, location, IP address, host referrer, and user agent. I usually insert this data into the email body, since it may be useful when profiling future types of spam.

Get Started

Want to quickly add Crema Captcha to your project? Here's how to get started.

A. Javascript

Copy-paste the stylesheet <link> into your <head> before all other stylesheets to load our CSS.

<script src="https://unpkg.com/@cremadesign/captcha@4.4.0-rc/dist/captcha.min.js"></script>

B. Build Tools (Advanced)

  • Run npm install @cremadesign/cremastrap in the console.
  • Include the dist file from node_modules/@cremadesign/captcha/dist into your build process.
View Init

Still Not Convinced?

So having less spammy emails in your inboxes doesn't convince you?
We understand; you'd rather see the numbers.

The Problem

For the past few years, we've noticed an uptick in the amount of contact form spam we get from our website. Scammers will often deploy a special program called a bot that searches the internet for contact forms, emails, etc. Once a bot finds one, it can send you fake advertisements, phishing scams, links to malware-ridden sites, etc.

When I rebuilt our company website in early 2017, I decided to try out an official captcha plugin for our CMS. As you can see below, it was a complete failure. In July, I started saving all the spam that came in, so that I could analyze it when I had an opportunity. I've parsed and compiled one-and-a-half years of daily spam data into the interactive chart below.

Monthly Contact Form Spam

July 2017 – November 2018

The Solution

We finally took action after our spam count started spiking at the end of 2018. Since previous versions of our plugin were working really well on client websites, we decided to give our homebrew captcha a much needed upgrade1. So in December, I rewrote our previous loose collection of captcha and validation functions into my first jQuery plugin — adding cool new features like Russian and Profanity filters along the way.

Why rebuild what works? Since all previous versions were functions built for FormMail forms (not plugins) — we started running into compatability issues when implementing it on new sites. Some sites used one type of form; others used a different CMS. This resulted in us having different versions for different purposes, which made everything more difficult to maintain.

The Results

As you can see below, our contact form spam dropped to zero the day we implemented this captcha.

This chart represents daily spam before and after implementing this captcha.

Ongoing Development

After being implemented on our company website, this plugin went through several rewrites to add new filters, reduce alternate versions, remove jQuery, and make it more efficient. Crema Captcha v4.0 has already been deprecated, due to incompatible changes. The latest plugin is v4.4.0-rc.

To read more about the differences between versions, please view the version history.

Version History