Preventing 100% of automated form spam

The “Custom Tag Method”

Considering these drawbacks, I decided to develop my own anti-spam method, called the “Custom Tag” method. I have been using this method very successfully for some time now and have not had a single spam submission since implementing it! The “Custom Tag Method” is simple to implement, does not invade anyone’s privacy and does not require people to prove their humanness. I use it with form elements, but it actually works with any html element and in all modern browsers.

How it works

  1. Add an opening and a closing tag (!) with the name f-f
<f-f></f-f>
<f-f el=”input”></f-f>
<f-f el=”textarea”></f-f>
<f-f el=”select”></f-f>
<f-f el=”input” type=”text” name=”name” class=”formel”></f-f>
<f-f el=”input” type=”checkbox” name=”mycheckbox” value=”Yes” checked></f-f>
<f-f el=”input” type=”radio” name=”mycheckbox” value=”No” checked></f-f>
<f-f el=”textarea” name=”message” style=”height:40px;width:200px;”></f-f>
<f-f el=”select” name=”mycheckbox2"><option value=”Monday”>Monday</option><option value=”Tuesday”>Tuesday</option></f-f>
<script>
//register the custom element document.addEventListener("DOMContentLoaded", function () {
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"]);
for (let key in attrs){ //loop through the array of attributes
//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]);
els[i].remove(); //remove the f-f element from the DOM
}
});
</script>

Readings

https://blog.cloudflare.com/introducing-cryptographic-attestation-of-personhood/
https://blog.cloudflare.com/moving-from-recaptcha-to-hcaptcha/
https://www.fastcompany.com/90369697/googles-new-recaptcha-has-a-dark-side
https://human-id.org/blog/recaptcha-how-much-will-we-give-up/
https://wpmailsmtp.com/best-recaptcha-alternatives/
https://www.bairesdev.com/blog/4-methods-to-fight-against-spam/

--

--

--

Product Designer, Frontend Developer and Usability Engineer at Digiata

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Cloud-Init with vRealize Automation and vSphere — No CD Drive!

Odoo | Docker| custom addons

I ought to mention that functional programming has been around for a long time.

Glossary ● Cloud Native Applications

Search: Needle in the Invocation Stack

Word Prediction using a Shiny Webapp

Kubernetes : Deep Dive

Frontend Versus backend for dummies

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Franz Rodenacker

Franz Rodenacker

Product Designer, Frontend Developer and Usability Engineer at Digiata

More from Medium

How to Create a Blue and Gold Color Grading Effect in Photoshop

Installing Unity & Getting Started

Book Review: User Friendly by Cliff Kuang with Robert Fabricant

26 Questions with Hueman — The Designers