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
34
5
67
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
jQuery(function ($) {
    var $counter = $('<div class="character-counter">'),
        limit = 200; 
    // Get the textarea field
    $('.quform-field-1_3') 
    // Add the counter after it
    .after($counter)
 
    // Bind the counter function on keyup and blur events
    .bind('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
    .blur();
});
jQuery(function ($) {
    var $counter = $('<div class="character-counter">'),
        limit = 200;

    // Get the textarea field
    $('.quform-field-1_3')

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

    // Bind the counter function on keyup and blur events
    .bind('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
    .blur();
});
  • On line 3, replace 200 with the maximum number of characters you want to allow
  • On line 6, replace 1_3 with the Textarea element unique ID

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. © 2018 ThemeCatcher Ltd. 20-22 Wenlock Road, London, England, N1 7GU | Company No. 08120384 | Built with React | Privacy Policy