How to protect public forms from spam submissions

Spam submissions can clog up your public forms and compromise their usability. A simple yet effective way to counter this is by implementing the honeypot method. Here's how to set it up step by step.

1. Generate a Honeypot Value

Add the following code in the before-process event to generate a random 5-digit number and store it in a variable:

my_variables.honeypot = str_pad(rand(0, 99999), 5, '0', STR_PAD_LEFT);

This ensures that every session gets a unique honeypot value.

2. Create a Hidden Field

Use the on-render event to create a hidden input field in the form and populate it dynamically. Here’s the code:

const honeypotValue = my_variables.honeypot;
const form = $('form');

form.append('<input type="text" name="honeypot" id="honeypot" style="display:none;">');

form.on('focusin', 'input', function() {
    if (!$('#honeypot').val()) {
        $('#honeypot').val(honeypotValue);
    }
})

A hidden input field named `honeypot` is added to the form.

The field is updated with the generated value when a user interacts with the form.

3. Validate the Honeypot Value

Finally, in the before-submit event, validate the honeypot field to detect spam submissions. Use the following logic:

if(form_values["honeypot"] != my_variables["honeypot"]){
	return "Bot detected or invalid submission!";
} else {
	array_del(form_values,"honeypot")
}

How It Works

• When a legitimate user interacts with the form, the honeypot value is set in the hidden field.
• A bot, however, often fills out all form fields or skips dynamic updates, resulting in an invalid honeypot value.
• The validation logic ensures the submitted value matches the generated one, flagging spam submissions.

Benefits of the Honeypot Method

• Invisible to Users: Unlike captchas, it doesn’t interrupt the user experience.
• Effective: It’s highly effective against automated bots.
• Simple to Implement: Requires minimal coding and maintenance.