Number Tags

A Number Tag is designed for numeric user input. Contact Form Redux features two types of Number Tag inputs that create the following HTML5 inputs:

  • number, which displays in most browsers as a spinner
  • range, which in most browsers displays as a slider

The output is the same, only the user interface between the two differs.

Number Type

The number type can be either optional (number) or required (number*).

Options

  • id:id – adds the id attribute to the tag
  • class:class – adds a class attribute to a tag. Multiple classes can be added by using more than one class:class declaration in the tag.
  • min:number – adds the min attribute to the tag, setting the minimum value allowed
  • max:number – adds the max attribute to the tag, setting the maximum allowable value
  • step:number – adds the step attribute to the tag, setting the increments of the UI element
  • placeholder – sets the Placeholder Text for the tag

Values

The Number Tag can have a zero or greater value. If a value is set, it will be used as the default value for the Number Tag.

Example

The following example shows the tag for a required Number Tag with a name of “your-number,” a minimum value of 5, a maximum value of 35, and default value of 10:

[number* your-number min:5 max:35 step:5 "10"]

Range Tag

A Range Tag can be set as optional (range), or required (range*).

Options

  • id:id – adds the id attribute to the tag
  • class:class – adds a class attribute to a tag. Multiple classes can be added by using more than one class:class declaration in the tag.
  • min:number – adds the min attribute to the tag, setting the minimum value allowed
  • max:number – adds the max attribute to the tag, setting the maximum allowable value
  • step:number – adds the step attribute to the tag, setting the increments of the UI element
  • placeholder – sets the Placeholder Text for the tag

Values

A Range Tag can have a zero or greater value. If a value is set, it will be used as the default value for the tag.

Example

[range* your-range min:10 max:20 step:2 "12"]