Alpine JS Form Captcha

✅ Alpine JS plugin that prevents your form getting unwanted submissions through the use of an image puzzle

Try it out on CodePen

Example 👀

<form x-data>
  <input type="text" palceholder="name" />

  <div x-form-captcha x-form-captcha-img="..."></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/[email protected]/dist/captcha.min.js"
></script>

<script defer src="https://unpkg.com/[email protected]/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 📊

GitHub

View Github