Textarea word counter

This guide will show you how to add a JavaScript word counter after a textarea (Paragraph Text) element.

Step 1

Find the unique element ID of the Paragraph Text element, see Finding the unique element ID.

Step 2

Add a HTML element to the form (from the “More” tab) and add the following JavaScript code in the HTML option in the element Settings.

1
2
34
5
6
7
8
910
11
12
13
14
15
16
17
18
19
20
2122
23
24
25
26
27

<script type="text/javascript">
// Paste the wordCount function on the line below
  
jQuery(function ($) {
    var $counterText = $('<div class="word-counter" />');
 
    // Get the textarea field
    $('.iphorm_1_1') 
    // Add the counter after it
    .after($counterText)
    
    // Bind the counter function on keyup and blur events
    .bind('keyup blur', function () {
        // Count the words
        var val = $(this).val(),
        count = wordCount(val);
 
        // Set the counter text
        $counterText.text(count + '/400 words');    })
    
    // Trigger the counter on first load
    .keyup();
});
</script>

<script type="text/javascript">
// Paste the wordCount function on the line below


jQuery(function ($) {
    var $counterText = $('<div class="word-counter" />');

    // Get the textarea field
    $('.iphorm_1_1')

    // Add the counter after it
    .after($counterText)
    
    // Bind the counter function on keyup and blur events
    .bind('keyup blur', function () {
        // Count the words
        var val = $(this).val(),
        count = wordCount(val);

        // Set the counter text
    	$counterText.text(count + '/400 words');
    })
    
    // Trigger the counter on first load
    .keyup();
});
</script>

• *IMPORTANT* On line 3, paste in all the code from this page
• On line 9, replace iphorm_1_1 with the unique element ID, from Step 1.
• On line 21, replace the number 400 with the maximum number of words you want to allow.

Step 3

If you want to make it so that the user cannot submit the form if they exceed the word count, you’ll need to add a custom validator. To do this, add the following code to the wp-content/themes/YOUR_THEME/functions.php file (or create a plugin for it).

1
2
34
5
6
7
8
9
10
11

function my_word_count_validator($valid, $value, $element)
{
    $max = 400;    if (str_word_count($value) > $max) {
        $element->addError("Value must contain no more than $max words");
        $valid = false;
    }
 
    return $valid;
}
add_filter('iphorm_element_valid_iphorm_1_1', 'my_word_count_validator', 10, 3);

function my_word_count_validator($valid, $value, $element)
{
    $max = 400;
    if (str_word_count($value) > $max) {
        $element->addError("Value must contain no more than $max words");
        $valid = false;
    }

    return $valid;
}
add_filter('iphorm_element_valid_iphorm_1_1', 'my_word_count_validator', 10, 3);

• On line 3, replace the number 400 with the maximum number of words you want to allow.
• On line 11, replace iphorm_1_1 with the unique element ID, from Step 1.

Step 4

You can style the word counter, by adding the following CSS style to your site and customizing it to suit, see Adding custom CSS.

1
2
3
4

.word-counter {
    font-size: 11px;
    color: #a2a2a2;
}

.word-counter {
    font-size: 11px;
    color: #a2a2a2;
}