How to beef up your contact forms with Google reCAPTCHA!

[DXC]

For about a month and a half I tolerated daily spam submissions through my website's contact form (about 6 spam submissions per day). Weebly's option to add CAPTCHA just didn't work, so I decided to do it myself. Here's how you too can stop unwanted bots from filling out your forms!

Step 1: Add a form to your website (I assume that you probably already have a form). In the form options turn on Google Captcha. If Weebly's Captcha option is not turned on, bots will be able to submit the form without having to verify their humanity.

Step 2: Visit https://www.google.com/recaptcha and follow the instructions. For the label, name it something like "Contact Form" and for the type of CAPTCHA choose reCAPTCHA V2.

Step 3: Click register. On the next page you should see a lot of information. The information you want to grab is under the label "Client side integration."

This goes in your header code:

<script src='https://www.google.com/recaptcha/api.js'></script> 

This goes into your contact form using the Embed Code widget:

<div class="g-recaptcha" data-sitekey="YOUR_KEY_GOES_HERE"></div>

Drag and drop the Embed Code widget into your contact form. Paste your reCAPTCHA code into this widget.

Hit save.

Hit publish.

And that's all there is to it! Enjoy a spam-free existence!

[Adam7]

Thanks for sharing, @DXC!

[Claudio]

I went through your tutorial, good information Thank you!

I got it working in my website but any idea why without checking the recaptcha, the emails still go throught? I mean, if I check or not the recaptcha the emails still get to me

[capnbg]

I am experiencing the same thing.  Also, I was not able to drop the embed widget inside my form.  When I released it, it floated to a location along one of the forms edges, outside the form body.  I'm thinking that the behavior is occurring because it is outside the form; it's like a separate element.

[capnbg]

I figured out how to embed the reCAPTCHA box inside the form, but it is still not a required field.  The form is successfully submitted whether the reCAPTCHA box is selected or not.  How do you make this a required field?

[AshleyGarrett88]

Did we ever figure out how to make this a required filed? I was able to fill out my form withtout doing the Captcha 

[GThalassinosNet]

For what it's worth I have changed my perspective on this. Since I am in Greece and we have this GDPR to abide, I have entirely scrapped the contact form since it is more trouble than good. My take is to provide a link in a standard text box with my email address so that when the visitors click on it they are taken to their default mailing application with my email address filled in as the recipient. All this of course is laid out in the field text explaining that out of respect for their rights I no longer use a form to fill. No more captchas, no more personal data in Weebly, they share what they want to share and that's it. Period. End of story.

[Bernadette3]

Thanks for sharing, @GThalassinosNet Contact forms can be useful to gather specific information that you need, but I can see how your approach would be just as, if not more, effective. 

[Bernadette3]

Captcha will not always show, @AshleyGarrett88 It will only trigger if the submission is spammy in nature. 

[wwflecco]

This goes in your header code:
<script src='https://www.google.com/recaptcha/api.js'></script>

Sorry for my bad english, but I don't understand WHERE I should enter it.
Can you insert an example form as done for embed code?
THANK you

[Water1]

please goes to the setting and SEO tab, you can see the header code there.

[Alertazia]

Oh, thank you DXC!

If I found your guide earlier, I wouldn’t have to install anything. Just in case, to all of you, who suffer from spam – there are now contact forms that support Google Captcha. I am using this one - https://www.weebly.com/app-center/contact-form1.

If someone has difficulties with tutorial or other problems - do try it.

[hiri]

nice - but that this form costs ....

[petbus]

AWESOME  thankyou  this  was great info 

[GThalassinos]

I don't know where this solution stands today, but the reCaptcha v2 is not required to send the email from the form. Google's Q&A page states that the site must get a response from Google's server as to whether the validation was successful. This is obviously not happening on the form.

[laugher]

Has anyone got reCaptcha v2 working on weebly because this solution does not work?

[GThalassinos]

Mine obviously is.

Check out my contact page at https://www.net-it.gr/aboutme-en.html

And it looks like the one Google identifies as V2 here

It's been a few months since it started working as expected.

I suppose I have followed the article at https://community.weebly.com/t5/How-Do-I-In-the-Community/How-to-beef-up-your-contact-forms-with-Goo...

since I have a Custom HTML element within my Contact Form, as described in the article, with

<div class="g-recaptcha" data-sitekey="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"></div>)

and the following script in the Settings > SEO > Header Code section

<script src='https://www.google.com/recaptcha/api.js'></script>

[laugher]

Hi All. I followed MonicaP and your suggestions but while the recaptcha v2 checkbox did show up in the contact form, I was still able to click "Submit" without having to check the recaptcha checkbox to say I am not a bot.

So I must be missing something...

[laugher]

@GThalassinos- I went to your website https://www.net-it.gr/aboutme-en.html and entered firstname, lastname, email and comment as test and then hit submit without checking your recaptcha checkbox. It successfully submitted the form.

To me, this isn't working because there is a loophole to bypass the recaptcha.

[GThalassinos]

Hi @laugher , I had already posted a reply earlier but it does not appear in the thread. I had checked my reCAPTCHA based on your comment and found mine is not working as well. I guess something has changed and we have to do some digging.

I also looked at reCAPTCHA v3 that bigG is promoting, but that requires infrastructure that is irrelevant to what we are trying to achieve as Weebly customers. If we were coders and full-fledged website developers it would be relevant.

Anyway, it would be nice if someone more into these things, like a moderator, could give us a better opinion and perhaps spare us the time we will spend experimenting.

[MonicaP]

I had the same issue...couldnt figure out how to get the html code into the contact form.... so for anyone else having some confusion...

open up the contact form for editing, and THEN drag the html code icon onto the contact form.

If you are just on the page WITHOUT the contact form selected, the block for HTML code will just drop on the page.  Click on the contact forn FIRST, then click the HTML code icon and drag onto the form.

Also the poster with the solution is not adding the full html that google integration provides on the captcha page, but just one snipet of the code.  I got side tracked with the full google imbed code.... that didnt work as nice.

I did just what he indicated and it worked great. That is just add the <div> line with the key.

Thank you!