How to add reCaptcha 2 to Contact Form 7 (updated 2019)

CAPTCHA is an acronym for “completely automated public Turing test to tell computers and humans apart.”. If you post a form on your website, you will most probably start getting spam posts through your form. This is because there are “bots” (these are just scripts that just scrape through websites) that are coded to keep traversing the internet looking for forms to submit. Since you always read form submissions from your form, the spammers get to send you marketing messages easily.

xkcd on captcha

xkcd on captcha

CAPTCHA makes it difficult for those automated scripts to submit the form. However, CAPTCHA is not the only solution. More about CAPTCHA alternatives later.

reCaptcha solution

reCaptcha is a great “bot” detection solution from Google. Google watches the pattern of user interaction to decide whether it is a “bot” or a real user. It is near impossible for a “bot” to simulate those patterns. So reCaptcha succeeds in blocking spam most of the time.

Versions of reCaptcha

reCaptcha version 1

reCaptcha version 1 used to show a couple of words in an image and the user had to enter the words in a box to prove they are not “bots”.

reCaptcha version 2

The reCaptcha version 2 is simple and user-friendly. The user is to check a box saying “I am not a robot”. However, sometimes, this version of the captcha also throws some picture puzzles too. It generally depends on how the algorithms of Google feels like the user’s session is. Most of the time, genuine users get to complete the Captcha just by a checkbox.

reCaptcha version 3

Version 3 of reCaptcha is a JavaScript API that returns a score that indicates whether Google thinks this is a “bot” or not.
There is no user interaction required.

Contact Form 7 reCaptcha support

Contact Form 7 version 5.1 and later uses reCaptcha 3. It does not support reCaptcha version 2 anymore. However, you can use reCaptcha 2 with even the latest Contact Form 7 using another plugin. A section below explains how to use reCaptcha 2 with Contact Form 7 latest versions. Before that, let me show you how to register for reCpatcha and how to insert reCaptcha in your websites.

Registering at reCaptcha site

Go to the reCaptcha Site. Then enter your details and complete the form.

recaptcha registration

Once you complete the form, it will give you a site key and a secret key. Copy it and safekeep those keys.

Using reCaptcha 2 in newer versions of Contact form 7

In order to use version 2 of reCaptcha in Contact form 7, install yet another WordPress plugin: Contact form 7 -reCaptcha 2:

Configuring Contact Form 7 for reCaptcha

contact-form-7-recaptcha-setup

  • Go to the menu item Contact → Integrations.
  • Under reCaptcha, press “setup integration” and then enter the keys you had got from reCaptcha website.

reCaptcha is configured now. You can use this shortcode: [recaptcha]
in your Contact form 7 setup.
contact-form-7-form-setup

Copy the contact form 7 shortcode to your page and then try a preview. It should show the reCaptcha
contact-form-7-in-wp-page

See the preview:
reCaptcha-in-wordpress

Google reCaptcha 2 JavaScript Validation (client side)

reCaptcha is a great “bot” detection solution from Google. Google watches the pattern of user interaction to decide whether it is a “bot” or a real user. It is near impossible for a “bot” to simulate those patterns. So reCaptcha succeeds in blocking spam most of the time.

Versions of reCaptcha

reCaptcha version 1

reCaptcha version 1 used to show a couple of words in an image and the user had to enter the words in a box to prove they are not “bots”.

reCaptcha version 2

The reCaptcha version 2 is simple and user-friendly. The user is to check a box saying “I am not a robot”. However, sometimes, this version of the captcha also throws some picture puzzles too. It generally depends on how the algorithms of Google feels like the user’s session is. Most of the time, genuine users get to complete the Captcha just by a checkbox.

reCaptcha version 3

Version 3 of reCaptcha is a JavaScript API that returns a score that indicates whether Google thinks this is a “bot” or not.
There is no user interaction required.

register with reCaptcha

Go to the reCaptcha site and register for reCaptcha. Remember to enter your domains correct.
recaptcha registration

