How to Add Number Fields to WordPress Forms
Quantity, age, budget, rating, price—many form questions need numbers, not text. A proper number field ensures users enter valid numeric data, prevents “two” when you need “2”, and can format values as currency, percentages, or decimals automatically. Whether you need a simple quantity picker or a formatted price input, number fields handle it cleanly.
In this guide, you’ll learn how to add and configure number fields in your WordPress forms for accurate numeric data collection.
Why Use Number Fields?
Text Field Problems
- “Two” vs “2” vs “two (2)”
- “$500” vs “500” vs “500.00”
- Letters mixed with numbers
- Inconsistent formatting
- Manual validation needed
Number Field Benefits
- Only numeric input accepted
- Automatic format validation
- Min/max range enforcement
- Step size control (increments)
- Numeric keypad on mobile
- Currency/percentage formatting
- Slider option for visual selection
Common Use Cases
Quantity/Count
- Number of attendees
- Product quantity
- Number of items
- Guest count
Age/Years
- Age in years
- Years of experience
- Duration
Money/Budget
- Budget amount
- Price quotes
- Salary expectations
- Donation amounts
Ratings/Scores
- Rating 1-10
- Satisfaction percentage
- Score out of 100
Measurements
- Height/weight
- Distance
- Dimensions
Adding a Number Field
Step 1: Add Number Field
- Open your form in AFB
- Find the Number field in the sidebar
- Drag it onto your form canvas
- Click to configure settings
Step 2: Set Label and Placeholder
- Label: “Quantity”, “Age”, “Budget”
- Placeholder: Example value or “Enter a number”
- Help text: Additional guidance if needed
Step 3: Configure Range
- Minimum: Lowest allowed value
- Maximum: Highest allowed value
Step 4: Set Step Size
- Step: Increment amount (1, 5, 10, 0.01)
Step 5: Choose Format
- Plain: Standard numbers
- Currency: With currency symbol
- Percentage: With % symbol
- Decimal: Specific decimal places
Configuration Examples
Simple Quantity
Label: “Number of Attendees”
Min: 1
Max: 100
Step: 1
Default: 1
Format: Plain
Required: Yes
Age Field
Label: “Your Age”
Min: 18 (or 0 for all ages)
Max: 120
Step: 1
Format: Plain
Help text: “Must be 18 or older”
Budget Amount
Label: “Your Budget”
Min: 0
Max: 1000000
Step: 100
Format: Currency ($)
Placeholder: “5000”
Help text: “Approximate budget in USD”
Rating Scale (1-10)
Label: “Rate Your Experience (1-10)”
Min: 1
Max: 10
Step: 1
Format: Plain
Help text: “1 = Poor, 10 = Excellent”
Percentage Field
Label: “Project Completion”
Min: 0
Max: 100
Step: 5
Format: Percentage
Help text: “Estimated completion percentage”
Price Quote
Label: “Requested Price”
Min: 0
Max: 99999
Step: 0.01
Format: Currency ($)
Decimal places: 2
Years of Experience
Label: “Years of Experience”
Min: 0
Max: 50
Step: 1
Format: Plain
Default: 0
Discount Percentage
Label: “Requested Discount”
Min: 0
Max: 50
Step: 5
Format: Percentage
Help text: “Maximum 50% discount available”
Min and Max Values
Why Set Limits
- Prevent unrealistic values
- Match business constraints
- Validate input automatically
- Guide user expectations
Common Ranges
| Use Case | Min | Max |
|---|---|---|
| Quantity | 1 | 100-1000 |
| Age (adults) | 18 | 120 |
| Age (all) | 0 | 120 |
| Rating (1-5) | 1 | 5 |
| Rating (1-10) | 1 | 10 |
| Percentage | 0 | 100 |
| Year | 1900 | 2030 |
| Budget ($) | 0 | Varies |
No Maximum
Leave max empty for open-ended fields like “How many employees?” where large values are valid.
Step Size
What Step Size Does
- Controls increment/decrement amount
- Defines valid values between min and max
- Affects up/down arrow behavior
Common Step Sizes
| Step | Example Values | Best For |
|---|---|---|
| 1 | 1, 2, 3, 4, 5… | Counts, ages, ratings |
| 5 | 5, 10, 15, 20… | Quick estimates |
| 10 | 10, 20, 30, 40… | Round numbers |
| 100 | 100, 200, 300… | Budget ranges |
| 0.01 | 1.00, 1.01, 1.02… | Currency (cents) |
| 0.1 | 1.0, 1.1, 1.2… | Decimal values |
| 0.5 | 1.0, 1.5, 2.0… | Half increments |
Step Validation
If step = 5 and min = 0, only 0, 5, 10, 15… are valid. Entering 7 would fail validation.
Number Formats
Plain Numbers
Value: 42
Use for: Counts, ages, quantities, simple numbers
Currency Format
Value: $1,500.00
Use for: Budgets, prices, payments, donations
Options: Currency symbol ($, €, £, etc.)
Percentage Format
Value: 75%
Use for: Completion, satisfaction, probability, discounts
Decimal Format
Value: 3.14159 (specific decimal places)
Use for: Precise measurements, scientific values
Slider Mode
What Slider Mode Does
Converts number input into a visual slider:
Rating: [========|--------] 65
When to Use Slider
- Visual selection preferred
- Approximate values OK
- Range is bounded (min and max set)
- Ratings and percentages
- User doesn’t have exact number in mind
When NOT to Use Slider
- Exact values required
- Wide range (1-1000000)
- User knows specific number
- Precision matters (currency)
Slider Configuration
- Enable slider: Toggle on
- Show value: Display current number
- Slider color: Match your brand
- Min/Max: Define the range
- Step: Slider increments
Slider Examples
Satisfaction (0-100%):
Satisfaction: [=======|-----] 70%
Rating (1-10):
Rating: [======|--------] 6
Budget ($0-$10,000):
Budget: [====|----------] $3,500
Mobile Considerations
Numeric Keypad
- Number fields trigger numeric keyboard
- Easier than full keyboard for numbers
- Reduces input errors
Increment Buttons
- Some browsers show +/- buttons
- Touch-friendly on mobile
- Useful for small ranges
Slider on Mobile
- Touch-friendly dragging
- Works well for ratings
- Consider thumb size for precision
Validation
Built-in Validation
- Numeric only: Rejects letters
- Range: Must be within min/max
- Step: Must match step increments
- Required: Can’t be empty if required
Error Messages
- “Please enter a number”
- “Value must be at least [min]”
- “Value cannot exceed [max]”
- “Please enter a value in increments of [step]”
- “This field is required”
Custom Validation
Beyond basic validation:
- Must be even/odd
- Must match specific pattern
- Depends on other field value
Default Values
When to Set Default
- Most common value is known
- Starting point helps user
- Quantity defaults to 1
- Slider needs starting position
When NOT to Set Default
- User must actively choose
- No obvious common value
- Biasing would skew data
Common Defaults
- Quantity: 1
- Rating: None (force choice) or middle
- Percentage: 0 or 50
- Budget: None (user must enter)
Use Case Deep Dives
Event Attendance
How many people will attend? [Number field: min 1, max 500, step 1, default 1]
Why: Enforce minimum 1, cap at venue capacity
Job Application: Experience
Years of relevant experience: [Number field: min 0, max 50, step 1]
Why: Allow 0 for entry-level, reasonable max
Quote Request: Budget
What is your budget for this project? [Number field: min 500, max 100000, step 100, currency $]
Why: Minimum project size, formatted as money
Feedback: Rating
Rate our service (1-5): [Number field: min 1, max 5, step 1, slider]
Why: Visual slider for quick rating
Order Form: Quantity per Item
Quantity: [Number field: min 1, max 99, step 1, default 1]
Why: At least 1, reasonable max per item
Troubleshooting
User Can’t Enter Decimals
- Check step size (step=”1″ blocks decimals)
- Set step=”0.01″ or step=”any” for decimals
Value Rejected Despite Being Valid
- Check min/max boundaries
- Check step alignment
- Verify format settings
Mobile Shows Wrong Keyboard
- Ensure field is type=”number”
- Some formats may affect keyboard
Slider Not Showing
- Verify slider mode is enabled
- Check min and max are set
- Save and refresh form
Frequently Asked Questions
Should I use number field or text field for phone numbers?
Use a dedicated Phone field, not Number. Phone numbers have formatting (dashes, parentheses) that number fields don’t handle well, and leading zeros matter in phone numbers.
How do I allow negative numbers?
Set minimum to a negative value (e.g., min: -100) or leave it empty to allow any negative.
What’s the difference between number field and range slider?
They’re often the same field with slider mode toggled. Number field shows text input by default; slider mode shows the visual slider.
Can I have commas in large numbers (1,000,000)?
Depends on format settings. Currency format typically adds thousands separators. For display, yes. For raw input, usually not.
How do I collect decimal values like 3.5?
Set step to a decimal (0.1, 0.5, 0.01) or step=”any” to allow any decimal precision.
Summary
Adding number fields to WordPress forms:
- Add Number field – Drag to form
- Set clear label – What number is being requested
- Configure min/max – Enforce valid ranges
- Set step size – Control increments
- Choose format – Plain, currency, percentage
- Consider slider – For ratings and visual selection
- Set default if appropriate – Common starting value
- Add help text – Explain expected values
Conclusion
Number fields ensure clean, validated numeric data. Set appropriate ranges to prevent unrealistic values, use step sizes to control precision, and choose formats that match your data type—currency for money, percentage for rates, plain for counts. Slider mode adds visual appeal for ratings and bounded values. The result: consistent, usable numeric data without manual cleanup.
Auto Form Builder includes flexible Number fields with min/max ranges, step sizes, multiple formats (plain, currency, percentage, decimal), and slider mode. Collect numeric data accurately and professionally.
Ready to add number fields? Download Auto Form Builder and create forms with proper numeric input validation.
