Alpine JS Form Captcha
Prevent your forms getting unwanted submissions through the use of an image
puzzle ✅
Example
<form x-data>
<input type="text" placeholder="Name" />
<div
x-form-captcha
x-form-captcha-img="https://images.unsplash.com/photo-1598894000396-bc30e0996899?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=80"
></div>
<button type="submit"> Submit </button>
</form>
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
<script
defer
src="https://unpkg.com/alpinejs-form-captcha@latest/dist/captcha.min.js"
></script>
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
NPM/Yarn
npm i -D alpinejs-form-captcha
yarn add -D alpinejs-form-captcha
Then you can register the plugin.
import Alpine from 'alpinejs'
import captcha from 'alpinejs-form-captcha'
Alpine.plugin(captcha)
window.Alpine = Alpine
Alpine.start()
Stats