言葉の使い方を中心にブログ運営・フリーランスに関することなど、ライティングの仕事に関わる情報を広く紹介するブログです。

Kotoログ

WordPressプラグイン

Contact Form7のお問い合わせフォームに文字数制限・文字数カウントを付ける方法

投稿日:2017年1月20日 更新日:

<この記事を読むのに必要な時間は約 4 分です>

今回の記事では、Contact Form7で設置したお問い合わせフォームの本文に「文字数制限」や「文字数カウント」を付ける方法を紹介します。

問合せフォームに文字数制限・文字数カウントを設定する

Contact Form7で追加したお問い合わせフォームには、文字数制限や文字数カウント(実際に入力した文字数または入力可能な文字の残数を表示する)を付けることができます。

プラグインの公式ページを参考に、このブログのお問い合わせページ(メッセージ本文入力欄)に上記2つの機能を追加してみましたので、その手順をここでは説明していきたいと思います。

contact form7

 

文字数制限を設定する手順

文字数制限は、問い合わせフォームを新規追加またはすでに作成済みのコンタクトフォームを編集して付けることが可能です。

そのいずれかによって、WordPress管理画面の「お問い合わせ」⇒「コンタクトフォーム」または「新規追加」をクリックし、「コンタクトフォームの追加」か「コンタクトフォームの編集」画面を表示します。

(問い合わせフォームを設置するための設定方法についてはここでは省略します)

WordPress管理画面からコンタクトフォームを表示する時のメニュー画面

 

そして制限したい文字数に応じてtextareaフォームタグに追記していきます。

たとえば入力する文字数を「10文字以上140文字以下」にする場合には以下のように記載します。

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

 

最低入力文字数・最大入力文字数は、「minlength」(入力可能な最小文字数)・「maxlength」(入力可能な最大文字数)の数値を変えて入力し任意の数を設定できます。

最低入力数10文字・最大入力文字数200文字(且つ文字カウントを設置)に制限する場合であれば以下のように記載して設定することができます。

Contact Form7で文字数カウントや文字数制限を付ける場合のフォーム画面

 

文字数カウントを設定する手順

次に、文字数カウントを設置するには、textareaフォームタグに以下のいずれかを追加します。

[count your-message]
[count your-message down]

 

入力した文字数を画面に表示する場合

画面に実際に入力した文字数を画面に表示したい場合には[count your-message]を追加します。

この場合は、本文が未入力の状態では以下のような表示になります。

そして、文字を入力していくと入力した文字数が表示されていきます。

[count your-message]を追加してメッセージ本文に入力した文字数を表示した場合の問い合わせフォーム入力画面

 

入力可能な文字数を表示する場合

逆に入力可能な残りの文字数を表示したい場合には、[count your-message down]を追加します。

この場合、メッセージ本文が未入力の場合は以下のようになります。

Contact Form7のメッセージ本文に[count your-message down]を追加して入力可能な文字数を表示するように設定した場合の問い合わせフォーム画面

そして、文字を入力していくと表示される文字数が少なくなっていきます。[count your-message down]を追加してメッセージ本文に入力可能な文字数を表示した場合の実際の問い合わせフォーム入力画面

 

まとめ

以上、Contact Form7を使用して追加した問い合わせフォームに入力可能な文字数を設定する方法と文字数のカウント機能を付ける方法を紹介しました。

なおここでは問い合わせフォームとしましたが、アンケートフォームに付加するなどして活用してもよいかと思いますので、必要があれば上記を参考に設定してみてください。

-WordPressプラグイン
-

Copyright© Kotoログ , 2019 All Rights Reserved.