9. Number fields

Created by Danny Wong, Modified on Sun, 09 Aug 2020 at 03:38 PM by Danny Wong

A number field is a field for numeric value input. Contact Form 7 3.4 and higher provides two types of form-tag for number fields: number and range. These work the same except that they provide different types of user interface.

The new form-tag types, number and range, correspond with the HTML5 input types number and range, respectively. Currently, only some modern browsers support these input types.

Even among modern browsers, there may be differences in how those input fields are rendered on screen. In most cases, a number input is rendered as a spinner control while a range input is rendered as a slider control.

Older browsers and some modern browsers don’t support these input types and just render them as traditional text input fields.

Number field#Number field

Both number and number* are used for number input and accept numeric value. number* is a required field.

OPTION	EXAMPLES	DESCRIPTION
min:(num)	`min:10`	`min` attribute value of the `input` element. Allowed minimum value for this field.
max:(num)	`max:99`	`max` attribute value of the `input` element. Allowed maximum value for this field.
step:(num)	`step:3`	`step` attribute value of the `input` element. When minimum number is 10 and step is 3, acceptable inputs are 10, 13, 16, 19, …
id:(id)	`id:foo`	`id` attribute value of the `input` element.
class:(class)	`class:bar`	`class` attribute value of the `input` element. To set two or more classes, you can use multiple `class:` option, like `[number your-text class:y2008 class:m01 class:d01]`.
placeholder watermark		Use the value as placeholder text instead of as default value. watermark works as an alias of placeholder

These fields can have a zero or one value, and the value will be used as the default value of the input field.

Example:

[number* your-number min:10 max:99 step:3 class:required "40"]

Range field#Range field

Both range and range* are used for number input and accept numeric value. range* is a required field.

OPTION	EXAMPLES	DESCRIPTION
min:(num)	`min:10`	`min` attribute value of the `input` element. Allowed minimum value for this field.
max:(num)	`max:99`	`max` attribute value of the `input` element. Allowed maximum value for this field.
step:(num)	`step:3`	`step` attribute value of the `input` element. When minimum number is 10 and step is 3, acceptable inputs are 10, 13, 16, 19, …
id:(id)	`id:foo`	`id` attribute value of the `input` element.
class:(class)	`class:bar`	`class` attribute value of the `input` element. To set two or more classes, you can use multiple `class:` option, like `[number your-text class:y2008 class:m01 class:d01]`.
placeholder watermark		Use the value as placeholder text instead of as default value. watermark works as an alias of placeholder

These fields can have a zero or one value, and the value will be used as the default value of the input field.

Example:

[range* your-range min:10 max:99 step:3 class:required "40"]