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 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.