Adding a Number Field in WordPress: A Range Slider Alternative

Are you searching for a way to allow users to enter numbers in your WordPress form for ordering, rating, surveys, or calculations? The Number field is your ultimate solution for all things numerical!

In today’s guide, we will look at how you can add a Number field in WordPress and leverage it along with a Calculations feature, which is also free. Let’s get started!

Table of contents

1. How to add a Number field to your form
2. Understanding Calculations feature

3. How to use a Number field with Calculations

1. How to add a Number field to your form

At Ninja Forms we believe in offering essential tools without barriers. That’s why all form fields — including the Number field — are part of our free core plugin. It is super easy to add any form field to your form. To add a Number field, click Add new field and navigate to Miscellaneous fields.

Once you add the Number field to your form, you will see multiple settings available for this field. To access them all, make sure you have the developer mode enabled. This will let you unlock all the hidden features. (Don’t worry, it’s free!)

2. Understanding Calculations

Before we jump into using a Number field with Calculations, let’s cover some essential points about performing calculations within your form.

First, to use calculations with Ninja Forms, you need to use a form field that supports Calculation Value. Second, you need to create the calculation itself.

Let’s talk about the Calculation Value first.

In simple terms, it’s a value that is transmitted to any calculations referencing that field, either directly or after being totaled. You might be wondering, “How can I identify if the form field supports Calc Value?”

No worries! Just check the settings of your form field for the Calc Value option. This is illustrated in the example below for a Radio List field.

The following Ninja Forms fields have a Calc Value setting and can be used in calculations:

• Single Checkbox: Let customers select a single item
• Checkbox List: Let customers select one or more items
• Select List: Let customers select a single item from a dropdown
• Multi-Select: Let customers select one or more items from a dropdown
• Radio List: Let customers select a single item from a list
• Select Image: Let customers select one or more items with an image
• Number: Let customers enter a value

Now let’s look briefly at how we can create a simple calculation itself. Navigate to the Advanced tab of Ninja Forms form builder and click Calculations.

Click “Add New” to add a calculation to your form and name your calculation under the Variable Name.

You will use the Calculation name to reference the calculation in other places, including displaying the value in the form itself or in any actions. Now, create the calculation.

Using the “Merge Tags” icon in the “Equation” text area, choose the fields you want to use in your calculation. You may multiply (*), divide (/), add (+), or subtract (-) any two fields.

💡 Quick Tip – Want to stop Ninja Forms from rounding results in your Calculations? Remove the number 2 from the Decimals section. Instead, enter the number 1 into Decimals if you want to allow numbers such as 1.3.

For an in-depth guide on creating calculations, check our Calculations documentation or learn how you can create conditional calculations with the Conditional Logic add-on from Ninja Forms!

3. How to use a Number field with Calculations

Here’s the thing: the Number field doesn’t provide a space to input the Calculation value. Instead, it allows customers to directly enter a numerical value. They can choose to type in the number manually or use the arrows to select their desired quantity.

The Number field also provides a range option allowing you to specify both minimum and maximum quantities that users can input.

For example, if you’re selling limited-edition items and want to restrict customers to purchase a maximum of 5 pieces, you can set the quantity range accordingly by entering 5 as the maximum limit – Max.

• Radio List field (poster size)
• Select Image field (type of poster)
• Number field (quantity)

As you can see, we assigned a Calc Value to each image in our Select Image field. This is necessary for the calculation to work. The user will then input the number of posters he wants to purchase in the Quantity Needed so you can calculate the total. 

Here is a look at the calculation:

We named the Calculation “Total” and selected the Select Image field to Equation plus we added the Radio List field (poster size) and multiplied it with the Number field (Quantity Needed). This will give us the total amount users have to pay for the selected product.

To display the total amount from your calculation on the form, use the HTML field and place the calculation’s merge tag into the HTML field’s text editor.

Put whatever text or symbols you want before or after (currency) such as: Total: $ before the Calculation merge tag {calc:total}

You’ve conquered the Number field from Ninja Forms!

High five for exploring another free Ninja Forms field you can use on your online forms. ✋ Do you want to become an experienced form creator who understands WordPress form fields from A to Z? Check out our article 10 WordPress Form Fields You Should Master, and feel the power of a truly free contact form plugin on the WordPress scene!

With Ninja Forms, you’re getting much more than just a contact form plugin. You’re accessing a powerful toolkit that empowers your form-building and brings you closer to your potential customers.

One of our core values is people first and we stand behind it! With Ninja Forms, you have the freedom to create forms that perfectly suit your needs, without having to spend a cent. Download our free core plugin and access form fields at no cost and free features  you’ll instantly fall in love with. Try Ninja Forms today!