In this article, we will see how we can set a count on the number of typed characters in a text or textarea field in Contact Form 7.
Setting up a count is sometimes helpful to let user know how many characters they have typed in the field.
The count function in Contact Form 7 can also do the backward counting which tells how many remaining characters can be inputted into the field.
Let’s say you have set a maximum limit of 100 characters in the field, now as you type the characters into the field, the count will start to decrease from 100 until it reaches 0.
Let’s get started.
We will create a simple form with two text fields. In the first field, we will set up a normal counter and in the second field, we will add a reverse counter or a down counter.
Create a new form by going to “Contact” and then click on “Add New“.
Enter a title for the form. In my form, I have named it “Form With Count“.
Delete everything inside the form edit screen and then click on “Save” in the top right section.
Now, go to “Pages” > “Add New Page“. The purpose of this page is to just to display the form that we have created.
Add a title for the Page and then click on the Blue plus button in the top right and type “Contact Form 7” in the search bar.
Add this block to the page and select “Form With Count” from the list and then click on Publish to publish the page.
If you view the page now, it will be empty because we haven’t added anything into the form yet. Let’s add the form tags to the form.
Add the following code to the form.
<label> Forward Count
[text text-with-forward-count]
Number of typed characters: [count text-with-forward-count]
</label>The first line in this code snippet is simple. It just adds a text field into the form with the name of “text-with-forward-count“.
The second line adds a count form tag in the form. Just be sure that you set the name of this form tag to the name of the form field for which you want to add the count.
Click on “Save” and then view the form on the front-end by refreshing the page. You will see that as you type into the field, the number of characters starts to increment.
Heading. Adding a Reverse or Backward Counter to the Contact Form 7 Field.
Now, let’s add the down counter to the field. We will add another field below the above field for the down counter.
<label> Backward Count
[text text-with-backward-count maxlength:140]
Remaining characters: [count text-with-backward-count down] out of 140
</label>Again, make sure that the name of count form tag matches the name of the form tag for the text field.
We have set a max length on the number of characters with the maxlength attribute. When we start typing, count starts to decrement from this number.
When the counter reaches 0, you will not be able to write any more characters.
In the count form tag, the “down” text converts the normal counter into the reverse counter.
That’s it. The process of adding a simple counter and reverse counter to a form field in contact form 7 is very simple and can be achieved by just adding a single line count tag.
