Possible to limit word count in text area

Any possibility for this feature?

This can be done with a script in a Note field.

1. Create your text field – add a span tag in the text entry label where you want the current count to be displayed.
2. Save and embed the form. Look at the HTML to get the ID of the form row and the text field. It will look something like:

   <li id="fm-item-textarea-527a6a4baf148">
     <table><tr>
       <td style="width:200px"><label>Some text <span></span> words</label></td>
       <td><textarea name="textarea-527a6a4baf148" id="textarea-527a6a4baf148" style="width:300px;height:100px;" placeholder=""></textarea></td>
     </tr></table>
   </li>

3. Create a ‘Note’ field with no label, the “HTML” box checked and the following script, edited to match the IDs from your form:

   var maxWords = 25;
   jQuery('textarea#textarea-527a6a4baf148').keypress(function () {
       var $this, wordcount;
       $this = $(this);
       var words = $this.val().split(/\b[\s,\.-:;]*/);
       wordcount = words.length;
       if (words[wordcount - 1].length === 0) {
           --wordcount;
       }
       if (words[0].length === 0) {
           --wordcount;
       }
       words = null;
       if (wordcount > maxWords) {
           jQuery("#fm-item-textarea-527a6a4baf148 label span").text(wordcount + " is over " + maxWords);
           return false;
       } else {
           return jQuery("#fm-item-textarea-527a6a4baf148 label span").text(wordcount + " of " + maxWords);
       }
   });
   
   jQuery('textarea#textarea-527a6a4baf148').change(function () {
       var words = $(this).val().split(/\b[\s,\.-:;]*/);
       var content = $(this).val();
       for (var i = maxWords; i < words.length; ++i) {
           content = trimNonWords(content);
           content = content.substring(0, content.length - words[i].length);
       }
       $(this).val(content);
   });
   
   function trimNonWords(str) {
       var col = str.length-1;
       while (" ,.-:;".indexOf(str.charAt(col)) >= 0) {
           --col;
       }
       if (col+1 < str.length) {
           return str.substring(0, col+1);
       }
       return str;
   }

This came from this stackoverflow q&a and seems to work quite well.

Thanks Samatva. It doesn’t seem to be working for me. I double checked your instructions…made sure the ID is correct in the code I pasted and that the html button is checked. What I’m getting is the code script visible in the form:

https://poetrysuperhighway.com/psh/e-book-free-submission-form/

Any idea what I might be doing wrong here?

Thanks!

Should the code be pasted into the label field of the note instead? I have it pasted into the “Note” field itself, no label and HTML box checked. The Span tag (on the form linked above) is in the text area field just above and should appear before the words “words used.”

Oh and does it matter where the note field with the code in it goes? I tried it at the end of the form as well as right after the text area field.

Sorry for the delayed reply.

The problem (my bad!) is that the above code must go inside “script” tags:

<script type="text/javascript">
//... the code from above
</script>

This does all go in the “Note” field itself, and the note field (probably?) must come after the input textarea to be limited.

This code does depend in some plugin or your theme to load jQuery, which does seem to be happening on your page.

Hi…thanks for your help with this and no worries on any delay.loading

This hasn’t quite done the trick uet. Adding the <script> tags above and below did make the code disappear.

I also installed a plugin to make sure jQuery was loading…but what’s happening now is, when I submit a form with longer than 50 words in the text area field it submits with no problem or error message. The word count isn’t displayed in the field label.

Also this script seems to have broken the “required” functionality of the other fields as I’m able to submit the form with only the text area filled in (as I did just to test that field) with no validation messages appearing if the other required fields aren’t filled in.

Oy…any thoughts? And thanks so much for your help!