This guide will show you how to add a JavaScript character counter after a Textarea field.
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 replace200
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.