This modular javascript plugin inserts a checkbox captcha into the specified form and checks the honeypot, checkbox, and required fields on every field change. If valid, it enables the submit button, adds a form method, and inserts the provided form actio
npm install @cremadesign/captchaI began developing this plugin in 2013 with a simple goal in mind: block spam without annoying users. Your clients don't want to decipher garbled words or play "Find the Storefront". They just want a simple contact form that works. Over several years, this project evolved from a disjointed medly of basic functions into a customizable pure javascript plugin with advanced captcha filters.
Crema Captcha's build process requires NPM, Rollup, and a few plugins. This open-source setup allows us to write newer javascript with modern ES6 features such as import statements and tree-shaking unused functions. Rollup compiles everything to the dist/ directory using the following NPM plugins:
- Node Resolve Plugin: Allows us to use external ES modules.
- CommonJS Plugin: Allows us to use external CommonJS modules.
- Babel Plugin: Transpiles ES6 code to ES5 code older browsers can understand.
- Uglify: Minifies plugin JS for production.
- ESLint: Validates syntax and code style.
- Badwords: An array of obscene words for the profanity filter.
- Rot: A rotational cipher that obfuscates the badwords array, so it doesn't show up in final output.
- Replace: Inserts the obfuscated badwords array into our final output.
src/index.js is the main entry point for the JS compile script. So be sure to start there.
The compiled JS plus its sourcemap is written to the dist/ directory.
To compile your JS (excl. minification) whenever you make a change to a JS file. This will automatically compile changes to our captcha at captcha.test, but will not be added to Cremastrap.
``bash`
yarn watch
To compile your JS for production (incl. minification), run:
`bash``
yarn build
Adding it to a website is easy. See the init instructions on the official site:
https://captcha.cremadesignstudio.com/
My build process was heavily inspired by three different build scripts:
- Rollup Bundle and Watch: This author's recipe was used as the general framework for my setup.
- Learn Rollup.js Part One: This informative guide explains Babel and the Rollup config more in depth.
- Bootstrap: Bootstrap's build process introduced me to Rollup and gave me some basic ideas on packaging, such as banner.js and package.json.