Collecting numerical values with number and range fields

Need to collect numerical info from visitors such as number ranges, pricing estimates, percentages etc?

When building your ConvertFlow form, rather than using the "text" custom field which allows for alphabetical values, switch to either the "number" custom field type or the "range" custom field type.

Number custom fields

By choosing the "number" field type, you'll be able to set the label, placeholder, etc. However, because the input value will be limited numbers, you can also define the minimum and maximum input.

Range custom fields

By using the "range" custom field type, visitors will now have a sliding range input they can use to quickly input a number in the form.

The range field type has lots of options to customize how the range field works.

Numerical value type

This helps if you want to format the outputted value as something different than a simple integer (integer example: 5), such as formatting the output as a currency amount (currency example: $1000) or a percentage output (percentage example: 100%).

Numerical range type: Minimum/Maximum

By default, range fields will be a simple range between a minimum and a maximum number. 

You can control how much the range slider increments (example: increment 3 at a time), as well as the minimum and maximum value of the ranges.

You'll also notice you can toggle whether minimum and maximum labels show below the field, along with the option to replace these minimum/maximum labels with custom text like "Less likely" and "More likely".

Last, there's an option to have multiple handles for the range field, so visitors can choose a lowest and highest value, which outputs a hyphen separate value ($100 - $1000) to the contact field.

Numerical range type: Increments

By switching to the "increments" range type, you'll have the ability to add multiple fixed options to the field, which visualize multiple levels for the range field.

Using increments helps when you want to limit the range field values to predefined options.

If you want to allow visitors to input granular values in between your increments, un-toggle the "Limited selection to increments" setting. 

This will visualize each increment below the range field, while allowing dragging between each increment. 

It will also increase the rate at which the range number value increments relative to the difference between each increment, making it easier to select large numbers.

Styling the range field

Range fields inherit design styles from your form element options, so controlling design options such as field color, field border, label color etc. will effect your range field.

You can also control the handle style, with the ability to switch between a rectangle, square or circle handle.

To control the handle color options, click the advanced settings icon next to the "Range Field Handle".