Textarea character counter

The Quform WordPress v2 documentation is not yet finished. Please post on the forums if you have any questions in the mean time.

Click here to visit the complete documentation for Quform 1.x

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(document).ready(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(document).ready(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.

Still having trouble? Head over to the forums.

Forums