On the other hand, organizations have the need for integrating in IT departments new technologies often using cloud services and other ways of direct access to the web. This pressure for IT departments to give…
There are no secrets to success. It is the result of preparation, hard work, and learning from failure.
The aim of the webeaters website team is to reach its target audience, and engaging with visitors and allowing them to open a line of communication with the site goes a long way in accomplishing this goal. As such, the website owners need to provide the visitant with a means of contacting them. You could just list your email address on your website, but visitants may start writing an entire email as too much work and decide not to contact you altogether – which we don’t want. Your email address being out there like that would also open your inbox up to unsolicited spam, quickly and (very) annoyingly teaching you what the internet slang “RIP inbox” actually means.
This is why the ‘contact form is important in each website. Contact form on your website allows a visitor to simply send the information (such as their name, their email address, mobile number and their requirement message for you) into a form, which is then converted into an email using a pre-programmed template and sent to your email address. From there, you will come to know the visitor requirement better and reply to them on the email address they provided. A contact form should be and is much more user-friendly than the alternative of listing your email address which now remains safe from would-be spammers on your website.
However, contact have their own value in the website- bots can be programmed to stop from the spam emails. To stop the threat of bots exploiting a contact form on your website, you will need to add CAPTCHA to the contact form. To make things easier to follow, we will show you down the process of adding a contact form with an integrated CAPTCHA to your WordPress website .
How to Add a CAPTCHA to Your Contact Forms
Ever thought about why most of the contact forms you’ve seen website have included a CAPTCHA of some sort? Well, CAPTCHAs (attempt to) prevent bots – a contact form’s biggest threat – It is only allowing actual human users to submit them. If you don’t want bots to create a mess on the contact form on your website, you need to add CAPTCHA to the contact form. Spambots and other bots of all kinds have been continually changing, but so have CAPTCHAs and CAPTCHA services. We recommend reCAPTCHA – a truly cutting-edge CAPTCHA service developed by none other than Google – for all your CAPTCHA needs. While there are several different CAPTCHA plugins available for WordPress installations, And to top it all off, re CAPTCHA is compatible with all three of the form-building plugins we’re using.
Step 1: Register Your Website with Google’s reCAPTCHA Service
Before you can effectively add CAPTCHAs to your contact forms, you need to register your website with Google’s re-CAPTCHA service and procure API keys for the service. To do so, you need to:
- Make your way to the reCAPTCHA Admin Panel.
- If prompted to sign in to your Google account, do so. If you are already signed in, move on to the next step.
- Type in a name for your website in the Label field, and type in your website’s domain (yourdomain.com) under the Domains section.
- Next, you have a choice between two different kinds of CAPTCHAs for your contact forms. You can choose the user-friendly reCAPTCHA v2, which displays a simple “I’m not a robot” checkbox for users to check before they submit a contact form. If reCAPTCHA suspects the user of being a bot, the user is given the challenge to prove they aren’t one before they can proceed. To go with reCAPTCHA v2, simply select the reCAPTCHA v2 and “I’m not a robot” tick box options under the reCAPTCHA type section. Alternatively, you can opt for the more advanced but less transparent reCAPTCHA v3 – an unobtrusive CAPTCHA that works in the background and assigns each user a score (between 0.0 and 1.0) based on their interactions with the website and various other factors to predict the likelihood of the user in question being a bot. Whether reCAPTCHA v3 allows a user to submit a contact form depends on what their score is. If you would like to use reCAPTCHA v3, select re-CAPTCHA v3 under the re-CAPTCHA type section.
- Check the Accept the re-CAPTCHA Terms of Service option.
- Click on Submit.
- Upon successful registration, you’ll be given two API keys – a Site Key and a Secret Key. Copy both of them to a safe location on your computer.
Step 2: Add a CAPTCHA to Your Contact Forms
On Contact Form 7
- In the left pane of your website’s WordPress Admin Panel, click on Contact > Integration.
- Locate the reCAPTCHA service, and click on Setup Integration under it.
- Paste the previously copied Site Key and Secret Key into the respective fields.
- Click on Save Changes. If you registered your website for reCAPTCHA v3, all of your contact forms will now be protected by reCAPTCHA v3 effective immediately – there’s nothing more for you to do.
- If you went with reCAPTCHA v2, however, you’re going to have to paste the following text into each of the contact forms you want to protect with a CAPTCHA:
Where, within the text of the contact form, you paste the reCAPTCHA shortcode will determine where the reCAPTCHA dialog is placed on the form.
- Click on Save.
On Elementor Pro
- In the left pane of the WordPress Admin Panel, click on Elementor > Settings.
- Navigate to the Integrations tab.
- Under the reCAPTCHA section, paste the API keys you copied into the site key and Secret key fields respectively.
- Scroll all the way down and click on Save Changes.
- Navigate to the page or post that contains the contact form you want to integrate reCAPTCHA into and click on Edit with Elementor.
- Select the contact form to edit it in the left pane.
- In the Content tab under the Form Fields section, click on Add Item.
- Open the dropdown menu next to the Type option. If you opted for reCAPTCHA v2, select the reCAPTCHA option, and you will see the “I’m not a robot” tick box manifest on your contact form. If you chose reCAPTCHA v3, select the reCAPTCHA v3 option in the dropdown menu, and choose whether you want the reCAPTCHA badge to be displayed on the right (bottom of the page), left (bottom of the page), or inline.
- Click on Save.
- In the left pane of the WordPress Admin Panel, click on WPForms > Settings.
- Navigate to the reCAPTCHA tab.
- Next to the Type option, select Checkbox reCAPTCHA v2 or reCAPTCHA v3, depending on whether you registered your website for reCAPTCHA v2 with the “I’m not a robot” tick box or reCAPTCHA v3 respectively.
- Paste the Site Key and Secret Key you copied into their respective fields. If you have chosen to use reCAPTCHA v3, you may also want to set a custom Score Threshold below which form submissions will be declined.
- Click on Save Settings.
- In the left pane of the WordPress Admin Panel, click on WPForms > All Forms.
- Locate the contact form you want to add a CAPTCHA to and click on it.
- Wait for the form-building interface to be pulled up, and under the Standard Fields section in the Add Fields tab, locate and click on reCAPTCHA.
- You should now see the “I’m not a robot” tick box or a reCAPTCHA badge (depending on the version of reCAPTCHA you’re using) on the contact form, confirming that a CAPTCHA has been embedded into the form.
- Click on Save. This change will be immediately applied to every instance of the contact form on your website.
Test the Captcha on your Contact Form
Create and add a contact form to your website? Check.
Add CAPTCHA to contact form? Check.
Go ahead and test out both your contact form and the reCAPTCHA service by navigating to your website’s Contact page, filling out the form, and submitting it to see if you successfully get the message on the email address(es) you specified.
Now try yourself and update us or ask for any help