Plugin Planet

Premium WordPress Plugins

Complete guide to setting minimum and maximum (min and max) limits on the number of words or characters for the main content field or any textarea.

Limit characters globally

USP Pro provides a global setting for maximum characters that will serve as the default value for all forms. To set this global/default value, visit General settings and then specify values for the following options:

  • Minimum Character Limit – sets the global minimum character limit
  • Maximum Character Limit – sets the global maximum character limit

For either of these settings, you can use 0 for no limit.

Limit characters per form

Here we will limit the number of characters that may be included in the content area for each form. To set a local/per-form character limit, add the max attribute to the form, like so:

[usp_content max="99999999"]

Just change the number to whatever works for you.

Limit characters per field

On supportive fields (like text inputs and custom fields), you can limit the number of characters by adding a max attribute. Likewise for setting a required minimum number of characters, you can add the min attribute to supportive fields. Check out the USP Pro Shortcodes Reference to see which fields support either of these attributes.

Count and Limit Words with jQuery, Display Word Count

Another way of limiting the amount of “stuff” that users can add to any textarea is to use a slice of jQuery. The following example demonstrates how to add a word counter to the form, and also limit the number of words that may be added.

First, make sure you have a content area or other textarea added to the form. Here we are using the default content field via shortcode:

[usp_content]

Then, add the following code to the form, after the content field (or you can add to the plugin JavaScript settings, or your theme JS file, etc.):

<span class="counter"></span>
<script>
	jQuery(document).ready(function($){
		$('.usp-input-content').keyup(function(){
			var limit = 10; // word limit
			var count = $(this).val().split(/\b[\s,\.-:;]*/).length;
			$('.counter').html(count);
			if (count > limit) {
				alert('Word limit reached!');
				return false;
			}
		});
	});
</script>

There are a few things to be mindful of here, that you may want to customize:

  • If applying the counter/limit to a different field, change .usp-input-content to the class or ID of the field you are using
  • Currently the limit is set at 10 words. To change that, edit the value of the limit variable in the code.
  • Customize the message that is displayed when the word limit is reached by editing the one instance of “Word limit reached!” to whatever works for you

Count and Limit Characters with jQuery, Display Character Count

Instead of counting and limiting words, we can change things up and limit/count the number of characters. Using the same basic technique as before, we first add the content field:

[usp_content]

Then, add the following code to the form, after the content field (or you can add to the plugin JavaScript settings, or your theme JS file, etc.):

<span class="counter"></span>
<script>
	jQuery(document).ready(function($){
		$('.usp-input-content').keyup(function(){
			var limit = 10; // character limit
			var count = $(this).val().length;
			$('.counter').html(count);
			if (count > limit) {
				alert('Character limit reached!');
				return false;
			}
		});
	});
</script>

As before, there are a few things that you may want to customize:

  • If applying the counter/limit to a different field, change .usp-input-content to the class or ID of the field you are using
  • Currently the limit is set at 10 words. To change that, edit the value of the limit variable in the code.
  • Customize the message that is displayed when the word limit is reached by editing the one instance of “Character limit reached!” to whatever works for you

Count and Limit Characters, Display Character Count in Post Content

Here is a modified take on the previous jQuery technique. Here we are counting/limiting, but also adding a line in the post content that contains the number of characters. To try it out, first make sure your form includes the content field:

[usp_content]

Then, add the following code to the form, after the content field (or you can add to the plugin JavaScript settings, or your theme JS file, etc.):

<span class="counter"></span>
<script>
	jQuery(document).ready(function($){
		$('.usp-input-content').keyup(function(){
			var limit = 160; // character limit
			var count = $(this).val().length;
			$('.counter').html(count + ' Characters');
			if (count > limit) {
				alert('Character limit reached!');
				return false;
			}
		});
		$('.usp-submit').click(function(){
			var $textarea = $('.usp-input-content');
			var count = $textarea.val().length;
			var oldContent = $textarea.val();
			var newContent = oldContent + "\n\n" + count;
			$textarea.val(newContent);
		});
	});
</script>

Here you can customize the same things as in the previous technique. Plus you can customize the text/count info that is appended to the submitted post content. To do so, edit the line, oldContent + "\n\n" + count with whatever works.

Require Minimum Number of Characters, Display Character Count

The previous examples limit the maximum number of characters that are allowed. To instead require a minimum number of characters, first make sure that your form includes the USP Pro content shortcode:

[usp_content]

Then, add the following code to the form, after the content field (or you can add to the plugin JavaScript settings, or your theme JS file, etc.):

<span class="counter"></span>
<script>
jQuery(document).ready(function($) {
	$('.usp-input-content').keyup(function(){
		var count = $('.usp-input-content').val().length;
		$('.counter').html(count);
	});
	$('#usp-pro').on('submit', function(e) {
		var limit = 10; // min characters
		var count = $('.usp-input-content').val().length;
		if (count < limit) {
			alert('Minimum character requirement not met!');
			return false;
		} else {
			return true;
		}
	});
});
</script>

As with previous techniques, this snippet also will display the number of characters that the user has entered. You can change the minimum number of characters that are required by editing the 10 to whatever number is desired. You also can customize the popup message, “Minimum character requirement not met!” with whatever works best for your specific goals.