Profile: Gavin

Problem: I would like to add a character counter that counts down the number of characters that can be added in a CRED input field.

Solution:

1. Edit your CRED form. Add this code to the editor area, right after the text input area you want to count:

<div id="chars">10</div>

2. Then just underneath the editor panel there is an attached JS editor. Twirl that open, then paste in the code from the other ticket with a few minor changes:

(function($) {
    $.fn.extend( {
        limiter: function(limit, elem) {
            $(this).on("keyup focus", function() {
                setCount(this, elem);
            });
            function setCount(src, elem) {
                var chars = src.value.length;
                if (chars > limit) {
                    src.value = src.value.substr(0, limit);
                    chars = limit;
                }
                elem.html( limit - chars );
            }
            setCount($(this)[0], elem);
        }
    });
})(jQuery);
  
jQuery(document).on('cred_form_ready', function(){
var elem = jQuery("#chars");
jQuery('textarea[name="post_excerpt"]').limiter(10, elem);
});

3. Finally, modify this part of the code you just pasted in:

jQuery('textarea[name="post_excerpt"]').limiter(10, elem);

The textarea depends on whether your input field is a single line or a multiline or WYSIWYG. If it's a simple single line, you can replace textarea with input.
The post_excerpt part depends on the text input area whose characters you are counting. Typically a custom field created in Types will be named "wpcf-" plus the slug of your field. So if your field slug is "test-text" then you would change "post_excerpt" to "wpcf-test-text".

4. Save your View and check it out on your live site.