How to Limit Range Allowed in Numbers Field

Introduction

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.

If you use a Number Slider instead of a Numbers field, there is already a built-in option to limit the numbers without the need for any code snippets. For more information on using the Number Slider, please see this documentation.

Creating the form

First, we’ll begin by creating our form and adding our Numbers field to the form. If you need assistance with creating your form, please check out this documentation.

begin by creating your form and adding your fields including at least one Numbers field

Adding the CSS class

Next, we’re going to add a CSS class to the field to make sure that anytime there is a Numbers field with this particular class, this snippet would be called into action. To add a CSS class to a field, open the form builder, click the Numbers to open the Field Options panel. Then click Advanced and in the CSS Classes, add wpf-num-limit .

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

Adding the snippet

Now it’s time to add the snippet. If you need assistance with how and where to add snippets,
please review this tutorial.

This snippet will apply a minimum value of 5 and a maximum value of 20 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':5, 'max':20} ); // Define number limits
        });

    </script>
    <?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_num_limit', 30 );

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.

now you can limit the number range using the CSS class once the script has been added

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 multiple fields and forms?

A: Of course! Once the snippet is added and active on your site, you only need to add the CSS class to any form and any field to have this trigger the snippet.

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

A: Absolutely! Any field including the Single Item form field can use this code snippet to restrict the number providing the CSS class was added.

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 );