How to Limit Range Allowed in Numbers Field

Overview

Would you like to limit the range allowed in the Numbers Field with WPForms? Using JavaScript you can limit the number a user selects no more than a certain number. This tutorial will show you how to use a custom code snippet to easily achieve limiting the range for your Numbers field.

In HTML, the numbers input element allows for min and max attributes, which define the minimum and maximum values that can be added to the input field.

Setup

In the snippet below, we’ll use jQuery to add min and max attributes to specific Numbers field in WPForms.

1) Adding the JavaScript

Adding this code will apply a minimum value of 23 and a maximum value of 40 to any Numbers field with a CSS class named wpf-num-limit.

/**
 * Limit number range allowed for a Numbers field
 * Apply the class "wpf-num-limit" to the field to enable.
 *
 * @link https://wpforms.com/developers/how-to-limit-range-allowed-in-numbers-field/
 *
 */

function wpf_dev_num_limit() {
    ?>
    <script type="text/javascript">
        jQuery(function($){
            $('.wpf-num-limit input').attr({'min':23, 'max':40}); // Define number limits
        });
    </script>
    <?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_num_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.

Next, add wpf-num-limit to the CSS Classes field.

Adding the CSS class will now limit the range allowed for the number field

Once you’ve saved the form, users will now see a validation error if they add a number that falls outside of the range defined in that code.

Using a small JS snippet you can set a min and max number allowed on the numbers field

And that’s it! You’ve now set a minimum and a maximum number allowed for your Numbers field. Would you like to change the required field indicator? Take a look at our article on How to Change Required Field Indicator.

Action Reference: wpforms_wp_footer_end

FAQ

Q: Can I use this for pricing items as well?

A: Absolutely! Any number field including the Single Item form field can use this code snippet to restrict the amount.

You can also use this same code snippet to limit the amount of donations you can accept at a time.

Q: Will this work on any number field?

A: This concept will work on any number field, including payment fields providing that the max is under 999.

Q: Can I only have even numbers?

A: Absolutely! To only use even numbers, you would add another aspect to the snippet. Using step you can define the multiples the numbers can go up by to be an accepted input for the field.

/**
 * Limit number range in multiples of 2
 * Apply the class "wpf-num-limit" to the field to enable.
 *
 * @link https://wpforms.com/developers/how-to-limit-range-allowed-in-numbers-field/
 *
 */

function wpf_dev_num_limit() {
    ?>
    <script type="text/javascript">
        jQuery(function($){
			
			// Minimum accepted number is 20
			// Maximum accepted number is 40
			// Only accept multiples of 2
			$('.wpf-num-limit input').attr({'min':20, 'max':40, 'step': 2}); 
			
        });
    </script>
    <?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_num_limit', 30 );

Q: Can I use this on multiple forms with different number ranges?

A: Of course! You would just need to use a different CSS class name for this. In this example, we’re using the wpf-num-limit-max-under–twenty and wpf-num-limit-max-under-fifty.

/**
 * Two different CSS classes in the same function
 * Apply the class "wpf-num-limit" to the field to enable.
 *
 * @link https://wpforms.com/developers/how-to-limit-range-allowed-in-numbers-field/
 *
 */

function wpf_dev_num_limit() {
    ?>
    <script type="text/javascript">
        jQuery(function($){
			
			// Minimum accepted number is 21
			// Maximum accepted number is 50
			$( '.wpf-num-limit-max-under-twenty input' ).attr({ 'min':0, 'max':20 }); 

			$( '.wpf-num-limit-max-under-fifty input' ).attr({ 'min':21, 'max':50 }); 
			
        });
    </script>
    <?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_num_limit', 30 );