Web Design, SEO & CSS… etc

I have been developing an installation of the superb Prestashop eCommerce solution for my wife’s lingerie webshop. I’ve made a significant amount of changes and additions to the coding in places for increased security, usability and SEO.

One of the first things I found was that the “Send To A Friend” module was wide open to possible attack by automated spammers. I don’t know about you, but I am really tired of annoying captcha images that are getting harder and harder to read and being crap at maths i don’t like having to perform sums before submitting a form.

So, I thought I’d try and implement a thing called a honeytrap or spam trap, whatever it’s called it was something I’d read about.

In a nutshell it is a field in the form that has to be left blank in order for the form to process and send when the user clicks submit. If the field is filled in the form does not send and as spambots, being a bit thick, fill in every field of the form, surely this trap will catch them out.

It required a bit of hacking into the original code and a couple of lines of CSS adding to the theme/yourtemplatename/css/global.css file but all in all it was pretty quick to do.

Here are the 3 files that need to be edited:

(Remember, always create a backup of the original files before editing)

• /themes/yourtemplatename/css/global.css
• /modules/sendtoafriend/sendtoafriend.php
• /modules/sendtoafriend/sendtoafriend.tpl

I use notepad++ for editing files but line numbers may vary if your files have already been edited or are from a different version.

sendtoafriend.tpl is the template file for the front end view of the send to a friend form that is displayed. In your file find this snippet of code:

<p>
<label for="friend-address">{l s='Friend\'s email:' mod='sendtoafriend'}</label>
<input type="text" id="friend-address" name="email" value="{if isset($smarty.post.name)}{$smarty.post.email|escape:'htmlall'|stripslashes}{/if}" />
</p>

<p>
<input type="submit" name="submitAddtoafriend" value="{l s='send' mod='sendtoafriend'}" />
</p>

We’re going to add the new field for the spam trap between the email address field and the submit button (line 5 in the code above) to give us the following.

<p>
<label for="friend-address">{l s='Friend\'s email:' mod='sendtoafriend'}</label>
<input type="text" id="friend-address" name="email" value="{if isset($smarty.post.name)}{$smarty.post.email|escape:'htmlall'|stripslashes}{/if}" />
</p>

<p>SPAM Trap Please leave the following field blank</p>
<input type="text" name="begonespam">

<p>
<input type="submit" name="submitAddtoafriend" value="{l s='send' mod='sendtoafriend'}" />
</p>

This adds the new text input called “begonespam” which is fine but at this stage the field will be visible to users. Although it instructs them to leave the field blank it could be confusing and it looks kind of silly. We can use a bit of css to hide the new field, so it’s still there to catch the spambot but just not visible to the human user.

First, place the new code into a <div>, call it what you like but in this example the <div>is given the id, “begonespam” like so:

<div id="begonespam">
<p>SPAM Trap Please leave the following field blank</p><input type="text" name="begonespam">
</div>

and the following CSS is added to the global.css file

/* spam trap hidden field for sendtoafriend */
div#begonespam {

display: none;

visibility: hidden;

}

So now we have an invisible form field – (Note when you come to test the form you may want to keep the field visible to begin with to test that it works correctly. From your installation, send a product to yourself once with the field left blank and then again with it filled in to see what .)

Before testing it though, we need to edit the final file, sendtoafriend.php the form processor.

Around line 44 in your text editor (note, the numbering here is all to sh** now – if anyone knows of a nice code snippet plugin for WP let me know!) you’ll see this code:

/* Fields verifications */
 if (empty($_POST['email']) OR empty($_POST['name']))
 $error = $this->l('You must fill all fields.');

Between /* Fields verifications */ and if(empty($… add the following code:

if (!empty($_POST['begonespam'])) { return false; }

so we now have something like this:

/* Fields verifications */

 if (!empty($_POST['begonespam'])) { return false; }

 if (empty($_POST['email']) OR empty($_POST['name']))
 $error = $this->l('You must fill all fields.');

As I mentioned above, keep the new form field visible while you test it. You can either comment out the div tags or just leave the css part until you’re sure it works.

You can see, or more to the point not see, the thing in action here: Pretashop – Modified Send To A Friend Module

It’s early days to give any performance indicators but it sure is a lot nicer looking than a big old, illegible captcha image.