On completing the form, you will get a site key and a secret key.
We will use the site key while displaying the recaptcha (see the code below)

How to disable domain validation temporarily

reCaptcha will insist the page should be from the designated domains only and will throw an error when you load the page from staging server or localhost.
You can disable the domain validation temporarily in the settings page of the captcha (press the settings icon and update the setting)
recaptcha settings

reCaptcha HTML code

Here is a simple HTML form page with a form that contains the reCaptcha:

We included the reCaptcha api.js from the link https://www.google.com/recaptcha/api.js

Then added class=g-recaptcha and data-sitekey to a div attribute.

This will display a captcha when displayed.

reCaptcha Javascript Validation

The HTML code above only displays the Captcha. In order to verify that the user is not a “bot” we have to first verify in the client side and then on the server side.

Here is the client side validation:

The code is triggered when the form is submitted. (onsubmit event handler). It checks with recaptcha whether the user has completed the validation.

You must verify the captcha on the server-side as well!

The client-side verification is not enough. It gives immediate response. However, suppose someone is running your form with Javascript disabled. None of these verifications will run and you will keep getting spam submissions.

If you didn’t verify on the server-side that the reCaptcha test was actually run and succeeded, there is no use of the verification itself because the “bots” can still get through your form.

Depending on your server-side scripting language, you have to add a reCaptcha verification step.

These are the steps you have to do on the server:
Get the value of this field: g-recaptcha-response
Post a request to this endpoint:
https://www.google.com/recaptcha/api/siteverify

with these parameters:

  • secret : your secret key that you got while registering with reCaptcha
  • response: the value of the field g-recaptcha-response

If the response is “success”, then the user is verified.

reCaptcha verification PHP code

How to create a Button with Rounded Corners using CSS

In CSS3 you can give elements rounded corners with the border-radius property. Let’s look at an example of this.

Suppose you have the following markup.

<div class="red_div"></div>

To make the div visible, we’ll set its width and height and give it a background color of red.

.red_div {
  background-color: red;
  width: 200px;
  height: 100px;
}

The following is the resulting output of the above.

To make the div’s borders rounded, you could add the following styling:

border-radius: 15px;

The above sets a 15 pixel radius on the top-left, top-right, bottom-left and bottom-right corners of the element. The higher the value of the radius, the more rounded the edge becomes.

Below you can see the result of the above markup.

The border-radius property can be written in several ways.

Specifying one value for the property will set all four edges of the element to a radius of that value.

border-radius: 15px 15px;

With two values, the first will be applied to the top-left and bottom-right corner while the second is applied to the top-right and bottom-left corners

border-radius: 15px 15px 15px;

With three values, the first will be used for the top-left corner, the second value for the top-right and bottom-left corners, and the third value will be applied to the bottom-right corner.

border-radius: 15px 15px 15px 15px;

The above explicitly sets a value for each edge. The above is a shorthand for the below CSS, which also eplicitly gives a value for each edge.

border-top-left-radius: 15px;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;

In the example we’ve looked at, we set the same value for all edges. You can of course set different values for each edge if you so wish.

border-radius: 5px 25px;

Adding Rounded Corners to Buttons

border-radius can be used on other elements as well. Below, we see it used to add rounded corners to a button.

<button>Button</button>
button {
  width: 200px;
  height: 100px;
  border-radius: 20px;
}

The button will look like this:

Here are some more examples of complete buttons

22934

Do you want more button styles? Comment your specific requirements below.

How to create a select box with multiple selection

Having drop downs on our web page enhances the overall quality and design on the screen.

A drop-down thus works as an alternative and in specific cases, a better option, as compared to radio buttons and checkboxes.
Wait, what? Did we say an alternative to both radio buttons and checkboxes? But, it should have been just the radio button, shouldn’t it?

A radio button does not allow more than one selections and a checkbox, on the other hand, allows one or more than one selections. A user can select only one option from a drop-down list and therefore it resembles just the radio button in its functionality and not the checkboxes, right? Well, this is where the concept of multiple selections in a select box comes into play.

