Stop Spam Without Annoying The User

Note: From version 1.5.8 HostelPRO supports this advanced honeypot field feature in the booking form. If you are plugin user all you need to do is to enable it from the HostlPRO Settings page. The guide below is for other developers who may want to do the same in their application.

What's a Honeypot Field?

Most spam bots aren't too smart and will fill all the fields they find in a form in attempt to spam it. This led to inventing super-simple "honeypot" fields - input fields hidden by CSS. Users don't see them and don't fill them, while bots fill them. In your backend you just have to check if the field is empty. If it is not, voila, you have caught a spammer.

Honey jar

Unfortunately many bots are not that stupid anymore and figure out when a field is hidden by CSS, and just don't fill it. So we decided to complicate the things a little bit with two fields:

  • One hidden by CSS and empty honeypot field just like before.
  • Another hidden field filled by data we can verify on the server. More on this in the next step.
  • When submitting the form we use Javascript to transfer the value from field 2 to field 1.
  • On the server we check if field 1 is empty or have any other data than field 2. If yes, you caught a spammer.

WARNING!!! Users with Javascrpt disabled will also be considered spammers because the data between the two fields is transferred by JavaScript. Almost everyone has Javascript enabled nowadays, otherwise they wouldn't be able to browse 90% of the web. But still you need to have this in mind.

How To Do It

We'll use PHP on the server side and JavaScript on the front end. Here is what you need to do step by step:

A. Two fields on the front-end:

	<input type="text" class="gimmehoney" name="app_id" value="">

	<input type="hidden" name="app_source_id" value="_<?php echo md5('morehoney'.$_SERVER['REMOTE_ADDR']);?>">

The above code adds one text field that will be hidden by CSS and has no value, and another hidden field that has value. The names of the fields are not important. IO used things like app_id etc because they may look less suspicious to a spam bot. Definitely avoid calling them "honeypot" or something like that, and avoid using names which can be used from the real fields of the form. In your CSS don;t forget to set display:none for class "gimmehoney".

In the second field we construct md5 of a some word and the user's IP. The exact format doesn't matter, but it's important to be dynamic and something that you can reproduce on the back-end when you are verifying the field.

B. JavaScript function that will transfer the field data.

You can add it on document load or when validating the form. In HostelPRO we have a form vaidation function that sends the data by ajax so this is the best place to do the transfer. The function could be something like this:

function validateForm(frm) {
	// do some validations
 	// then transfer the honeypot fields
 	frm.app_id.value = '_' + frm.app_source_id.value;
}

We are even adding one more underscore. The idea of all this is to confuse bots and make sure something that doesn't run JavaScript won't be able to submit the form properly.

C. Verify the data

Then all you need to do is to verify the data on the back-end:

	<?php
 	// do this right before inserting or processing the data of the form
 	if($_POST['app_id'] != '__' . md5('morehoney'.$_SERVER['REMOTE_ADDR'])) die("Go away, spammer!");
 	?>

That's it. This simple honeypot field should be able to catch most of the spam bots.