search

raviriley / agency-jekyll-theme

Jekyll version of the newest Agency Bootstrap theme, plus new features: Google Analytics, Markdown support, custom pages, and more!
https://raviriley.github.io/agency-jekyll-theme-starter/
MIT License
341 stars 648 forks source link

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

Open SuperJC710e opened 3 years ago

SuperJC710e commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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

avicndugu commented 5 months ago

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:

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

raviriley commented 5 months ago

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 commented 5 months ago

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 commented 5 months ago

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 commented 5 months ago

@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 commented 5 months ago

@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.