Protect Your EverWeb Contact Forms using Google reCAPTCHA!

Unwanted or unsolicited emails, commonly referred to as SPAM, is the bane of our online existence. It’s time consuming clearing out SPAM on a daily basis, let alone costly if you get caught in a phishing scam. Every year, bots get more sophisticated, find even clever ways to target email addresses to dump more SPAM into your email account.

Fortunately, there are a variety of counter measures available to combat the rise of spam in our lives. One of the most popular is Google’s reCAPTCHA. This tool uses advanced techniques to distinguish human from bots. reCAPTCHA also comes in a number of different versions. Perhaps the most well known version asks the potential user to identify particular pictures that contain a specific object e.g. sets of traffic lights. If all images containing the specified object are correctly identified, the user is allowed to proceed. This makes reCAPTCHA ideal for use to verify secure logins or for contact form submissions.

EverWeb version 3 has added reCAPTCHA to its contact form advanced widget to help you combat potential spam and it shows your site visitors that you’re serious about security. Setting up reCAPTCHA itself only takes a few steps and adding it into your contact form is very easy to do.

In the following example, it doesn’t matter if you set up the contact form first or if you set up your Google reCAPTCHA first, it’s up to you!

Setting Up Google reCAPTCHA for your Website
To set up reCAPTCHA, either go to Google’s reCAPTCHA website or if you’re already in the Contact Form Advanced widget in EverWeb, click on the ‘Sign Up for reCaptcha v2’ button in the Widget Settings.

1. Click on the ‘Admin Console’ button on reCAPTCHA’s home page.
2. Sign in to your Google account if you’re not already signed in. If you don’t have a Google account, you’ll need to create one in order to be able to use reCAPTCHA and other Google tools. You can create an account directly from this ‘Create Account link’.
3. Once you have logged in to your Google account, you will be taken to an overview screen of your sites that are currently using reCAPTCHA.
4. To register your website click on the ‘+’ button. You can register as many websites as you want using this method.
5. Use the ‘Label’ field to identify which website this reCAPTCHA setup is for.
6. As mentioned earlier, there are different versions of reCAPTCHA available. In the ‘reCAPTCHA’ type field, select the ‘reCAPTCHA v2’ radio button.
7. There are three three options available. in this example, select the ‘I’m not a robot’ option.
8. The next section, Domains, is where you enter in the actual URL of your website. You don’t need to use the http or https nomenclature, just the simple URL form such as www.thisisawebsite.com.
9. If you want to have others to be able to access and administer your website’s reCAPTCHA, you can add a new ‘Owner’. If not, you can skip this step.
10. To finish, ‘Accept the Terms of Service’ then click on the ‘Submit’ button.
11. A ‘Site Key’ and a ‘Secret Key’ will now be generated! These will be used in EverWeb.

Adding Google reCAPTCHA to EverWeb’s Contact Form Advanced Widget
Now that you’ve generated the Site Key and Secret key…

1. Keep your browser window open and launch EverWeb.
2. Go to the page of your site that has your contact form. If you don’t have a contact form, drag and drop the Contact Form Advanced widget on to the page and format the form as you want using the Widget Settings.
3. Note that to use reCAPTCHA, you must use the Contact Form Advanced widget. The older Contact Form widget does not support this feature.
4. To enable SPAM protection in your contact form, check the ‘Use reCAPTCHA SPAM Protection’ box in the Widget Settings.
5. Now you will be able to copy and paste the Site Key and Secret Key from reCAPTCHA directly in to the corresponding fields in EverWeb. Switch back to your browser window. Use the copy Note that when you add reCAPTCHA to your contact form that it will be placed after your Form Controls and before your ‘Submit’ button. You cannot change the alignment of reCAPTCHA in the form or the fonts that it uses.
6. Copy and paste each key, using the ‘Copy Site Key’ and the ‘Copy Secret Key’ buttons to copy each key.
7. Paste the copied key code in to your contact form’s ‘reCAPTCHA Site Key’ and ‘reCAPTCHA Secret Key’ fields.
8. If you have pasted the codes correctly, the widget will update to display the ‘I’m a Robot’ reCAPTCHA dialog box in the contact form.
9. Preview the page to test. You may find that you need to publish your website to test if Preview does not work.

What Happens if the reCAPTCHA Does Not Work?
Typically you will see an error message in the contact form if there’s a problem with reCAPTCHA. When this happens, it’s best to wait a while as it may take time for reCAPTCHA to update. Try Previewing or Publishing your website again after a few minutes to see if it updates properly.

The other main issue is that your contact form has not been set up correctly. Uncheck the ‘Use reCaptcha SPAM Protection’ field, then re-Publish. Fill out then submit the contact form. Yu should receive an email of the form that you have submitted. If this does not happen, the form itself may need troubleshooting e.g. there may be an issue with your SMTP Settings.

the third main problem is that the Site key and/or Secret Keys have not been pasted in correctly e.g. either the whole key has not been copied and pasted, or the site key has been pasted in to the Secret Key field (or vice versa) by mistake.

If you find that the above solutions don’t work, you may have to regenerate the reCAPTCHA keys and try again.

reCAPTCHA is a great boon to securing your site’s contact forms against SPAM and is recommended for all website developers to use!

If you have a question or comment about this post, please do let us know! We will do our best to answer asap!