WordPress

Contact Form 7のフォームタグ生成ダイアログの使い方|テキストエリアに必須設定やプレースホルダーを追加する方法

スポンサーリンク

Contact Form 7では、フォーム作成時に便利な「フォームタグ生成ダイアログ」を使って、入力項目の細かな設定ができます。
本記事では、テキストエリア(textarea)に関する設定項目について、初心者にもわかりやすく解説します。

フォームタグ生成ダイアログで設定できる項目

✅ 必須項目のチェック

「項目タイプ」にある「必須項目」にチェックを入れると、その入力欄は必須入力になります。
チェックしない場合は任意入力になります。

🏷 項目名

フォームの入力項目に名前(name属性)をつけることで、送信されたデータを識別しやすくなります。
例:textarea-sample-1

🎨 クラス属性

class属性を設定することで、CSSでデザインやスタイルを調整できます。

🔢 長さの設定

テキストエリアに入力できる文字数を設定することができます。

  • 下限:最低入力文字数を指定できます。minlength に最小文字数を設定できます。
  • 上限:最大文字数を制限できます。maxlength に最大文字数を設定できます。

📝 デフォルト値とプレースホルダー

  • デフォルト値には、入力欄に初期表示されるテキストを設定できます。
  • 「このテキストを項目のプレースホルダーとして使用する」にチェックを入れると、プレースホルダーとして表示され、入力のヒントになります。

フォームタグ生成ダイアログでは設定できない内容(手動編集が必要)

以下のような表示サイズに関する設定は、フォームタグ生成ダイアログでは設定ができないため、手動でタグを編集する必要があります。

📐 行数と列数の設定(テキストエリア)

  • (行数)x(列数)の形式で、テキストエリアのサイズ(rowsとcols)を調整できます。
  • 片方のみの指定も可能です(例:x3 または rows:3)。

よく使うタグのサンプル一覧

以下は、よく利用されるフォームタグのサンプルです。用途に応じて使い分けてください。

設定内容フォームタグ
シンプルなテキストエリア[textarea textarea-sample-1 class:textarea-sample]
プレースホルダーあり(必須)[textarea* textarea-sample-2 class:textarea-sample placeholder "テキストエリア"]
デフォルト値あり(必須)[textarea* textarea-sample-3 class:textarea-sample "テキストエリア"]
最小10文字・最大100文字の制限あり(必須)[textarea* textarea-sample-4 class:textarea-sample minlength:10 maxlength:100 placeholder "テキストエリア"]
行数8・列数3の設定あり(必須)[textarea* textarea-sample-5 class:textarea-sample 8x3 placeholder "abcde"]
行数のみの設定あり(x3表記)[textarea* textarea-sample-6 class:textarea-sample x3 placeholder "abcde"]
行数のみの設定あり(rows属性)[textarea* textarea-sample-6b class:textarea-sample rows:3 placeholder "abcde"]

実際の表示イメージ

    テキストサンプル

    プレースフォルダーあり(必須)

    デフォルト値あり(必須)

    最小(10)・最大(100)文字数の設定あり(必須)

    行数と列数の設定あり(必須)

    行数のみの設定(x3)あり(必須)

    行数のみの設定(rows)あり(必須)

    まとめ

    Contact Form 7のフォームタグ生成ダイアログでは、必須入力の設定・プレースホルダー・文字数制限・クラスの付与など、基本的な入力制御が直感的に設定できます。

    ただし、行数や列数のような見た目の調整については手動編集が必要になります。
    本記事のサンプルタグを参考に、目的に合ったフォームを効率よく作成してみてください。

    その他のフォームのカスタム方法

    タイトルとURLをコピーしました