Validate form content with API call (Akismet alternatives)

support
1

Has anyone here successfully used the Akismet API to validate form submissions?

From what I can see, they require datapoints that aren’t typically available for a server-less setup (such as user IP, referrer)

Is there an alternative that I can use purely with what is doable using client-side JavaScript?

I’m using a honeypot field already, but some clever spam still gets through. I don’t want to use reCaptcha.

I’m looking to cut down on form spam, without using a third-party form handler.

Any tips?

Thanks,

Matt

2

I use a combination of honeypot field and disabling form submit until key press or mouse/touch event. Works surprisingly well.

The only downside is that the form will not work without JavaScript.

I use this for the contact form in my Hugo Zen theme.

A live version of the form Contact – xdeb.net

1 Like
3

thanks for the code, I’ll give that a shot!

4

Is this jQuery?

5

Almost, been using https://umbrellajs.com that is more or less a light weight version of jQuery.

7

The concept can easily be implemented in vanilla JS.

8

Your solution actually worked. Switched to Formspree.

9

I’ve only implemented the submit button locking code (not the form hiding part) from frjo’s suggestion, and that is working great already:

// Unlock the submit button if mouse is moved (desktop)
window.addEventListener('mousemove', function () {    
    document.getElementById("submitBtn").disabled = false;
});

// Unlock the submit button if touchscreen is dragged (mobile)
window.addEventListener('touchmove', function () {    
    document.getElementById("submitBtn").disabled = false;
});

// Unlock the submit button if tab or enter is pressed (keyboard)
window.addEventListener('keydown', function (e) {    
    if ((e.key === "Enter") || (e.key === "Tab")) {
        document.getElementById("submitBtn").disabled = false; 
        // console.log(e.key);
    }
});

Some (but very little) spam gets through. What has worked great for the remaining spam, is cycling through the POST values before sending them, and do a simple check for a URL in any fields that shouldn’t naturally contain any (since most spam wants you to click on a URL, which will only show up as a blue link if it contains http:// or https://):

// for spam, check if string contains a URL
function containsUrl (content) {
  
  return (/(https?:?\/\/)/.test(content));

}

That simple check has worked great also. Obviously proceed with caution and only apply to fields that really would not contain URLs naturally. Thanks again frjo!

1 Like
10

This is very impressive! After looking for tens of ways to fight SPAM for static forms, this does it! Haven’t had any SPAM in a week! Have you documented it anywhere?

11

Glad you found it useful.

It is part of my Zen theme that is on GitHub. Since this post I have converted it to vanilla JS.

1 Like
12

I switched to this and testing it to send email works. Will monitor spam and see.
@frjo not sure why it happens, but combining this JS using Hugo’s slice makes the search form disappear.
Ignore. It was a Hugo issue. Restarting the server sold it.