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

  • 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.






  • 27/10/2016
    How to Create a 2 Column Pardot Form

    After launching my Form Style Generator for Pardot Forms, the number one question I receive is ‘how do I create a 2 column form in Pardot?’ I might update the style generator to include this in the future, but in the meantime, here’s how to create a 2 column Pardot form with minimal coding.






  • 23/08/2016
    How to Improve Pardot Form Conversions by Using Google Places

    It’s a fact that shorter forms have a higher conversion rate, but in B2B marketing longer forms are needed to capture essential information for lead scoring and lead routing. In this tutorial, I will show you how to use the Google Places API to auto-fill city, state/province, country and postal code/zip code within your Pardot forms. Don’t worry, you don’t need to know how to code to implement this, you just need to know how to copy & paste.






About Me

I’m a Marketo & Pardot expert with a strong background in design and development. I specialize in email marketing, lead nurturing and CRM integrations for marketing and sales alignment. LEARN MORE

Categories
Most Commented
Popular Posts