Number Fields

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

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

Available options for number and number*
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

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

Available options for range and range*
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"]

Just another contact form plugin for WordPress. Simple but flexible.