How to Prevent Form Spam by Using The Honeypot Technique

In:

Stop using captchas and start using the honeypot technique to stop form spam. In this tutorial, I will teach you how to implement the honeypot technique on your forms. Some coding is required, but most of it is copy and paste.

If you’re using Marketo forms there is a slightly different way of implementing the honeypot technique. Click here to read the tutorial.

What is the honeypot technique?

The honeypot technique is a fast, effective way to prevent spam bots from submitting your forms. Spam bots love form fields and when they encounter a form field they will fill it out, even if the field is hidden from the user interface. To leverage this, you can create a form field that should be left blank, but hide it from human users. When the form is submitted you can check to see if there’s a value for the field and block the form submission.

Step 1: Add the field to your form

First, add the honeypot field to your form. You can place it anywhere on your form, but I usually put it as the last field.

Note: this field DOES NOT have to exist in your database.

The form field and label are wrapped in a DIV which is hidden using CSS. Using CSS to hide the fields will hide the field to the user, but not to spam bots.

Just in case the user does see the field, which is unlikely, a label can be added to instruct the user not to fill out the field.

Step 2: Add some Javascript validation

Now that the form field has been added to the form, there needs to be some validation to check if the honeypot field is empty. This can be done easily in javascript.

Add this piece of code to your FORM element

When added your form code should look similar to this:

Add this javascript to your page:

Step 3: Testing

To test the form, you can unhide the field from the user interface by removing style=”display:none;” from the DIV and try these 2 tests.

  1. Try leaving the honeypot field blank

    If the field is blank it should submit the form and direct you to the thank you page.

  2. Try filling out the honeypot field

    Fill out the honeypot field with any value. The form should not submit or direct you to the thank you page.

If both the tests work, you can add the style=”display:none;” CSS property back to the DIV.

That’s it!

Your forms will now be spam free! Here’s the full piece of code:

Questions?

Email me, send me a tweet @jennamolby, or leave a comment

Related Posts

  • 08/09/2017
    How to Create Responsive Marketo Forms

    Marketo forms, by default, have set widths for many elements including all the form fields, labels and even the form itself. If you’re embedding your form in a responsive landing page, you might want to make the form fully responsive as well. With a bit of CSS, you can make your one-column and two-column Marketo forms look great on every device.

  • 05/07/2017
    Make Your Marketo Forms More User-Friendly With This Tip

    I was registering for a webinar this week and when I went to select my Country from the drop-down, I was greeted with a search feature for the drop-down. I immediately started Googling what JavaScript plugin they were using to see if I could use it on Marketo forms. It turns out, you can and not only is it super easy to implement, but it also makes long drop-down in your Marketo forms more user-friendly. I’ll walk you through how I did this in 4 easy steps.

  • 04/01/2017
    Beautiful Marketo Forms: Styling Checkboxes and Radio Buttons

    Your Marketo forms don’t have to be boring. With a little extra CSS you can create beautiful Marketo forms with customized checkboxes and radio buttons. In this tutorial, I’ll show you how you can style checkboxes and radio buttons within Marketo forms with minimal coding.

About Me

I am a results focused marketing automation expert, with a strong background in design and development. With a high level computer science background, I have the unique ability to design, code and understand data, while utilizing this skillset to further enhance my value and ROI in the digital marketing space.
LEARN MORE

Categories
Most Commented
Popular Posts