https://github.com/markmead/alpinejs-form-captcha
Prevent your forms getting unwanted submissions through the use of an image puzzle ✅
https://github.com/markmead/alpinejs-form-captcha
alpine-js alpinejs alpinejs-plugin captcha form-captcha form-validation javascript-captcha javascript-validation validation
Last synced: 4 months ago
JSON representation
Prevent your forms getting unwanted submissions through the use of an image puzzle ✅
- Host: GitHub
- URL: https://github.com/markmead/alpinejs-form-captcha
- Owner: markmead
- License: mit
- Created: 2022-07-16T10:45:12.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2024-04-04T11:01:23.000Z (about 1 year ago)
- Last Synced: 2025-02-03T10:03:15.978Z (5 months ago)
- Topics: alpine-js, alpinejs, alpinejs-plugin, captcha, form-captcha, form-validation, javascript-captcha, javascript-validation, validation
- Language: JavaScript
- Homepage: https://js.hyperui.dev/examples/form-captcha
- Size: 22.5 KB
- Stars: 5
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Alpine JS Form Captcha
Prevent your forms getting unwanted submissions through the use of an image
puzzle ✅
### [Try it out on CodePen](https://codepen.io/markmead/full/abYpZbj)
## Example
```html
Submit
```
### Bot Prevention
There is logic in place to stop one click answers, meaning there shouldn't be a
time where the answer is one click away.
### Styling
In the `x-form-captcha-img` is where you can pass the URL for the image you want
displayed.
The HTML that is generated hsa the following classes:
- `fvWrapper`
- `fvImg`
- `fvActions`
- `fvPrev`
- `fvNext`
### Modifiers
You can pass a rotation degrees with `x-form-captcha.30` where `30` is the
degrees you want.
## Install
It's very easy to install Alpine JS plugins! 🙌
### CDN
```html
```
### NPM/Yarn
```shell
npm i -D alpinejs-form-captcha
yarn add -D alpinejs-form-captcha
```
Then you can register the plugin.
```js
import Alpine from 'alpinejs'
import captcha from 'alpinejs-form-captcha'
Alpine.plugin(captcha)
window.Alpine = Alpine
Alpine.start()
```
### Stats
