Alpine JS Form Captcha
✅ Alpine JS plugin that prevents your form getting unwanted submissions through the use of an image puzzle
<form x-data> <input type="text" palceholder="name" /> <div x-form-captcha x-form-captcha-img="..."></div> <button type="submit"> Submit </button> </form>
There is logic in place to stop one click answers, meaning there shouldn’t be a time where the answer is one click away.
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:
You can pass a rotation degrees with
30 is the degrees you want.
It’s very easy to install Alpine JS plugins! 🙌
<script defer src="https://unpkg.com/[email protected]/dist/captcha.min.js" ></script> <script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>
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()