How can I allow users to select multiple options from a select box?

From a web designer’s perspective, allowing the user to choose multiple options from a select box is fairly simple and straightforward. We just need to add the “multiple” attribute to the <select> element.
Now, in order to select multiple options, you have to add a size attribute also to the select element. This will make the select box look like a box rather than just the drop down.

The user has to hold down the Ctrl key (in Windows) and Command key (on Mac) to select the choices.

Note these points

  • The “multiple” attribute is a Boolean attribute which when present, signifies that multiple options can be chosen.
  • From a web designer’s perspective, the HTML code for single selections and multiple selections from a drop-down differs a little, however; from the end user perspective, this difference is not visible on the webpage. The select box would not change its layout or styling in either case. Therefore, the user must be told how to select multiple options from the box.

  • Given the point mentioned above, it is a better choice to pick checkboxes over multiple selections if the number of choices is less.
  • The way to select multiple options from a drop-down differs from one operating system to another. While control button (Ctrl) is used for the selections in Windows, the command button does the trick in Mac systems.

Enhancing the Dropdown

As you can see, the native HTML select box is quite limited especially for choosing multiple options.
This is where JavaScript and the highly effective libraries come into the fray. The select2 jQuery component gives the designer the power to customize the overall layout of the select box along with incorporating high utility options such as searching, dynamic loading, tagging, among others.

Does select2 support multiple selections?

Select2 supports multiple selections in drop-down list. To enable multiple selections, just include ‘multiple’ as an attribute.

The advantage here is that the user does not have to press Ctrl or Command key to select multiple options.

Select2 also adds other enhancements as well. For Example, in order to limit the number of choices the user can make, just add maximumSelectionLength in the Select2 options like this:

Read more about Select2 in the documentation

How to use the HTML5 range input type

Before the introduction of HTML5, thinking about having a range slider on a webpage was equivalent of a crime. You needed a bunch of custom javascript code and still it didn’t work well on all devices.

However, HTML5 brought with it numerous new attributes and features that added the flavor that HTML missed for ages.
Not many would have expected something like the range element to make its entrance with HTML5, but once it did, hardly any have raised any concerns with its working. Creating anything close to the sliding range element takes tons of lines of coding in JavaScript, but the same can be achieved with just a single element in HTML5. How often do you hear that something could be done better in HTML than JavaScript?

As the name suggests, the most common use of the slider input is when we know the lowest and the highest inputs that can be given as a response. For instance, if we are developing a website that only permits users in the age group 18-40. We can have the birth year as a sliding input range with the lowest value being 1986 and the highest being 1998. The slider input is a highly intuitive user interface that projects itself as an alternative to a plain textbox input or a drop-down with fixed values.

The range input is best when you have calculations associated with it. The flexibility of sliding the controls and seeing the result ‘live’ is unmatchable.

How to create input sliding range element in HTML?

Here is the sample code for creating the input range element:

Here are the key attributes:

  • min (The lowest accepted value in the range)
  • max (The highest accepted value in the range)
  • step (The increment/decrement step value default is 1)
  • value (The starting or default value of the slider)

Displaying the current value

The default range element will only display the current position of the slider and the user has to guess the exact value. So in order to avoid the guesswork, you have to use one of the alternatives to display the current value. Here is a mostly HTML solution. (it uses Javascript in the attribute though)

22934

A jQuery Solution to Display values for all range input elements

A more reusable solution would be to create a jquery snippet that handles the change event for all range input elements. Here is the code:

22934

Negative & decimal values in the range input

Yes, you can have negative and decimal values in the range input see below for some examples:

22934

How to limit the max length of input in a textarea

The textarea in HTML is where the user can type in his answers or responses to the queries in free text.

Unlike radio buttons, check boxes and drop downs, there are no fixed options, it is like the answer sheets we have during our exams. Wait, we know what you are thinking?
“I usually write the same things multiple times for the same question in different ways to ensure the length of my answer goes up, what if the user does the same in the textarea?”

