Please incorporate Google reCAPTCHA with the formspree form and ajax/js validation.

[SuperJC710e]

Is your feature request related to a problem? Please describe.

Would like to incorporate Google reCAPTCHA with the formspree form

Describe the solution you'd like

Would like to continue to use the ajax for validation and submission along with reCAPTCHA

Describe alternatives you've considered

It works well without the form validation and just the formspree option, but it is preferred to use the ajax as you've done it.

Additional context

I would personally would like to use it with the 'invisible" option. https://developers.google.com/recaptcha/docs/invisible

[raviriley]

This is definitely doable.
https://developers.google.com/recaptcha/docs/invisible#auto_render

Would you like to submit a PR? If not I can add this to the todo list.

[SuperJC710e]

Thanks for the reply. I totally forgot that I meant to first thank you for the awesome template and for sharing it! I've been using it for awhile.

My skills in the area are definitely lacking, especially when it comes to javascript (love to learn more, but current life responsibilities don't leave me enough time.) What that means, is that I do not have a PR to submit, because I cannot completely wrap my head around it (so far). I was taking some stabs at it in a few spare moments, piecing together some bits and pieces I could find around the web, but I didn't get it to a working state yet. And I'm sure it would be lacking! :)

[raviriley]

Thank you! Got it haha the best way to learn is by doing! I'll add this to the to-do list.

[avicndugu]

Hi @raviriley.

After some quick research, I've figured out that Google reCAPTCHA requires a backend to validate the response without exposing the secret key.

This can be implemented for:

• websites with a backend or
• websites with access to serverless functions (Netlify, Vercel, Cloudflare Pages e.t.c.)

Can I proceed with adding this feature knowing that it will only be available to the websites mentioned above?

[raviriley]

Hey @avicndugu, what's your plan to proceed? I've kept this issue open in case someone finds a way to do something similar but works on a static site (without Google reCAPTCHA) as I assume most people deploying this sort of Jekyll site don't have a backend to connect. Would love to hear your thoughts

[avicndugu]

Thanks for the quick reply.

I now have a better understanding of the constraints. I'll do some research on possible solutions that don't require a backend or functions and get back to you.

[avicndugu]

My Thought

For a static website, the idea would be to eliminate the simplest bots which just fill information and then move on. That way anyone trying to spam the site has to waste time programming a bot to overcome the challenge. I found 3 main solutions:

1. Honeypot field to your form
   Add a hidden form field. If the hidden form field is filled, the block from submitting.

2. A simple math question and answer
   example: 5 + 4 = ____

3. A simple letter question and answer
   What is the first letter in tomato: ________

4. Multistep form: I don't recommend this one for this theme since it would break the current design.

At first, option 1 looked promising. However, autocomplete might fill the hidden form which would result in legitimate users who are unable to submit the form.

I'm more inclined to go with option 2 or 3 which are visible to the human users. Option 2 and 3 would utilize a JavaScript script so no backend required.

Quick links

1. https://www.getsafeonline.org/business/blog-item/how-to-reduce-spam-in-online-contact-forms
2. https://www.mullie.eu/how-to-prevent-form-spam/

[raviriley]

@avicndugu I think honeypot is likely the way to go here, as we can specify no autocomplete in the input tag attributes. This would also require JavaScript to validate the form. A hidden input has the added benefit of being invisible to the user, keeping the current design the same.

[avicndugu]

@raviriley You have presented a strong case for the honeypot method. I'll go ahead and implement this method. If there are any issues I'll let you know.