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:

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>