How to Display a Total Word Count Under Your Form Field

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 to limit the words or characters but simply provide a count under the field.

Setting up your form

To begin, you’ll need to create your new form. For assistance on creating a new form, please review this documentation.

However, since our form is for engraving, we’re going to add a Paragraph Text form field that will count the message that needs to be engraved.

Start by adding a paragraph form field to your form

Next, we’re going to add an HTML Code Block form field to the form as well. This will dynamically populate with the word count as your visitors type into the Paragraph Text field.

Next, add your HTML Code block to your form, this will hold the word count total

Adding the code snippet

Now it’s time to add the code snippet that will pull this all together. 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">
		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;
			jQuery('#wpforms-1480-field_8').text(cs);
		}
	
	</script>
    <?php
}
add_action( 'wpforms_wp_footer', 'wpf_dev_count_words_only' );

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 Code Block 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.

Now your form will display a word count under your form 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 Code Block? Check out our tutorial on
How to Process Smart Tags in HTML Fields.

Action Reference: wpforms_wp_footer

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">
jQuery('#wpforms-1480-field_6').keyup(updateCount);
jQuery('#wpforms-1480-field_6').keydown(updateCount);
function updateCount() {
    var cs = jQuery(this).val().length + " Characters";
    jQuery('#wpforms-1480-field_9').text(cs);
}
	</script>
    <?php
}
add_action( 'wpforms_wp_footer', 'wpf_dev_count_characters_only' );

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.