Honeypot for contact form to protect from spam

Hi!

I'm looking for ways to protect my contact form and website from spam without using Google reCAPTCHA. I'm unable to use reCAPTCHA for data privacy reasons.

Is it possible to insert a honeypot field into the contact form?

Additionally, is it possible to stop allowing links in form submissions? to also help preventing spam?

Many thanks!

2 hours ago, Ziggy said:

I don't know a way of preventing links in form submissions, but add a honeypot field shouldn't be problematic, though I don't have a good way to test whether a bot would actually fill the field or not.

If you set the first field as your honeypot (make sure it's not set to required or real users won't be able to submit the form), and use this Custom CSS to hide it from regular users:

.field-list .field:nth-child(1) {
  z-index:-1;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  height: 0;
  width: 0;
}

Thanks, Ziggy. I understand that this code hides the field so that only bots would fill it out, but how would that prevent the bot from being able to submit the form or protect me from spam?

I found two solutions when researching this issue online. One was the honeypot, and the other a field with a simple math or linguistic question, but I'm worried that that might exclude people who have a hard time recognizing math symbols or letters, so I thought the honeypot method would be better. But now I'm having a hard time to understand how that would work. I found this article online (https://www.getvero.com/resources/add-a-honeypot-to-website-forms-to-reduce-spam/#2b) but I can't make sense of it.

Are you familiar with the honeypot method and able to advise further?

8 minutes ago, Aurora said:

Thanks, Ziggy. I understand that this code hides the field so that only bots would fill it out, but how would that prevent the bot from being able to submit the form or protect me from spam?

You asked if it was possible so I gave you the method for achieving it. It doesn't stop a bot submitting a form but will flag the submission, that's what a honeypot field does. reCAPTCHA does prevent submissions.

If you want to use a honeypot field to filter the spam out then depending on the field name, you may be able to filter these out automatically in your email client.

How much bot-generated spam are you getting?

4 minutes ago, Ziggy said:

You asked if it was possible so I gave you the method for achieving it. It doesn't stop a bot submitting a form but will flag the submission, that's what a honeypot field does. reCAPTCHA does prevent submissions.

If you want to use a honeypot field to filter the spam out then depending on the field name, you may be able to filter these out automatically in your email client.

How much bot-generated spam are you getting?

Once I put in the code you gave me, I realized that I didn't fully understand how this method would work in practice. So, your suggestion to use the honeypot field to filter out spam manually by looking at the fields that were being filled out, is very helpful.

My site isn't live yet, so this is proactively. I'm just trying to understand how I can do my best to protect myself from spam without Google's help.

Thanks again!

On 10/16/2023 at 9:51 AM, Ziggy said:

I don't know a way of preventing links in form submissions, but add a honeypot field shouldn't be problematic, though I don't have a good way to test whether a bot would actually fill the field or not.

If you set the first field as your honeypot (make sure it's not set to required or real users won't be able to submit the form), and use this Custom CSS to hide it from regular users:

.field-list .field:nth-child(1) {
  z-index:-1;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  height: 0;
  width: 0;
}

@Ziggy while the code hides the first field in the contact form, it also creates white padding below the footer. Can this be fixed?

Many thanks!

It shouldn't leave any padding if you have added the code and then adjusted the form block size. Can you share this page?

2 hours ago, Ziggy said:

It shouldn't leave any padding if you have added the code and then adjusted the form block size. Can you share this page?

@Ziggy thank you for taking a look!

https://www.kristinkuehn.com

pw: 2eRFn7gQ

I can't see any padding, did you fix it as I suggested?

2 minutes ago, Ziggy said:

I can't see any padding, did you fix it as I suggested?

I still see white padding below the footer. I'm sorry, what fix did you suggest?

When I remove the code, the padding disappears.

2 hours ago, Ziggy said:

added the code and then adjusted the form block size

Add the CSS code, then edit the page and adjust the form block height.

5 minutes ago, Ziggy said:

Add the CSS code, then edit the page and adjust the form block height.

I've added the code, but I'm not sure what I can edit in terms of the block height. It looks fine. Can you please explain what you mean?

Have you tried resizing the form block using the handles? If it looks fine...then that's fine, no?

Can you see how I have changed the height of the form block here? It had padding before, but not now?

6 minutes ago, Ziggy said:

Have you tried resizing the form block using the handles? If it looks fine...then that's fine, no?

Can you see how I have changed the height of the form block here? It had padding before, but not now?

Okay, I changed the height of the form block, but the padding remains...

When I said it looks fine, I meant the form block. (It didn't look like it was out of the ordinary.)

Any other idea why this could be? I really want to try out the hidden "honeypot" form field, but I can't leave it like that.

@Ziggy When I remove the code, the padding disappears... when I put it back, the padding returns...

I don't see any padding. The code doesn't add padding, it removes the field. Once the code is added and the field hidden, you can then adjust the form block height to remove any addition padding. If you remove the code the field will return and so will the padding if you suddenly remove and replace the code.

3 minutes ago, Ziggy said:

I don't see any padding. The code doesn't add padding, it removes the field. Once the code is added and the field hidden, you can then adjust the form block height to remove any addition padding. If you remove the code the field will return and so will the padding if you suddenly remove and replace the code.

Can you see the padding on my second screenshot above? The white space below the footer?

Try removing this from the code width:0;

1 minute ago, Ziggy said:

Try removing this from the code width:0;

@Ziggy that fixed it! Thanks so much for your help!

Just now, Aurora said:

@Ziggy that fixed it! Thanks so much for your help!

Happy to get that figured out for you!