Textarea character counter

This guide will show you how to add a JavaScript character counter after a Textarea field.

Example Textarea character counter

Step 1

Go to the Forms → Settings → Custom CSS & JS, at the Custom CSS (All devices) field enter the following code.

1
2
3
4
.character-counter {
    font-size: 11px;
    color: #a2a2a2;
}
.character-counter {
    font-size: 11px;
    color: #a2a2a2;
}

Step 2

At the Custom JavaScript field enter the following code.

1
2
3
45
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
jQuery(function ($) {
    var $fields = $();
 
    $fields = $fields.add($('.quform-field-1_3').data('limit', 200)); 
    $fields.each(function () {
        var $field = $(this),
            limit = $field.data('limit'),
            $counter = $('<div class="character-counter">');
 
        // Add the counter after the field
        $field.after($counter)
 
        // Bind the counter function on keyup and blur events
        .on('keyup blur', function () {
            var length = $(this).val().length;
 
            if (length > limit) {
                // The value exceeds the limit, contain it
                $(this).val($(this).val().substring(0, limit));
            } else {
                // Set the counter text
                $counter.text(length + '/' + limit + ' characters');
            }
        })
 
        // Trigger the counter on first load
        .trigger('blur');
    });
});
jQuery(function ($) {
    var $fields = $();

    $fields = $fields.add($('.quform-field-1_3').data('limit', 200));

    $fields.each(function () {
        var $field = $(this),
            limit = $field.data('limit'),
            $counter = $('<div class="character-counter">');

        // Add the counter after the field
        $field.after($counter)

        // Bind the counter function on keyup and blur events
        .on('keyup blur', function () {
            var length = $(this).val().length;

            if (length > limit) {
                // The value exceeds the limit, contain it
                $(this).val($(this).val().substring(0, limit));
            } else {
                // Set the counter text
                $counter.text(length + '/' + limit + ' characters');
            }
        })

        // Trigger the counter on first load
        .trigger('blur');
    });
});
  • On line 4, replace 1_3 with the Textarea element unique ID and replace 200 with the maximum number of characters you want to allow in this field
  • If you want to add a character counter to another field, duplicate line 4 and change the unique ID to the unique ID of the second field (and limit if you want a different limit), this line can be duplicated as many times as needed

Step 3

Edit the form and go to the Textarea element settings, Data tab, and at the Maximum length field enter the maximum number of characters you want to allow.

Be inspired. © 2024 ThemeCatcher Ltd. 20-22 Wenlock Road, London, England, N1 7GU | Company No. 08120384 | Built with React | Privacy Policy