npm package: @mapedy/basic-form-protection
Description: Basic, dependency-free JavaScript form protection (no accessibility). Blocks links, injections, bot behavior and logs suspicious activity.
Author: Alexey Kovalevsky
Latest version: 1.0.2

# 🛡️ Basic Form Protection (Vanilla JS, No Accessibility)

A minimalistic and dependency-free script that adds anti-spam, anti-bot, and anti-abuse protection to forms — designed especially for static websites, WordPress (Elementor, Contact Form 7), and custom HTML.

⚠️ **Warning**: This script disables certain accessibility features like `autocomplete`, `contextmenu`, and text selection. Use it only on forms where bot protection is more important than accessibility.

---

## ✨ Features

- 🔒 **Disables autocomplete** to prevent auto-filled bots.
- 🚫 **Blocks pasted links** and typed URLs in input/textarea fields.
- 🧼 **Cleans possible injections** like `<script>`, `onerror`, and `javascript:`.
- 🖱️ **Disables right-click, text selection, drag-and-drop** on fields and images.
- ⏱️ **Rejects form submissions made in <3 seconds** (likely automated).
- 🧠 **Prevents common DevTools hotkeys** like F12, Ctrl+U, Ctrl+Shift+I.
- 📊 **Sends events to Google Analytics (gtag) and Facebook Pixel (fbq)** if detected spammy behavior.
- ✅ Works with `.wpcf7-form`, `.elementor-form`, and all `<form>` elements by default.

---

## 📦 Installation

```bash
npm install @mapedy/basic-form-protection
```

Then include it on your site (ESM or bundler-compatible only):

```js
import "@mapedy/basic-form-protection";
```

Or via jsDelivr CDN:

```html
<script src="https://cdn.jsdelivr.net/npm/@mapedy/basic-form-protection/form-guardian.min.js"></script>
```

---

## 🧪 Behavior Overview

Once included, this script automatically scans forms on the page and applies:

- `autocomplete="off"` after render delay.
- Blocking `paste` and `input` if links or suspicious code is detected.
- Disabling suspicious key combos.
- Blocking dragstart, context menu, and text selection.
- Measures time between form render and submit:
  - If < 3s, cancels submission and fires tracking events (if available).

---

## 📊 Analytics Events

If your site has **Google Tag** (`gtag`) or **Facebook Pixel** (`fbq`) initialized, the script will automatically emit events on suspicious actions:

```js
gtag("event", "SuspectedSpambot", {
  event_category: "Form Protection",
  event_label: "TooFastSubmission",
});
```

```js
fbq("trackCustom", "SuspectedSpambot", {
  reason: "TooFastSubmission",
});
```

---

## 🌐 Compatible With

- WordPress + Elementor forms
- Contact Form 7
- Custom HTML forms
- Static websites
- Jamstack / Headless forms

---

## 💬 Use Case

This script is ideal when:

- You're tired of bots filling out your lead/contact forms.
- You need lightweight protection without heavy CAPTCHA or external APIs.
- You offer alternative communication options for people with disabilities, and ensuring form accessibility isn’t a priority.

---

## 🧩 Keywords

- Form Security
- Anti-Bot
- Anti-Spam
- Data Protection
- Web Development
- Input Sanitization
- JavaScript
- VanillaJS
- Lightweight
- Form Protection
- Elementor
- Wordpress
- Lead Protection
- Frontend Security
- Web Performance

---

## 📁 License

This project is licensed under the MIT License - see the [LICENSE](https://mit-license.org/) file for details.

---

## Author

Alexey Kovalevsky