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

  • 24/10/2018
    How to Create a Net Promoter Score Survey in Pardot

    Learn how to build a net promoter score (NPS) survey directly in Pardot. I will show you how to create an NPS survey that asks the recipient to give you a score from 1 – 10 using an in-email rating that directs them to a Pardot landing page to collect more information.

  • 10/10/2018
    How To Use UTM Parameters to Capture Lead Source in Pardot Part 2

    In part 1, I covered how to use UTM parameters to capture lead source when you are embedding a Pardot form on a Pardot landing page. In this post, I will cover how to implement the same method using an iFramed form on a web page.

  • 25/07/2018
    2 Free Pardot Landing Page Templates You Can Use for Your Next Event

    Create beautiful, responsive landing pages in Pardot by using one of these 2 free Pardot layout templates. These landing page templates are designed specifically for events such as webinars or trade shows, but they will work well with any landing page that contains a form.

About Me

Welcome to my blog, where I share, tips, tricks, thoughts and solutions that I learn in my daily life as a sales and marketing professional.

LEARN MORE

Categories
Most Commented
Popular Posts