### [How to Limit Range Allowed in Numbers Field](https://wpforms.com/developers/how-to-limit-range-allowed-in-numbers-field/)

**Published:** October 27, 2020
**Author:** Umair Majeed

**Excerpt:** This tutorial will show you how you can limit the range for a Numbers field. 

**Content:**

Would you like to limit the range allowed in the Numbers Field with WPForms? There are several ways to set minimum and maximum values for numeric input.

This tutorial will show you the available methods to implement range limits in your forms.

## Setting Up 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](https://wpforms.com/docs/creating-first-form/ "Creating Your First Form").

![begin by creating your form and adding your fields including at least one Numbers field](https://wpforms.com/wp-content/uploads/2022/08/wpforms-create-form-limit-numbers.jpg)## Setting Up Basic Range Limits

The Numbers field includes range controls in the Field Options panel. Simply enter your minimum and maximum values in the **Range** fields to restrict user input.

![](https://wpforms.com/wp-content/uploads/2025/02/numbers-field-range-1-1024x430.png)For more details about the Numbers field’s features, check out our guide on [using the Numbers field](https://wpforms.com/docs/using-the-numbers-field).

## Implementing Advanced Range Controls

For specialized requirements such as enforcing even numbers or custom validation messages, you can use JavaScript to implement custom range controls. If you need guidance on adding code snippets, please refer to this guide on [adding custom code in WordPress](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/).

### Adding the CSS class

First, 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](https://wpforms.com/wp-content/uploads/2022/08/wpforms-add-the-css-class-limit-numbers.jpg)### Adding the Code Snippet

Now, let’s integrate the snippet.

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() {
    ?>

**Categories:** Fields

**Tags:** Javascript, JS

---