Well, in HTML forms, it would not be the quantity but the preciseness and the quality that will bring us more laurels, and it is highly unlikely that users would fill in long essays in a textarea when they are not getting marks for it, however; the points stands totally valid and as a designer we must be prepared for the worst scenarios.

In fact, the entire use case is totally possible in certain scenarios. One such case would be when the user is submitting a proposal for a job application portal and he needs to fill in the textarea with the question, ‘Tell us about yourself?’

Now, a user might finish this question in one line and another might need more than a thousand to finish the story of his life. However, it is highly unlikely that the reader who is expected to shortlist candidates on the bases on these questions is interested in your life story. Instead, he is interested in a short and precise answer which can help him in analyzing the person and his attributes.

Now, even if the candidates are not willing to take their hands of the lid and limit their story telling prowess, but we, as web designers, must ensure that we limit their hands and provide a useful platform for both the applicants as well as the company. This is where the maxlength attribute comes to our rescue.

How does the maxlength attribute limit the characters in a textarea?

The maxlength attribute invariable puts the brakes on the free flowing writer in us and lets us know that the textarea is certainly not the place to try our hands on something new.

Below is the code example with the maxlength attribute used:-

  • The maxlength attribute specifies a fixed number of characters that a textarea can take. The user can still choose to enter less characters than the maximum limit, but he/she cannot enter more.
  • The maxlength attribute is supported by all modern browsers
  • Even though maxlength limits the number of characters entered by the user, it is not the ideal way to perform validations and should only be used for character limitations on textarea for the end user.

Okay, I am curious, what happens when the user enters more characters than the limit specified with the maxlength?

Well, when the web designer uses the maxlength attribute on the text area, the user would not be able to type more than the specified limit.

So, keep pressing that keyword key until it breaks loose but you would not get any success.

Alright, not bad, but don’t you think a message saying, ‘The limit has reached’ or something would have been better?

Certainly, and like always, whatever HTML can’t do, Javascript does. A simple Javascript message is a basic and often underrated utility that more often than not proves to be the savior.

22934

The code example thorws a message just before the user reaches the maxlength.
so user gets to know why the new keys are not appearing in the textarea.

How to validate an email address using JavaScript

Validating email address using regular expressions is tricky and is often not recommended. The reason is simple. A valid email address as defined by RFC 2822 can be quite complex.

A valid email is of the format:
name@domain

The name can be a set of ‘atoms’ separated by dots. In its simplest form like this:
john.doe@domain

