form – text field with characters limit and counter

When users can publish content on a website, it could be useful to limit the extension of the text they can publish. For example, it is possible to offer the option to write a short description and a larger description.

It is possible to do it on a Toolset Form by adding some jQuery. This script limits the number of characters and adds a counter to display the number of remaining characters. This is the result:

This is the form HTML:

  <label>Description</label>
  [cred_field field='description' force_type='field' class='form-control' output='bootstrap' class='description']
  <span id="chars">250</span> characters remaining

This is the jQuery snippet:

jQuery( document ).ready(function() {
  jQuery('textarea.description').attr('maxlength','250');
  var maxLength = 250;
  jQuery('textarea.description').keyup(function() {
    var length = jQuery(this).val().length;
    var length = maxLength-length;
    jQuery('#chars').text(length);
  });
});

It is possible to change ‘textarea.description’ to use it on any text field.

You can find this solution on this blog:

https://geoffmuskett.com/really-simple-jquery-character-countdown-in-textarea/