Contact Form 7 4.1 has introduced maxlength and minlength options to some form-tags, and a new type of form-tag for a Twitter-like character count.

Maxlength & minlength options

Maxlength and minlength are based on the HTML5 attributes of the same names that specify the maximum and minimum length allowed for input fields.

Form-tag types that support both maxlength and minlength are: text, textarea, email, url, tel, quiz, and captchar (CAPTCHA Response). These form-tags (except quiz and captchar) also support user input validation based on character length.

Example:

[textarea* your-message minlength:10 maxlength:140]

With the textarea form-tag in this example, you will see a validation error message if your input is shorter than 10 characters or longer than 140 characters. However, most browsers block you from typing beyond the maxlength limit.

The old format for maxlength (such as [textarea* your-message 40/140]) is still available, but an explicit maxlength option (if set) will override it.

Character count

You may want a character count for an input field with the maxlength option, which tells how many characters you have typed, or you can type into the field, up to the limit of the maxlength.

To add a character count, insert a count form-tag into your form. count only works as a placeholder for a character count (integer). Note that the tag has to have the same name as the targeted input field.

For example, if you have this field (name = “your-message”):

[textarea* your-message minlength:10 maxlength:140]

and want a character count for the field, add [count your-message]:

[textarea* your-message minlength:10 maxlength:140]
[count your-message]

By default, count displays the character count in the targeted field, so its integer value increases as you type.

You can also reverse this to make it display the character count remaining up to the maxlength of the targeted field. To do so, add a down option into the count form-tag:

[textarea* your-message minlength:10 maxlength:140]
[count your-message down]

In this case, count shows “140” at first, decreasing as you type; when you have typed 140 characters, it will show “0”.

Demo

View source of above form:

[textarea* your-message minlength:10 maxlength:140]
[count your-message]

[textarea* your-message-2 minlength:10 maxlength:140]
[count your-message-2 down]