now, the atoms can contain
1. alpha-numeric characters
2. Any of these characters
! $ & * - = \^ ` | ~ # % ‘ + / ? _ { }
3. single or double quotes and any character inside the quotes

Now, to the domain part.
Most email validation checks assumes that the top level domain can have up to 4 characters. It is not true. There are TLDs like this: .MUSEUM .travel, .international or even .vermögensberatung

For example all the following email addresses are valid:

  • あいうえお@a.long.domain.example.university
  • one.“more\ long”@example.website.place
  • customer/department@example.com

Writing a email validation that validates for all those cases is difficult but possible.
Here is an email suggested from this post:

A near perfect Javascript Email validation regex

Source

The purpose of the validation

The sad truth is that despite the complex regular expression validation, the email may not be existing, so can still be invalid for practical purposes. You have just validated the format – not its existence.

The only way to truly validate the email address is to send an email to that address and request the user to confirm by clicking on a unique link (or entering a confirmation code)

Remember, if the user’s intention is to enter an invalid email address, she can do it so easily whether you have the most tough validation or not.

The whole purpose of the Javascript email validation should be to check for any unintentional error (like entering name instead of email).

A simple, practical Javascript email validation

The simple, future proof email validation test would be to check the presence of @ symbol

Just use HTML5 email input field

This would be the easiest and best option at the moment. Make use of the HTML5 email input element like this:

Also see:

Further Reading and References

HTML submit button onclick code

An HTML button is created using the following HTML code:

Or using the button tag like this:

In both the cases, pressing the button will submit the parent form without the need for handling the onclick event separately.

If you want to validate the form before submitting, the best event handler would be the onsubmit event of the form.
Example:

22934

Returning false from the onsubmit event handler of the form stops the form being submitted.

So the submit button has a meaningful existance only within a form

If, you want a plain simple button that triggers an event when the button is pressed/clicked, use the button tag with type=submit like this

Examples of javascript form validation using regular expressions

In this tutorial you will see how to use regular expressions to validate. Through a list of examples , we will build a script to validate phone numbers , UK postal codes, along with more examples.

First, let’s start by building the webpage and the validation code then we will talk about the regular expressions used to validate the strings. First go to your html file and paste the following code :

Here, I have a simple form. It has an onsubmit event attached to a function called validate() that we are going to create later inside this form there are three inputs one for our phone number another one is for postal codes and the third and the last one is a submit button that is going to submit the form after we are done filling it.

Now let’s jump to the javascript code which will contain all the regular expression parts .

This is our validate() function for now. It contains only the code that validates the phone number. In the first line, I am using document.getElementById() to grab the phone number from the input element. Then I created my regular expression and attached it to a variable called phoneRGEX notice that I did not need to wrap the regular expression in quotes this is because javascript natively recognizes regular expressions so there is no need to create them as strings then convert them.

Then I created a variable that contains the result of running the test() function on the phoneNumber string which will be a boolean that contain either true if the string matches our regular expression or false if it does not.

Now let’s jump into the fun part which is discussing the regular expression

First we have the starting and ending slashes “/” , the expression then starts with a “^” sign
to match with the beginning of the string. Notice the [-\s\.] this part matches a hyphen(-) space or a dot (.).[0-9]{3} means 3 digits. So basically the expression tries to match with a phone number like this
(541) 754-3010
or like this
541-754-3010
or with spaces

Now let’s move on to the Postal code part.

Here I have added a new variable called postalCode to fetch the postal code from the form then
created another variable to store the postal code regular expression which we will be discussing in a second.
Then I used the test function to test my string against the regular expression and print the result in an alert.

Now let’s jump to the regular expression itself:

UK postal code examples :
EC1A 1BB
W1A 0AX
M1 1AE
B33 8TH
CR2 6XH
DN55 1PT
So, 1 or 2 alphabetic characters, followed by 1 or 2 digits, then a space and one digit and exactly two alphabetic characters.
So here is the Regular expression pattern:

/^[A-Z]{1,2}[0-9]{1,2} ?[0-9][A-Z]{2}$/i

The i at the end of the pattern is to indicate that this is a case insensitive match.

Here is the demo code:

22934

Now that we have got the patterns right, we can go ahead and add this code to the validation function of the form:

More Regular Expression Checks

  1. Date
  2. /^\d{2}\/\d{2}\/\d{4}$/
    This simple regular expression just checks for 2 digits / 2 digits / 4 digits date format

    If you want more complex, tight validation for mm/dd/yyyy format, here is the format
    /^(0[1-9]|1[0-2])\/(0[1-9]|1\d|2\d|3[01])\/(19|20)\d{2}$/

    source

  3. URL
  4. A URL of the format http(s)://website/page can be validated with this regular expression:

    https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)

    source

  5. Any Alpha Numeric String
  6. If you want to allow only alphanumeric characters, use this regular expression:
    /^[a-zA-Z0-9]*$/

  7. Decimal Numbers
  8. For decimal numbers with one decimal point, the regular expression is:
    /^[0-9]+\.?[0-9]*$/

How to handle HTML checkbox events

The HTML checkbox input element allows you to select a single value for submission in a form for example if you are creating a form and want to know if the applicant is fluent in English or not you can have a checkbox and if the user thinks he/she is fluent in English he/she checks it if not leaves it unchecked .

In this tutorial we are going to learn

  1. How to handle onclick and onchange events and the difference between them
  2. How to handle checkbox events in Jquery
  3. How to submit a form when checkbox is clicked
  4. Show/ Hide a section of the form when checkbox is clicked

To start working with checkboxes we will create a form that contains a checkbox , in this example we will be building a form that takes the a user name and has also a checkbox that the user should check if he thinks he is fluent in English , if not a prompt will appear showing the user a text that says you need to be fluent in English to apply for the job.

Checkbox event handling using pure Javascript

22934

Now what we need to do is to attach an event to the checkbox so it checks it’s state each time it’s changed and show the message if it has been unchecked , notice I added a checked property to the checkbox so it is checked by default.

There are two events that you can attach to the checkbox to be fired once the checkbox value has been changed they are the onclick and the onchange events.

There is a problem with the onchange event is that it is not called until the checked state has been updated and since Internet Explorer does not fire the onChange event till the checkbox loses focus so it will create different results than in Google chrome and other browsers so to avoid all this I recommend you stick to the onclick event.

Here I added an on click event and make it so it will call a function called checkFluency() once it is clicked

Here in the checkFluency() function , picked the checkbox and then if it is not checked an alert is shown saying “you need to be fluent in English to apply for the job”

Using jQuery

22934

We could have done the same thing using jQuery and in fact that is what we are going to be doing next .
jQuery is the most famous JS library ever created , and a lot of people use it daily as it makes their job a lot easier . You do not need to worry if you do not know jQuery , it’s concepts are very easy and I will be explaining everything as we go along.

I only added jQuery and couple of CSS lines to style our page.
I also added the same exact HTML code we used in the previous code , the only difference will be in our javascript code since in this example we will be using jQuery instead of plain javascript.

You may notice that the only thing I changed from the previous example is that I have deleted the onclick event in the checkbox which makes sense , since in jquery we will be attaching the event to the element no need to call it from the HTML code.

Now to the javascript code where all the magic happens :

If this seems overwhelming to you , no need to worry , I will be explaining everything in details. First, I am using the $(document).ready(); that I have told you about and inside it I added an anonymous function.

If you are not familiar with anonymous functions they are functions that are declared in runtime and the reason they are called anonymous is that you create them without giving them a name.

And inside the anonymous function I placed the following code :

First, we are using the dollar sign ‘$’ which is a shorthand for jQuery so this $(‘#fluency’) is the same exact thing as jQuery(‘#fluency’). Then we are attaching to it an on change event and inside it we are using the anonymous function syntax for the second time. The code that is inside the anonymous function will be run each time the event is fired.

This is the same exact if statement we used in the first example with only a very small change , which is instead of getting the checkboc using document.getElementById() we are using the “this” keyword.
If you are not familiar with the ‘this’ keyword , here in this example it refers to the target that fired that event which is here the checkbox we want to grab.

Submitting the form when checkbox is clicked

Sometimes you might want to submit the form just when the user clicks a checkbox, rather than making the user press the submit button.

All what we will have to do is give an id to the form , I gave it an id of myform, then use jQuery to grab and submit the form.

Hide/show elements when checkbox is selected

22934

I am sure most of you have seen a lot on the Internet which is when there is something hidden in the form , something like a section for extra information or feedback and you press on a checkbox to toggle it and show it or hide it . And this is what we will be building. We are going to be using jQuery because it will be much easier and shorter and I do not want you to get lost in a lot of lines but this example can be done with only javascript and it will not be hard .

In the code above we have a div and inside it we have a form that contains a text with a placeholder text of name which will contain the name of the applicant , another input with type e-mail , checkbox and a text area .
When the checkbox is checked the textarea should appear so by default it should be hidden.
So we make the container div (with id conditional_part) hidden

Next step is creating the javascript which is going to make this textarea appear and disappear .

The javascript for this example is pretty straight forward :

Here, we are first grabbing the checkbox which we gave an id of more-info and attaching to it an onchange event that fires an anonymous function when the event is fired.

Inside this anonymous function we are having the same if statement we used in the previous example to check whether the checkbox is checked or not. And inside them we are using the jquery hide() and show() functions . These functions simply change the display type of the div (with id ‘conditional_part’) .