ContactForm7で文字数制限をする方法

シェアする

こんにちは、イナフクカズヤ(@Inafuku_Kazuya)です。ContactForm7の13記事目です。

今回は文字数を制限する方法です。

そんな方法があるのだろうか?と思って調べてみたのですが、公式サイトにmaxlengthとminlength を使えば、入力項目の最大・最小許容文字数を設定できるとありました。

対応しているのはtext、textarea、email、url、tel、quiz、captchar (CAPTCHA 応答)です。

では、今回はtextareaに最大・最小許容文字数を設定して文字数を制限してみたいと思います。

Contents

ContactForm7で文字数制限

参考サイトには下記のタグが参考に記載さているので、こちらを試してみます。
(your-messageはすでにあるのでyour-message2にします。)

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

(タグ名your-messageの部分は該当するものに変更してください。)

これで、最小文字数は10文字、最大文字数は140文字と文字数を制限できます。

ただ、このままだと文字数制限についてユーザーが気付きません。そのため、文字数カウントを表示します。やり方は簡単で[count your-message2]か[count your-message2 down]を追加します。

[count your-message2]

こちらは0から順に文字数が増えていきます。

[count your-message2 down]

こちらは最大文字数から残り何文字という風に数字が減ってカウントしていきます。

下記の画像をご確認ください。▼

イナフクカズヤと書くと
[count your-message2]は7と数字が増えます。
[count your-message2 down]は133と数字が減ってカウントされているのがわかります。

さいごに

お問い合わせで文字数制限をしているフォームはよくみかけますが、デフォルトだと対応できないように思ってました。

調べてみると案外カンタンでしたね。ContactForm7で文字数制限したい方はぜひ試してみてください。

お問い合わせはこちら