数値入力項目

Contact Form 7 3.4 以上では数値入力に対応した2種類のフォームタグnumberrange を使用できます。この二つはユーザーインタフェイスの違い以外はほとんど同じ働きをします。

numberrange はそれぞれ HTML5 で導入された新しい入力タイプ numberrange に対応しています。現時点では一部の最新ブラウザのみこれらの入力タイプをサポートしています。

これらの入力タイプのフィールドが画面上にどのように表示されるかについては最新のブラウザの間でも差異があり得ます。ですが多くの場合は number はスピナー方式の入力として、range はスライダー方式の入力として表示されるはずです。

古いブラウザや、最新のブラウザでもこれらの入力タイプをサポートしないものは、これらの入力フィールドを従来型のテキスト入力フィールドとして表示します。

数値入力項目 (number)

numbernumber* は数値入力項目です。number* は必須入力の項目です。

オプション使用例説明
min:(num)min:10input 要素の min 属性値。入力可能な最小値を示す。
max:(num)max:99input 要素の max 属性値。入力可能な最大値を示す。
step:(num)step:3input 要素の step 属性値。最小数値が 10 でステップが 3 のとき、受け入れられる入力値は 10、13、16、19、… となる。
id:(id)id:fooinput 要素の id 属性値。
class:(class)class:barinput 要素の class 属性値。2個以上のクラスを設定する場合は複数の class: オプションを [number your-text class:y2008 class:m01 class:d01] のようにして並べる。
placeholder
watermark
 値をデフォルト値として使わず、プレースホルダーとして使う。watermark は placeholder のエイリアス。
autocomplete:(value)autocomplete:bday-yearフォーム自動補完のためのオプション

これらの項目では1個までの値を持つことができ、この値は入力項目のデフォルト値として使われます。

例:

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

数値入力項目 (range)

rangerange* は数値入力項目です。range* は必須入力の項目です。

オプション使用例説明
min:(num)min:10input 要素の min 属性値。入力可能な最小値を示す。
max:(num)max:99input 要素の max 属性値。入力可能な最大値を示す。
step:(num)step:3input 要素の step 属性値。最小数値が 10 でステップが 3 のとき、受け入れられる入力値は 10、13、16、19、… となる。
id:(id)id:fooinput 要素の id 属性値。
class:(class)class:barinput 要素の class 属性値。2個以上のクラスを設定する場合は複数の class: オプションを [range your-text class:y2008 class:m01 class:d01] のようにして並べる。
placeholder
watermark
 値をデフォルト値として使わず、プレースホルダーとして使う。watermark は placeholder のエイリアス。
autocomplete:(value)autocomplete:bday-yearフォーム自動補完のためのオプション

これらの項目では1個までの値を持つことができ、この値は入力項目のデフォルト値として使われます。

例:

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

WordPress のお問い合わせフォームプラグイン。シンプル、でも柔軟。