Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rodenacker/FormSpamPrevention
A simple script to prevent bots from submitting online forms
https://github.com/rodenacker/FormSpamPrevention
Last synced: 2 months ago
JSON representation
A simple script to prevent bots from submitting online forms
- Host: GitHub
- URL: https://github.com/rodenacker/FormSpamPrevention
- Owner: rodenacker
- License: mit
- Created: 2022-05-31T06:36:52.000Z (about 2 years ago)
- Default Branch: master
- Last Pushed: 2023-10-23T05:10:39.000Z (8 months ago)
- Last Synced: 2024-01-24T17:06:50.658Z (5 months ago)
- Language: HTML
- Size: 37.1 KB
- Stars: 42
- Watchers: 1
- Forks: 4
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Lists
- awesome-ak - FormSpamPrevention - A simple script to prevent bots from submitting online forms (DevTools / Tools)
README
# Stop Form Spam: The Custom Tag Method
A reliable method to prevent spam bots from completing input, select and textarea fields and from submitting online forms (e.g. contact forms)
## How it works
Use a small bit of Javascript to convert custom tags to valid form tags.
## Usage
The example below converts \\ tags to input, select and textarea tags after the page loads. This means the page html does not need to contain such tags and spam bots cannot populate them. The JS is very fast, so human page visitors do not notice the conversion.
1. Add an opening and a closing tag (!) with the name f-f
```html
```
2. Add an "el" attribute with the element you want to create
```html
```
3. Add any attributes you want your element to have
```html
MondayTuesday
Submit
```
4. Add the script below to the page. When the page loads it creates a new element using the "el" attribute in all f-f elements. It then adds all other attributes and all child elements to the new element before removing the f-f element from the DOM.
```html
document.addEventListener("DOMContentLoaded", function () {
//register the custom element
window.customElements.define('f-f', class extends HTMLElement {});
//get an array of f-f elements to convert
const els = document.getElementsByTagName("f-f");
//loop through the array of elements
for (let i=els.length-1;i>=0;i--){
//create an object of the attributes
let attrs = els[i].getAttributeNames().reduce((acc, name) => {
return {...acc, [name]: els[i].getAttribute(name)};
}, {});
//create a new element using the el attribute
let el = document.createElement(attrs["el"]);
//loop through the array of attributes
for (let key in attrs){
//filter out the el attribute
if(attrs.hasOwnProperty(key) && key != "el"){
//add all other attributes to the new element
el.setAttribute(`${key}`, `${attrs[key]}`);
}
}
//loop though the child nodes of the f-f
while (els[i].childNodes.length > 0) {
//append child nodes to the new element
el.appendChild(els[i].childNodes[0]);
}
//insert the new element into the DOM
els[i].parentNode.insertBefore(el, els[i]);
//remove the f-f element from the DOM
els[i].remove();
}
});
```
## Full Example
```html
Your Name
Email
Message1
Message2
Select
MondayTuesday
Checkboxes
Radio Buttons
Submit
document.addEventListener("DOMContentLoaded", function () {
window.customElements.define('f-f', class extends HTMLElement {});
const els = document.getElementsByTagName("f-f");
for (let i=els.length-1;i>=0;i--){
let attrs = els[i].getAttributeNames().reduce((acc, name) => {
return {...acc, [name]: els[i].getAttribute(name)};
}, {});
let el = document.createElement(attrs["el"]);
for (let key in attrs){
if(attrs.hasOwnProperty(key) && key != "el"){
el.setAttribute(`${key}`, `${attrs[key]}`);
}
}
while (els[i].childNodes.length > 0) {
el.appendChild(els[i].childNodes[0]);
}
els[i].parentNode.insertBefore(el, els[i]);
els[i].remove();
}
});
```