Say Goodbye to Contact Form Spam

A simple, non disruptive strategy to reduce spam from a website’s contact form.

TL;DR

I built the form with an alternate destination, which switches to the proper one once a visitor spends one second on the page.

A contact form on a website

I created a website for a friend who requested that it include a contact form. That’s very understandable. A website contact form offers a quick in-place call to action without compromising user engagement. It can assist users in protecting their privacy and selecting their preferred method of communication.

Getting messages

They began getting messages via the form shortly after the website went live. Yet, they started getting lots of spam messages through the form.

Receiving spam across a communication channel is disruptive and time‐consuming, and it causes message fatigue, which can reduce reaction time and may result in leads cooling off.

Spammers use the website differently

Spammers typically use automated bots to fill contact forms with unwanted messages such as advertisements, phishing schemes, and other unwelcome material. Because they want to repeat this procedure many times, automated systems scrape the page and submit the form in milliseconds. Conversely, users need time to evaluate visual information, respond, type, and submit their messages.

Understanding the difference in behaviour patterns helped me to create a new strategy for filtering out spammers.

The Pareto principle

This approach, sometimes known as the 80/20 rule, supports the idea that there is generally a fairly easy solution to an issue that will address most, if not all, of the situations. The effort will be little, and the result will be adequate. The solution must be straightforward.

What didn’t I Do

Captcha: Numerous websites contain a human verification feature. The concern with this is that they also have an impact on user experience. This technique causes friction and might deter users from filling out the form.

Delayed activation: Certain forms will start disabled and will only be enabled via Javascript. This technique lacks the “false positive” effect, which should provide spammers with the illusion of success.

What did I do

I choose to send the form to a black hole by default. To be honest, it’s not a true black hole — it’s a fictitious email account I use to discover real individuals or validate that this technique works. But, after any user interaction or after some time has passed, I will “repair” the form behind the scenes, automagically: I’ll alter the destination of the form and allow actual messages to get through.

In the following example, a mouse move, a keyboard interaction or a 1 — second delay will change the destination of the form.

document.addEventListener("mousemove", enableForm, { once: true, passive: true });
document.addEventListener("keydown", enableForm, { once: true, passive: true });
const enableFormTimer = setTimeout(enableForm, 1000);

function enableForm() {
  // Remove any redundant triggers, this only needs to run once
  document.removeEventListener("mousemove", enableForm);
  document.removeEventListener("keydown", enableForm);
  clearTimeout(enableFormTimer);

  const form = document.querySelector("form.contact");
  const action = form.getAttribute("action");
  const realEmail = "my@email.com";
  const newAction = action.replace(
    /(\?destination=)([^&]+)(&|$)/,
    `$1${realEmail}$3`
  );
  form.setAttribute("action", newAction);
}

Surprisingly Good Results

This approach produced unexpectedly effective results. Spam messages were fully removed, and all messages sent to my “black hole” account were genuine spam. Effectively, for the websites I applied this, there was a 100% success rate in spam blocking and no false positives.