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.
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.
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.
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.
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
Q: Can I count the characters instead of words?
A: Absolutely! To only count characters, use this code snippet instead.
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
keydown so the code knows which field it should count.