Textarea character counter

This documentation page is for Quform version 1 and may not be applicable for Quform 2 click here to visit the documentation for Quform 2.

This guide will show you how to add a JavaScript character counter after a textarea (Paragraph Text) element.

character-count

Step 1

Find the unique element ID of the Paragraph Text element, see Finding the unique element ID.

Step 2

Add a HTML element to the form (from the “More” tab) and add the following JavaScript code in the HTML option in the element Settings.

1
2
3
45
6
78
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<script>
    jQuery(function ($) {
        var $counter = $('<div class="character-counter">'),
            limit = 200; 
        // Get the textarea field
        $('.iphorm_1_1') 
        // 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();
    });
</script>
<script>
    jQuery(function ($) {
        var $counter = $('<div class="character-counter">'),
            limit = 200;

        // Get the textarea field
        $('.iphorm_1_1')

        // 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();
    });
</script>
  • On line 4, replace 200 with the maximum number of characters you want to allow.
  • On line 7, replace iphorm_1_1 with the unique element ID, from Step 1.

Step 3

You can style the character counter, by adding the following CSS style to your site and customizing it to suit, see Adding custom CSS.

1
2
3
4
.character-counter {
    font-size: 11px;
    color: #a2a2a2;
}
.character-counter {
    font-size: 11px;
    color: #a2a2a2;
}
Be inspired. © 2024 ThemeCatcher Ltd. 20-22 Wenlock Road, London, England, N1 7GU | Company No. 08120384 | Built with React | Privacy Policy