Defeating Form Spam Bots

Bonus: You’re gonna wind up the nerds that disable Javascript with this one.

Alright so lets take my contact page. It was receiving probably 50 to 100 spam submissions every day. Not the worst I’ve seen, but still annoying. Moreso when the spam actually gets through.

What I was doing

I was doing the standard honeypot element, y’know where you have a text that’s hidden somehow using CSS, which if filled you discard the submission. It was relatively effective, I’d probably give it a solid 75% effectiveness. The problem with 75% effectiveness if you were getting 100 spam submissions a day, you’re still getting 25 spam messages a day. Dammit.

I then changed the name of this input to other-name, in a hopes that it would trip up the spammer scripts that had a mild amount of smarts behind them - I dunno maybe they ignore fields named ‘honeypot’ or anything super obvious. I also added an aria-label aria-label="Don't fill this one out mate, it's the spam honeypot one" so that hopefully if anyone with visual difficulties could still send me message. This change of input name did help, and I’d say we got to around 90% success, or 10 spam messages a day depending on whether you’re a glass full or glass empty sort of person.

What I’m doing now

The same thing, I have not removed the above, this is in addition to. You’re going to need a page that addresses people that disable javascript, because they’ll whinge and whine about it loudly on the internet if you don’t. The internet Amish are much more noisy than the real Amish.

No you can’t fall back and accept inputs on this URL, because that defeats the entire point of this. It’s important that that page does not accept any form submissions.

Next up, send your form there. <form action='https://cohan.dev/that-needs-js/'> - Yup. You’ve just broken your form entirely. Well done.

Nah, we wanted to do that. Next up we’ll use Javascript to fix what we just broke. Spam bots will eventually start using javascript if people do this enough, but for now I’ve found that barely any of them (if any at all) are doing so.

<form id='myContactForm' action='https://cohan.dev/that-needs-js/' data-action='https://cohan.dev/your/actual/form/submit/url'>

Next it’s a case of having the browser substitute in that data-action for the regular action before submitting the form. Bung this in the page somewhere.

<script>
    function updateContactFormDestination() {
        var contactForm = document.getElementById("myContactForm");
        var realSubmitUrl = contactForm.getAttribute('data-action');

        contactForm.setAttribute('action', realSubmitUrl);
    }

    document.addEventListener("DOMContentLoaded", function(event) { 
        updateContactFormDestination();
    });
</script>

Now you can avoid getting messages from robots and nerds with javascript disabled! :D

Currently this has, for me, had a 100% success rate. 0 spam emails coming from my form per day.

I give it a week.

Maybe you should subscribe to my mail list for when I publish my next bot-thwarter! :D