WordPress

Contact Form 7で最小・最大文字数の制限と入力文字数をカウントする方法

WordPressでお問い合わせフォームを実装できるプラグイン「Contact Form 7」で、入力する文字数を制限する方法と入力文字数をリアルタイムでカウントする方法を紹介します。

文字数制限をする

フォームタグに「minlength:最小文字数」と「maxlength:最大文字数」を設定するだけで、入力する文字数制限ができます。

例えば、your-messageというname属性のテキストエリアに文字数制限を設定する場合は、以下のようにします。

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

入力文字数が10文字に満たない場合や200文字を超える場合はエラーになります。

文字数カウントをする

今何文字入力しているかわかるように、文字数カウントを設定したい場合はcountフォームタグを使用します。

countと文字数カウントをする入力項目のname属性を指定する必要があり、例えば先ほどのテキストエリアの文字数カウントをつける場合は次のようにします。

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

逆に、対象の入力項目の最大文字数まで残り何文字か表示したい場合はcountフォームタグにdownを追加します。

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

デモ

以下は、入力文字数と残り文字数を表示するデモになります。


    0


    200

    <label> 入力文字数を表示
    [textarea your-message1 minlength:10 maxlength:200] </label>
    [count your-message1]

    <label> 残り文字数を表示
    [textarea your-message2 minlength:10 maxlength:200] </label>
    [count your-message2 down]

    WordPressを始めるならエックスサーバーがおすすめ

    WordPressでブログやアフィリエイトを始めたい、良いレンタルサーバーに乗り換えたいという方にはエックスサーバーがおすすめです。

    その理由は以下の通り。

    • 国内シェアNo.1のレンタルサーバー
    • サポートの品質が高い
    • 表示速度・処理速度が速い

    WordPressが学べるおすすめのスクール

    WordPress関連の本もありますし、ネット上にはたくさんの情報がありますが、短期間でWordPressも含めたWeb制作のスキルを身につけたい方にはプログラミングスクールがおすすめです。

    TechAcademy

    • WordPressのサイト制作の流れが理解できる
    • WordPressでオリジナルサイトが作れるようになる
    • プラグインやカスタムフィールドを学べる
    • オンラインで完結
    • 講師・メンターが現役エンジニア

    関連記事
    WordPressが学べるおすすめのプログラミングスクール

    Leave a Comment