Contact Form 7で文字数制限する方法と文字数カウントを表示する方法

こんにちは。

ゆうや（@yuyaphotograph）です！

この記事では、

という方のお悩みを解決します！

記事の前半で、文字数制限する方法を紹介して、後半ではテキストエリアの下に文字数カウントを表示させる方法を紹介します。

それでは見て参りましょう〜！

Contact Form 7で文字数制限するには？

プラグインの公式サイトによると、文字数制限を設定できるフォームタグは以下の7つです。

文字数制限の設定は至って簡単です。

制限をかけたいフォームタグに「maxlength:制限したい文字数」を追記してやるだけ！

例えばテキストエリア（your-message）の入力文字数を200文字に制限したい場合は、以下のようにします。

[textarea* your-message maxlength:200]

超簡単ですね！

Contact Form 7で文字数カウントを表示するには？

文字数制限をかけた項目には「いま何文字入力したのか？制限文字数まで残り何文字なのか？」がリアルタイムで分かるように文字数カウントを設置してあげるとユーザーに優しいですよね。

プラグインで用意されているcountフォームタグを使うとほんの数秒で文字数カウントを表示させることができます。

Contact Form 7で実装できる文字数カウントは以下の2パターンです。

例えば、your-messageという名前のテキストエリアがあって文字数制限は200文字にしているとします。

その場合、文字数カウントを表示するにはcountタグに対象のテキストエリアの名前を指定してあげます。

[textarea* your-message maxlength:200]
[count your-message]

上記のように書くと単純に現在の文字数を表示する文字数カウントを設置することができます。

逆に、残り何文字かを表示したい場合はcountタグの最後に「down」を追加してやるだけで実装できます。

[textarea* your-message maxlength:200]
[count your-message down]

文字数制限・文字数カウントのサンプル

テキストエリアに50字の文字数制限をかけ、その文字数をリアルタイムで表示する文字数カウントのサンプルがこちら！

実際に動かしてみて文字数カウントできているか確認してみてください〜！

50字を超えて入力しようとしても先に進めないのが分かると思います笑

まとめ

文字数制限はともかく、文字数カウントのリアルタイム表示は少しめんどくさいのかな〜と思っていたのですが調べてみるとこんなにもサクッと実装できて驚きました！笑

ぜひみなさんも試してみてください〜

Contact Form 7記事まとめ

Contact Form 7を使うときに役立つ記事まとめ