Collect a single numeric value from the visitor — amounts, quantities, rates, durations, or percentages. The value is exposed as a variable (by Name) for use in formulas and results.
In the builder: Elements → Form Widgets → Number
Widget Settings
Select the widget on the canvas, then open the Element tab in the right sidebar.
Variable
| UI field | Description |
|---|---|
| Name | Variable name for formulas (required). Use snake_case, e.g. loan_amount, avg_length. |
| Value | Default number shown when the form loads, e.g. 250000 or 5. |
If Value starts with =, it is treated as a formula (computed default). Click Formula Editor to build it. Most number inputs use a plain numeric default.
Min Value / Max Value / Step
Shown directly under Variable for Number widgets:
| UI field | Description |
|---|---|
| Min Value | Lowest allowed value. |
| Max Value | Highest allowed value. |
| Step | Increment for spinner / keyboard arrows, e.g. 1, 0.01. |
These limits also appear in the Validation section (see below).
Field Option
| UI field | Description |
|---|---|
| Label | Text shown above the field. Supports [icon] shortcodes via the draw icon. |
| Placeholder | Hint text when the field is empty. |
| Status | See Status below. |
| Decimal Places | How many decimal digits to use when displaying and parsing the value, e.g. 0 for whole dollars, 2 for cents. |
| Prefix | Text or icon before the number, e.g. $ or [currency]. |
| Suffix | Unit after the number, e.g. USD, %, min. |
Status
| Value | Behavior |
|---|---|
| Editable | Visitor can type and change the value (default). |
| Readonly | Value is visible and included in formulas, but the visitor cannot edit it. |
| Disabled | Field is greyed out and inactive. The visitor cannot interact with it; use when the field should not apply in the current context. |
Validation
Expand the Validation accordion:
| UI field | Options | Purpose |
|---|---|---|
| Required | Required / Optional |
Visitor must enter a value before submit actions. |
| Min | Number | Minimum accepted value (matches Min Value). |
| Max | Number | Maximum accepted value (matches Max Value). |
Visibility
Expand Visibility to show or hide the widget based on an active View Mode or a formula. See Show and Hide Fields with Conditional Logic.
| UI field | Description |
|---|---|
| Show | Always or Conditionally |
| Active mode is | Name of the View Mode that must be active for this widget to appear (when Show is Conditionally). |
| Formula result is positive | Optional formula; evaluated on Calculate |
Design
Expand Design to style individual parts of the widget. Prefer project themes for a consistent look; per-widget styling is optional.
| Part | What it represents |
|---|---|
| Label | The text above the field (Label in Field Option). |
| Control Area | The region around the input — padding, background, and layout of label + field together. |
| Number Field | The bordered group that wraps prefix, input, and suffix (.cp-number-field). |
| Input | The editable number field where the visitor types. |
| Prefix | The text or icon shown before the value (e.g. $). |
| Suffix | The unit shown after the value (e.g. USD, %). |
Custom CSS — useful selectors and classes:
| Selector / class | Targets |
|---|---|
#cp-{ID} |
Entire widget (ID from the Element panel header). |
| Custom CSS Classes | Classes you add in Design; applied to the outer widget container. |
.cp-number-field |
Prefix + input + suffix group. |
.cp-prefix |
Prefix span. |
.cp-suffix |
Suffix span. |
input[name="{Name}"] |
The input for a given variable Name. |
Using the value in formulas
Reference the Name in any formula:
= loan_amount * interest_rate / 100
= avg_length * num_videos * 25
See Understanding Formulas and Variables.
Number vs Range Slider
| Number | Range Slider | |
|---|---|---|
| Input style | Typed number | Slider control |
| Best for | Exact amounts, wide ranges | Visual tuning within a bounded range |
| Palette | Form Widgets → Number | Form Widgets → Range Slider |
Use Number when visitors need to type precise values (loan amount, invoice total). Use Range Slider when exploring a range feels more natural (number of videos 1–20).