Would you like to limit the range allowed in the Numbers Field with WPForms? You can utilize JavaScript to establish an upper limit on the value a user can select. In this tutorial, we’ll guide you through implementing a custom code snippet to effortlessly enforce limits on the range for your Numbers field.
It’s worth noting that in HTML, the numbers input element offers the min and max attributes, allowing you to define both the minimum and maximum values that can be entered into the input field.
If you opt for a Number Slider instead of a Numbers field, you’ll find a built-in feature that enables you to impose number limits without the necessity of code snippets. For detailed guidance on using the Number Slider, please refer to this documentation.
Creating the form
Let’s kick things off by crafting our form and incorporating the Numbers field into it. If you require any guidance on creating your form, please consult this documentation for step-by-step instructions.
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 .
Limiting the range allowed
Now, let’s integrate the snippet. If you need assistance regarding how and where to insert code snippets, please refer to this comprehensive tutorial for guidance.
This particular snippet enforces a minimum value of 5 and a maximum value of 20 for any Numbers field featuring a CSS class labeled 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(){
// Enter 5 minimum (5) and maximum (20) amount for the number field
jQuery( '.wpf-num-limit input' ).attr({ 'min':5, 'max':20 } );
});
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_num_limit', 30 );
After saving the form, users will encounter a validation error if they attempt to input a number falling outside the defined range in the code.
That concludes the process! You have successfully set both a minimum and maximum value permitted for your Numbers field. If you wish to customize the required field indicator, you can explore our article on How to Change the Required Field Indicator for further details.
Reference Action
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
jQuery( '.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 set to 0, maximum set to 20
jQuery( '.wpf-num-limit-max-under-twenty input' ).attr({ 'min':0, 'max':20 });
// Minimum set to 21, maximum set to 50
jQuery( '.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 );
Q: Can I customize the error message?
A: Absolutely! If you’d like to customize an error message, you could use this snippet.
/**
* 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(){
// Minimum 5, maximum 20
jQuery( '.wpf-num-limit input' ).attr({ 'min':5, 'max':20 } ); // Define number limits
});
// Message to be displayed if the min and or max is not met
jQuery.extend(jQuery.validator.messages, {
max: jQuery.validator.format( "We apologize, there can only be a max allowance of {0}." ),
min: jQuery.validator.format( "We apologize, there needs to be a minimum allowance of {0}." )
});
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_num_limit', 30 );