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:

  [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() {
  var maxLength = 250;
  jQuery('textarea.description').keyup(function() {
    var length = jQuery(this).val().length;
    var length = maxLength-length;

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

You can find this solution on this blog: