As we know that contact form 7 is widely used plugin for forms with WordPress websites. Most of the form features are included in this plugin which fulfill almost all of our requirements related to forms.

Just look at the image, this is the desired output. In below image, count are increasing when user is writing their name. There is different situation for message field where counts are decreasing as user is typing in the field. It is defined below that how we achieve both situations as per our requirement.

Increasing counts with fields:

In this section we are discussing about the increasing counts of the characters for a field. For example we have a field for “Name” in our form and we want to show the counts of the character while user is typing their names in the field. For this we just need to add code:

[count Name]

Where “Name” is the actual name of the field, we are taking field with name “Name”. If you are using any other field like “Email” then you should write :

[count Email]

Field without count:

[text* Name placeholder "*Name"]

Field with count: 

[text* Name placeholder "*Name"][count Name]

 
 
Decreasing count with fields:

In the same manner sometimes we need to show the decreasing counts in which the count decreases as user is tying the content to that field. In this we generally set the max length of the field and then we show the count. So that user while typing is able to understand, he/she is able to write limited number of characters.

For this we are taking an example of text-area type field which name is “Message”.

Field without count: 

[textarea* Message maxlength:500 placeholder "*Message"]

Field with count:

[textarea* Message maxlength:500 placeholder "*Message"]
[count Message]

Field with count down(decreasing):

[textarea* Message maxlength:500 placeholder "*Message"]
[count Message down]

 
In the above code, “Message” is the name of the field and “down” indicates the count-down behavior of that count. So the complete back-end short-code combination to achieve the complete output showing at the beginning of the article is showing below with the help of image.

In this way we can easily show counts for any field, we have explained about the “text” and “text-area” fields. In the same manner you can use this with any other fields.