Contact Form 7 4.1 で maxlength と minlength のオプションがいくつかのフォームタグに、また Twitter 風の文字数カウントのための新しいタイプのフォームタグが導入されます。

最大、最小長オプション

maxlength と minlength は、入力項目の最大・最小許容文字数を指定する同名の HTML5 属性に基づくものです。

maxlength と minlength の両方をサポートするフォームタグのタイプは: text、textarea、email、url、tel、quiz、captchar (CAPTCHA 応答) です。これらのフォームタグから quiz と captchar を除いたものでは、文字数に基づいたユーザー入力検証もサポートされます。

例:

[textarea* your-message minlength:10 maxlength:140]

この例の textarea フォームタグの場合、入力値が10文字に満たないか140文字を超える場合に検証エラーメッセージが表示されることになります。ただそれ以前に、大半のブラウザーでは maxlength の制限を超えて入力できないようになっていますが。

最大長オプション指定の古いフォーマット(例: [textarea* your-message 40/140])も引き続き利用可能です。maxlength が明示的に指定されていればそちらが優先されます。

文字数カウント

maxlength オプションを指定した入力項目に文字数カウントを付けたいと思うことでしょう。今何文字入力したかとか、最大許容文字数まであと何文字残っているか、示してくれるもののことです。

文字数カウントを追加するには count フォームタグをフォームに挿入します。count は文字数カウントの整数値を表示するためのただのプレースホルダーです。対象となる入力項目と同じ名前をタグに指定する必要があります。

例えば、次のような項目(名前 = “your-message”)があるとします:

[textarea* your-message minlength:10 maxlength:140]

この項目に文字数カウントを付けるには、[count your-message] を追加します:

[textarea* your-message minlength:10 maxlength:140]
[count your-message]

デフォルトでは、count は対象の項目の現在の文字数を表示します。従って、整数値は入力するごとに大きくなります。

これを反転させて、対象の項目の最大許容文字数までの残り文字数を表示させるには、count フォームタグに down オプションを追加します:

[textarea* your-message minlength:10 maxlength:140]
[count your-message down]

この場合、count は始めに “140” を示し、入力するごとに小さくなっていき、140文字入力した時点で “0” になります。

デモ

上のフォームのソース:

[textarea* your-message minlength:10 maxlength:140]
[count your-message]

[textarea* your-message-2 minlength:10 maxlength:140]
[count your-message-2 down]