Introduction
Would you like to display a total word count under your Paragraph Text form field? You can easily achieve this with a small code snippet and in this tutorial we’ll walk you through each step.
By default, when you use the character or word limit on Single Line Text or Paragraph Text form fields, there is a message that displays under these fields to let your visitors know how many words or characters they have left to type. If you would like to see more information on this, please review this documentation.
In our example, we’re creating an engraving form so we don’t want to limit the words or characters but simply provide a count under the field.
Creating up your form
To begin, you’ll need to create a new form and add your fields. Since we want to capture messages for engraving, we’ll also add a Paragraph Text form field to the form for the engraved message. You’ll need to take note of the field ID as we’ll be using this in a later step.
If you need help on creating a new form, please review this documentation.
Next, we’re going to add an HTML form field to the form as well. This will dynamically populate with the word count as your visitors type into the Paragraph Text field. You’ll also need to take note of this field ID as well.
Adding the code snippet
Next, you’ll need to copy and paste this snippet to your site.
If you need assistance on how to add snippets to your site, please review this tutorial.
/**
* Add a word count under the form field.
*
* @link https://wpforms.com/developers/how-to-display-a-total-word-count-under-your-form-field/
*/
function wpf_dev_count_words_only() {
?>
<script type="text/javascript">
// Look at the form ID 1480 only and the count each keyup or keydown on field ID 6
jQuery( '#wpforms-1480-field_6' ).keyup(updateCount);
jQuery( '#wpforms-1480-field_6' ).keydown(updateCount);
function updateCount() {
var cs = jQuery.trim(this.value).length ? this.value.match(/\S+/g).length + " words total" : 0;
// Update the word count inside the HTML form field (field ID 8)
jQuery( '#wpforms-1480-field_8' ).text(cs);
}
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_count_words_only', 30 );
In the code example above, there are three items you’ll need to update. In our example, our form ID is 1480, the Paragraph Text field ID is _6 and the HTML field ID is _8, please remember to update these three items to match your own form ID and field ID from your form.
For assistance on locating your form and field IDs, please review this tutorial.
Putting it all together
With our form created and our code snippet in place, you’ll see that as you type into the field, a live word count is updated under the field.
And that’s it! You’ve successfully added a word count to display under your form field. Would you like to process Smart Tags inside an HTML form field? Check out our tutorial on
How to Process Smart Tags in HTML Fields.
Related
Action Reference: wpforms_wp_footer_end
FAQ
Q: Can I count the characters instead of words?
A: Absolutely! To only count characters, use this code snippet instead.
/**
* Add a character count under the form field.
*
* @link https://wpforms.com/developers/how-to-display-a-total-word-count-under-your-form-field/
*/
function wpf_dev_count_characters_only() {
?>
<script type="text/javascript">
// Look at the form ID 1480 only and the count each keyup or keydown on field ID 6
jQuery('#wpforms-1480-field_6').keyup(updateCount);
jQuery('#wpforms-1480-field_6').keydown(updateCount);
function updateCount() {
var cs = jQuery(this).val().length + " Characters";
// Update the word count inside the HTML form field (field ID 9)
jQuery('#wpforms-1480-field_9').text(cs);
}
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_count_characters_only', 30 );
Q: Will this work for other form fields too?
A: Any form field that accepts the user typing in a response will work with this code snippet. Just remember to make sure you have the field ID in the keyup and keydown so the code knows which field it should count.
