Streaming live at 10am (PST)

Honeypot Form Filtering and reCaptcha to Prevent Spam - Basin Forms

(Hopefully) this isn’t off-topic, but does anyone know if it’s possible to create a honeypot in a form so when submitted, the “hidden” honeypot field doesn’t display in the email submission?

For example, if you name a honeypot field “test_email”, it will automatically show up in the Webflow form submission email regardless if it’s been filled out or not. My primary reason for asking is to create a rule in an email software provider that can automatically filter spam emails to a spam folder. Currently I don’t see a way to do this without first removing the honeypot field name.

Thanks!

Hi @Jhart4595 , That is a good question and not off-topic at all.

Normally a honeypot field (hidden) that is populated, is evidence of a bot filling out a form and on submit, the form would be rejected by the server as spam.

With Webflow, there is currently no support for honeypot spam tests. Google’s recaptcha is supported as a more effective alternative since bots have gotten smarter about getting around simple tests.

If you did have a hidden field you used as a test, the value would need to be captured with the submit; either null or a value. If you had notifications on, the notification recipient would already have received the mail message obviously.

You don’t indicate what mail client you use or server so I can’t elaborate on how to test for the string and I don’t know the string that would exist in the message body. If your mail client supports regex, you could write a regular expression that would trip a flag or act on the message.

I could see how it would be possible to listen for an event on that field before the submit fires but I don’t think it would be very effective. I have never bothered trying on the client side since there are so many ways around it for spammers. It is much more effective to process spam on the backend.

If you are getting lots of form spam, you may want to consider a third-party form server. I switched clients over to usebasin.com when they were getting hammered and now only a few manual SEO fills ever happen. Basin uses Akismet, Google reCAPTCHA, and their own code to keep the forms spam free. The “_gotcha” honeypot is also supported. I would add that you can selectively use reCaptcha on a form by form basis versus Webflow’s “On For All Forms” setting. I am pretty sure formspree does offer similar features as well. Both are trivial to integrate with Webflow as are others listed in the Third-Party Integrations page in the university.

1 Like

Hello WebDev!

I currently have a site, hosted outside of Webflow, using the Basin form submission. On the free plan and everything works great, integrated easily.

I am starting to get SPAM and would like to include there Honeypot approach instead of using re-CAPTCHA to see if I can reduce things a bit. There code snippet for the Honeypot can be found here…https://usebasin.com/docs/features/spam-filtering

I’m more on the design then the dev side but learning all the time. My questions are…

  • Where would I add this snippet of code, before exporting the site?
  • In WebFlow do I simply add a field called “hidden” then name it “gotcha”?
  • How do I make it invisible, so it dosen’t change the layout of the form?

Sorry for all the questions. I’ll keep working on this, but I saw your post and thought I’d reach out.

Thanks in advance!

You just add an Embed element inside the form element, with the following code:

<input type="hidden" name="_gotcha"></input>

The field type hidden will make the field hidden automatically.

If the field gets a value from a spam script; the form submission will be rejected.

Wow, thanks for the quick response.

I don’t have to add the “full” snippet of form code from the basin example (Bottom of this page)

Just what you’ve shown?

Thanks gain!

Just what I have shown. It is just an input field.

However, I would recommend you use both ReCAPTCHA and a honeypot. Just remember to include ReCAPTCHA info in your sites privacy policy if you use it.

Follow the instructions for ReCAPTCHA exactly as defined on the docs page, if you are going to use it (the script goes in the before HEAD close, and you use Basin’s key, not your own).

1 Like

Thanks again. I’ll start with the Honeypot and read up on the ReCATCHA.

Again, very much appreciated!

1 Like

Hi WebDev

Hope I’m not bugging you to much.

First added a reCAPTCHA element to my form page. Did “not” include a site key or secret key in the project settings.

Next I followed the 4 steps on the Basin Spamming page. Added all 3 snippets (wanted the reCAPTCHA to be invisible) to the head.

Screen%201

Screen%202

Last, exported the site, and ran it local for a quick test. Form still submits “AND” the reCAPTCHA element is invisible.

Is that it?

Any way to test, or do you just wait and see?

Thanks again for tour time!..very interesting and educational for me.

@path = I see issues with your implementation. In order for me to confirm them, please share a read-only link to your project and a link to the published webflow.io URL to the page this form is implemented on. I will then take a look (or someone else can) to give you feedback.

Ok, understand, and thanks. Here’s the 2 links…

Preview
https://preview.webflow.com/preview/ramaroption1a?utm_source=ramaroption1a&preview=3d4d0a749d94f05696561cdcde4be0c3&mode=preview

I recorded a video to help you configure reCaptcha with Basin as your form processor.

Since I can’t save the changes (site is read only) you need to follow each step. Then proceed to testing.

CloudApp

2 Likes

Man, really thoughtful and straight forward…thanks for taking the time.

The naming of the ID and the explaining of using Basins code snippet for the reCAPTCHA vs WebFlows was the part that wasn’t clear to me.

So, everything is in, again really straightforward, but when testing/publishing (see the webflow.io site) the reCAPTCHA comes up as a small white box/button? Not sure why? In preview it looks fine?

One last question I would ask you about is the “Invisible reCAPTCHA” option. Basin provides a snippet for this, which I believe goes within the EMBED, where we added the button code, is that correct?

Hope you enjoy the weekend! BTW I think the way and the information you provided would be invaluable to many.

Thanks again!

Looks like you need to fix the embed within the form; you have a syntax error.

<button class="g-recaptcha" data-="" sitekey="6Lew3SMUAAAAAJ82QoS7gqOTkRI_dhYrFy1f7Sqy" data-callback="onSubmit" data-badge="inline">Submit</button>

The reCaptcha code should be this:

<button class="g-recaptcha" data-sitekey="6Lew3SMUAAAAAJ82QoS7gqOTkRI_dhYrFy1f7Sqy" data-callback="onSubmit" data-badge="inline">Submit</button>

Just to add to @path and @webdev who both helped and led to my inspiration to creating this full tutorial of how to setup invisible reCAPTCHA with Webflow, see my last post here: