How to Limit the Number of Characters for a Text Field

Overview

Would you like to limit the number of characters for a Single Line Text or Paragraph Text form fields? There may be times where limiting the number of characters allowed in a field would be useful to your form. In this tutorial, we’ll show you how to limit the number of characters in these fields using JavaScript.

When creating an HTML form, it’s possible to add a maxlength attribute to any input box.

Since WPForms generates all field HTML for you, you can instead add the maxlength attribute using jQuery.

Setup

Adding this code will apply a maximum value of 40 to any Single Line Text form field or Paragraph Text form fields on your form using a CSS class named wpf-char-limit.

To use this snippet, please follow the steps below.

1) Adding the JavaScript

Add this code to your site.

/**
 * Limit number of characters allowed for an input/textarea field
 * Apply the class "wpf-char-limit" to the field to enable.
 *
 * @link https://wpforms.com/developers/how-to-limit-the-number-of-characters-for-a-text-field/
 *
 */
function wpf_dev_char_limit() {
	?>
	<script type="text/javascript">
		jQuery(function($){
			$('.wpf-char-limit input').attr('maxlength',40); // Change number to character limit (input fields)
			$('.wpf-char-limit textarea').attr('maxlength',40); // Change number to character limit (paragraph fields)
		});
	</script>
	<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_char_limit', 30 );

2) Adding the CSS class

To add this class to a field, you’ll need to open the form builder, click the field to open its Field Options panel, and open the Advanced Options section.

In the CSS Classes just add the wpf-char-limit.

Add character limit class to input field

Since this code will simply enforce a character limit, it’s also a good idea to let your users know about this limit within the field description.

For shorter character limits, or other format requirements, please consider using a custom input mask instead of the code below.

And that’s it! You’ve now limited the text allowed in these fields using JavaScript. Would you like to limit the number range allowed in a Numbers field on your form? Please visit our tutorial on How to Limit Range Allowed in Numbers Field.

Action Reference: wpforms_wp_footer_end