Issues with Honeypot in Contact Form

Design help Custom code
#1

I have included the code at the bottom of this post on one of my pages for a contact form that includes the following honeypot field:

<input type="text" autocomplete="off" name="address" value="">

If a bot fills in this “address” field, which should be tempting to a bot, the submission is rejected. I’m using an HTML Embed element to include the hidden input field:

  <div class="contact-form-field w-embed">
    <input type="text" autocomplete="off" name="address" value="">
  </div>

…and the class on that div, “contact-form-field”, hides the honeypot so that the “display:none” is not inline and detectible by the bots. However, for some reason, we are still receiving quite a few bot submissions and I’m wondering if anyone notices anything wrong with my honeypot implementation. Any suggestions are greatly appreciated.

<form action="/contact/" method="post" data-name="contact-form" id="wf-form-contact-form" name="wf-form-contact-form" class="form">
  <div class="w-embed">
    <input type="hidden" name="form-type" value="contact">
  </div>
  <div class="contact-form-field w-embed">
    <input type="text" autocomplete="off" name="address" value="">
  </div>
  <input type="text" class="form-field contact-sales-form-field w-input" maxlength="256" name="name" data-name="name" placeholder="Enter your name..." id="name" required="">
  <input type="email" class="form-field contact-sales-form-field w-input" maxlength="256" name="email" data-name="email" placeholder="Enter your email..." id="email" required="">
  <input type="tel" class="form-field contact-sales-form-field w-input" maxlength="256" name="phone" data-name="phone" placeholder="Enter your phone..." id="phone">
  <textarea id="message" name="message" placeholder="Enter your message..." maxlength="5000" data-name="message" required="" class="form-field contact-sales-form-field text-area w-input"></textarea>
  <input type="submit" value="Submit" data-wait="Please wait..." class="hollow-button contact submit w-button">
</form>
#2

Hi,

Probably the best way to avoid a bot submission is to add a Recaptcha to your site and use a Webflow form.

You can add Recaptcha easily with this tutorial.

1 Like
#3

As @JSW said the captcha is probably more effective than the honeypot. But if you want someone to look at it can you share your published site link?

1 Like
#4

@sam-g I would prefer not to share my published site link (or my Webflow read only link) if I can avoid it. I was hopping that source code generated by Webflow from my original post would be sufficient. Can you let me know what you would like to see?

#5

Assuming you are using some javascript to reject the form submission if that field has a value? Posting that would be useful, or creating a codepen with the form and honey pot code.

#6

@sam-g The form processing/handling is all server-side (no javascript). I’ve checked log details and confirmed that the bot submissions are not filling in the “address” input field for some reason. Given this, I’m interested if there is something I am doing in the form HTML from my original post that the bots are detecting and subsequently avoiding that “address” input field.

#7

I see, so you are collecting the form submission and then checking that field after submission to decide if the data gets passed along or not?

I’m not sure if it would make a difference, but the additional div around the input may make a difference, depending on how the “bot” is iterating through the form fields it may be avoiding inputs nested an additional level, but I really don’t know, just a guess.

You could try opacity zero instead of display none. As recommended in this article: https://dev.to/felipperegazio/how-to-create-a-simple-honeypot-to-protect-your-web-forms-from-spammers--25n8

#8

@sam-g Yes we are collecting the form submission and then checking that field after submission. I agree that the surrounding div is one of the possibilities, albeit I can’t find anything stating that using a surrounding div is a known issue with a honeypot (at least not yet). I will certainly take a look at the article you provided, thanks.