Word counter

Quform WordPress v2 DocumentationGuidesCustomizationWord counter

Textarea word counter

Step 1

Go to Forms → Settings → Custom CSS & JS and at the Custom JavaScript field add the following code.

1
2
34
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2021
22
23
24
25

jQuery(function($) {
    var $counterText = $('<div class="word-counter">'),
        $field = $('.quform-field-1_3'); 
    // Add the counter after the field
    $field.after($counterText);
 
    // Bind the counter function to the keyup and blur events
    $field.on('keyup blur', function () {
        // Count the words
        var val = $(this).val(),
            matches = val.match(/\S+/g),
            count = 0;
 
        if (matches) {
            count = matches.length;
        }
 
        // Set the counter text
        $counterText.text(count + '/400 words');    })
 
    // Trigger the counter on page load
    .triggerHandler('keyup');
});
jQuery(function($) {
    var $counterText = $('<div class="word-counter">'),
        $field = $('.quform-field-1_3');

    // Add the counter after the field
    $field.after($counterText);

    // Bind the counter function to the keyup and blur events
    $field.on('keyup blur', function () {
        // Count the words
        var val = $(this).val(),
            matches = val.match(/\S+/g),
            count = 0;

        if (matches) {
            count = matches.length;
        }

        // Set the counter text
        $counterText.text(count + '/400 words');
    })

    // Trigger the counter on page load
    .triggerHandler('keyup');
});
  • On line 3, replace 1_3 with the Textarea element unique ID
  • On line 20, replace the number 400 with the maximum number of words allowed
1
2
345
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

jQuery(function($) {
    var $counterText = $('<div class="word-counter">'),
        $field = $('.quform-field-1_3'),        max = 400; 
    // Add the counter after the field
    $field.after($counterText);
 
    // Bind the counter function to the keyup and blur events
    $field.on('keyup blur', function () {
        // Count the words
        var val = $(this).val(),
            matches = val.match(/\S+/g),
            count = 0;
 
        if (matches) {
            count = matches.length;
        }
 
        if (count > max) {
            $(this).val(this.lastValidValue || '').triggerHandler('keyup');
            return;
        } else {
            this.lastValidValue = val;
        }
 
        // Set the counter text
        $counterText.text(count + '/' + max + ' words');
    })
 
    // Trigger the counter on page load
    .triggerHandler('keyup');
});
jQuery(function($) {
    var $counterText = $('<div class="word-counter">'),
        $field = $('.quform-field-1_3'),
        max = 400;

    // Add the counter after the field
    $field.after($counterText);

    // Bind the counter function to the keyup and blur events
    $field.on('keyup blur', function () {
        // Count the words
        var val = $(this).val(),
            matches = val.match(/\S+/g),
            count = 0;

        if (matches) {
            count = matches.length;
        }

        if (count > max) {
            $(this).val(this.lastValidValue || '').triggerHandler('keyup');
            return;
        } else {
            this.lastValidValue = val;
        }

        // Set the counter text
        $counterText.text(count + '/' + max + ' words');
    })

    // Trigger the counter on page load
    .triggerHandler('keyup');
});
  • On line 3, replace 1_3 with the Textarea element unique ID
  • On line 4, replace the number 400 with the maximum number of words allowed

On the same page, at the Custom CSS (All devices) field add the following code to style the word counter then adjust the styles to suit.

1
2
3
4

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

Step 2

Add the following code to the WordPress theme functions.php file (or create a plugin for it).

123
4
5
6
7
8
9
10
11

add_filter('quform_element_valid_1_3', function ($valid, $value, Quform_Element_Field $element) {    $max = 400;    $count = preg_match_all('/\S+/', $value);
 
    if ($count > $max) {
        $element->addError("Please enter no more than $max words");
        $valid = false;
    }
 
    return $valid;
}, 10, 3);
add_filter('quform_element_valid_1_3', function ($valid, $value, Quform_Element_Field $element) {
    $max = 400;
    $count = preg_match_all('/\S+/', $value);

    if ($count > $max) {
        $element->addError("Please enter no more than $max words");
        $valid = false;
    }

    return $valid;
}, 10, 3);
  • On line 1, replace 1_3 with the Textarea element unique ID
  • On line 2, replace the number 400 with the maximum number of words allowed
1
2
34
5
6
7
8
9
10
11
12
13
function my_word_count_validator($valid, $value, Quform_Element_Field $element)
{
    $max = 400;    $count = preg_match_all('/\S+/', $value);
 
    if ($count > $max) {
        $element->addError("Please enter no more than $max words");
        $valid = false;
    }
 
    return $valid;
}
add_filter('quform_element_valid_1_3', 'my_word_count_validator', 10, 3);
function my_word_count_validator($valid, $value, Quform_Element_Field $element)
{
    $max = 400;
    $count = preg_match_all('/\S+/', $value);

    if ($count > $max) {
        $element->addError("Please enter no more than $max words");
        $valid = false;
    }

    return $valid;
}
add_filter('quform_element_valid_1_3', 'my_word_count_validator', 10, 3);
  • On line 3, replace the number 400 with the maximum number of words allowed
  • On line 13, replace 1_3 with the Textarea element unique ID
Be inspired. © 2024 ThemeCatcher Ltd. 20-22 Wenlock Road, London, England, N1 7GU | Company No. 08120384 | Built with React | Privacy Policy