Hon-ee Pot Captcha for ExpressionEngine

I have a confession to make: I hate captcha. But on the other hand, spam is one of the most frustrating issues ever. So with that being said, I am a big fan of Honeypot Captcha.

I couldn’t find any ExpressionEngine addons that added honeypot captcha functionality for both the comment form and the Freeform module, so I decided to go ahead and create one.

Basic Functionality

This extension validates the EE comment form and Freeform forms to make sure a field that is hidden with CSS is left empty.

Getting Started

  • Download Hon-ee Pot Captcha
  • Unzip the folder and copy the honeepot folder into your /system/expressionengine/third_party/ directory.
  • Go to Add-ons → Extensions and “Enable extension”.
  • You can customize the field name for the honey pot field and the message a user receives if the field is filled in by going to the extension settings.

Setup

In the Freeform module, go to Fields → Create a New Field. Now create a field with the field name matching the field name in the Hon-ee Pot Captcha settings. The default is honeepot.

Now in your form, add the honey pot field:

<li class="screen-reader">
  <label for="honeepot">Don't put anything here</label>
  <input type="text" name="honeepot" id="honeepot" />
</li>

In my CSS, I have a class to move things off of the page:

.screen-reader {
  display: block !important;
  left: -9999px !important;
  position: absolute !important;
  top: -9999px !important;
}

You can add the same form field to your comment forms as well.

That is all

Hopefully this addition will help to combat some of the spam contact form submissions and comments (even though they get caught by Low NoSpam). You can download the Hon-ee Pot Captcha extension on Github. Let me know if you run into any issues.

21 Comments

John Macpherson

01.10.2011

Hi there,

Thanks for producing this.

I cant get it to work unfortunately. Goes straight to confirmation page with no errors. When i disable the extension the form then produces errors when no date is submitted.

Is it working with 2.1.3 and FF 3.0.5?

Thanks.

John Macpherson

01.10.2011

Ok, update:

Apologies i think it is working per planned but there is a flaw. Its not a major one however.

Required fields don’t work, so a user can submit the form but with no data.

It should catch spam though which is what its designed for.

Thanks again.

Trevor

01.10.2011

@John-
Thanks for letting me know about the problem. I just pushed a update which you can download here.

John Macpherson

01.10.2011

Now working 100%, thank you for super quick reply and fix.

Now my favourite way of catching spam ( *i hope - needs a few days for no spam to arrive )

Seamus

01.20.2011

I’ve been waiting for something like this ever since I heard about this clever technique. Thanks for an awesome contribution!

Is it something that could be adapted to registration forms via the Solspace User module?

Trevor

01.20.2011

@Seamus-
I’ve never used the User module, but it looks like there is an “user_register_error_checking” hook that could be used.

Seamus

01.20.2011

Thanks for the guidance, hopefully I can figure out a way to set that up.

Mark Bowen

02.24.2011

Hiya,

Was just wondering whether this add-on works with ExpressionEngine V1.7.x aswell or just 2.0?

If it doesn’t work with 1.7.x then how difficult would something like this be to port back?

Thanks.

Best wishes,

Mark

Trevor

02.24.2011

@Mark Bowen-
Right now, it only works on 2.0. It looks like the hook is available in 1.7.x too, so I would imagine it would be pretty easy to port over. If you need it for 1.7.x, I certainly welcome you to fork the code and port it on over.

Mark Bowen

02.25.2011

Hi Trevor,

Thanks for the info. Might have a look at this myself some time if I get the chance.

Best wishes,

Mark

Dmitry Romanovsky

04.07.2011

hi Trevor,
shoud we ebable Capthca in “Comment Posting Preferences” or it doesn’t matter?
dmitry

Trevor

04.07.2011

@Dmitry Romanovsky-
No, that will just enable the regular EE captcha.

Kemar

04.10.2011

Hey Travis,

I am experiencing a problem here. I’ve pretty much done as instructed with it installed, enabled the code inserted. But it appears it doesn’t work. I have EE2.1.3. Please look at the code and tell me what’s wrong here!

{embed=“includes/document_head”
entry_title=”{exp:channel:entries channel=“pages” show_pages=“yes”}{title} | {/exp:channel:entries}”
}


[removed][removed]
[removed]

<!—Validate form—>
[removed]

$(function (){ 

$(”#freeform”).validate({
  success: function(label) {
  label.text(“ok!”).addClass(“success”);
  },
  rules: {
  email: {
        email: true
    }
  }

});
});

[removed]


{embed=“includes/masthead”}<!—end of master header—>

<div id=“middle”>
<div class=“title”>{site_url}images/interface/title_contact.png</div>

<div class=“subcontent clearfix”>

<div class=“rightcol”><!—begin right column—>
<h1> Alternative Method</h1>     
Need to hear a human voice? Then beep
 

<h1>Hours of Operation</h1>
<h2>Mondays-Fridays</h2>
8:30am-5:30pm


<h2>Weekends Closed</h2>
Need a break to catch up with things in life
</div><!—end of right column—>

<div class=“leftcol “><!—begin left column—>

<h1> Use the Online Form</h1>

{exp:freeform:form
  collection=“contact_form”
  required=“name|email|message”
  return=”/thankyou”
  notify=“somemailhere@yahoo.com”
  template=“contact”
  class=“contact-form”
}

<li class=“screen-reader”>
  <label for=“honeepot”>Don’t put anything here</label>
  <input type=“text” name=“honeepot” id=“honeepot” />
</li>

<label>Name*</label>

<input name=“name” type=“text” size=“76” class=“custom” value=”“/>


<label>Email Address*</label>

<input name=“email” type=“text” size=“76” class=“custom” value=”“/>


<label>Message</label>

<textarea name=“message” cols=“60” rows=“8” id=“message” class=“comments”></textarea>


<button type=“image” name=“submit” value=“submit” class=“send”>Send Away</button>

{/exp:freeform:form} 


</div><!—end left column—> 
</div>
<div id=“sect_headbg”>
<h4>WANT TO START TODAY?</h4>
<h4>LIKEABLE CONNECTIONS</h4>
<h4>FOOD FOR THOUGHT</h4>
</div>

</div>
</div>

{embed=“includes/footer”}

</div>
</body>
</html>

THANKS

 

Trevor

04.10.2011

@Kemar-
Can you give me some more information about what is not working? Is it not validating? Is the form not submitting?

Kemar

04.11.2011

Hi trevor,

After I fill out the form, it produces the error that is defaulted in the honeepot field like ” I think your a robot”. Now for some reason, no validation, nor submission occurred.

You understand?

Trevor

04.11.2011

@Kemar-
Is the name in the extension setting “honeepot”?

Kemar

04.11.2011

Exactly how you have it in the example and also how it’s explained here.
http://www.mediasurgery.co.uk/eesurgery/videos/freeform-accessible-and-validated-web-forms

Trevor

04.11.2011

@Kemar-
Just for clarification, that is not my article. I’m not sure why it’s not working for you. I can confirm that it works on EE 2.1.3. Unless you want to give me access to your CP, I can’t really help beyond that.

Kemar

04.11.2011

Okay, i will give you access to my control panel. How do i contact you privately?

kemar

04.12.2011

Email sent!

Too late, comments are closed!

Don’t worry, you can email me or contact me on Twitter.