alpinejs-form-captcha v1.0.4

Alpine JS Form Captcha Plugin

!IMPORTANT Plugin is no longer supported.

This plugin adds a simple image-based captcha system to forms using Alpine.js. It helps protect your forms from automated submissions by adding a verification step that should require human interaction.

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>

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

With a CDN

<script
  defer
  src="https://unpkg.com/alpinejs-form-captcha@latest/dist/captcha.min.js"
></script>

<script defer src="https://unpkg.com/alpinejs@latest/dist/cdn.min.js"></script>

With a Package Manager

npm i -D alpinejs-form-captcha

yarn add -D alpinejs-form-captcha

import Alpine from 'alpinejs'
import captcha from 'alpinejs-form-captcha'

Alpine.plugin(captcha)

window.Alpine = Alpine

Alpine.start()