Jump to content

Honeypot for contact form to protect from spam

Go to solution Solved by Ziggy,

Recommended Posts

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!

 

Edited by Aurora
Link to comment
  • Aurora changed the title to Honeypot for contact form to protect from spam
  • Solution

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;
}
Edited by Ziggy

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
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?

Link to comment
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?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
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!

Link to comment
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!

Link to comment

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

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

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

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
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.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

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

image.thumb.png.0f193d394c1cb7ebf5acbb2454e392b1.png

image.thumb.png.35e570b63497220123a104fe17562ab3.png

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

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
6 minutes ago, Ziggy said:

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

image.thumb.png.0f193d394c1cb7ebf5acbb2454e392b1.png

image.thumb.png.35e570b63497220123a104fe17562ab3.png

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.

Bildschirmfoto 2023-10-24 um 13.25.03.png

Bildschirmfoto 2023-10-24 um 13.27.42.png

Link to comment

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.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
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?

Link to comment

Try removing this from the code width:0;

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
Just now, Aurora said:

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

Happy to get that figured out for you!

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.