MENU

Contact Form 7 テキストエリアの必須・サイズ設定

当ページのリンクには広告が含まれています。

WordPressでお問い合わせフォームを作成する際、「Contact Form 7」を利用する方は多いでしょう。しかし、デフォルトのテキストエリア(長文入力欄)のままでは、「必須項目にしたい」「入力例を表示したい」「サイズを調整したい」といった要望に応えられないことがあります。

この記事では、Contact Form 7の「フォームタグ生成ダイアログ」を使ってテキストエリアをカスタマイズする方法と、ダイアログでは設定できない高度な調整(行数・列数など)を手動で行う方法を詳しく解説します。

目次

フォームタグ生成ダイアログでの基本設定

Contact Form 7の編集画面で「テキストエリア」ボタンをクリックすると、設定ダイアログが表示されます。ここで以下の項目を直感的に設定できます。

1. 必須入力にする

「項目タイプ」の「必須入力の項目。」にチェックを入れると、ユーザーがこの欄に入力しない限り送信できなくなります。お問い合わせ内容など、絶対に記入してほしい項目には必ず設定しましょう。

2. 項目名(name属性)

システムがデータを識別するための名前です。デフォルトのままでも動きますが、messageinquiry-content など、分かりやすい名前に変更することをおすすめします。

3. プレースホルダー(入力例)の表示

「デフォルト値」に入力したテキストを、入力欄の中にうっすらと表示させることができます。

「このテキストを項目のプレースホルダーとして使用する」にチェックを入れると、ユーザーが文字を入力し始めると消える「入力例」として機能します。

4. 文字数制限(バリデーション)

いたずら防止や適切なデータ収集のために、文字数の下限(最小文字数)と上限(最大文字数)を設定できます。

ダイアログで設定できない項目のカスタマイズ

テキストエリアの「高さ(行数)」や「幅(列数)」の指定は、生成ダイアログ上の項目には存在しません。これらは生成されたショートコード(タグ)を直接編集して追加します。

行数(高さ)と列数(幅)の指定方法

タグの中に x (小文字のエックス) を使って 列数x行数 の形式で記述します。

  • 例:3行の高さにする場合 [textarea your-message x3]
  • 例:40列の幅で10行の高さにする場合 [textarea your-message 40x10]

※最近のレスポンシブデザインでは、幅(列数)はCSSで width: 100%; のように指定することが一般的です。そのため、タグでは行数(高さ)のみを指定する x5 のような記述がよく使われます。

コピペで使える!設定別タグサンプル集

よく使われる設定をまとめました。コピーして、自分のフォームのタグと置き換えて使用してください。

設定内容フォームタグの例
基本(任意入力)[textarea message]
必須入力にする[textarea* message]
プレースホルダー付き[textarea message placeholder "ここにお問い合わせ内容を入力してください"]
5行の高さを指定[textarea message x5]
必須 + 5行 + プレースホルダー[textarea* message x5 placeholder "ご質問内容を具体的にご記入ください"]

まとめ

Contact Form 7のテキストエリアは、基本設定はダイアログで簡単に行えますが、見た目(サイズ)の調整はタグの直接編集が必要です。

ユーザーが入力しやすい親切なフォームを作るために、ぜひプレースホルダーや適切な行数設定を活用してみてください。

【必須ツール】アフィリエイトで稼ぐためのツール

レンタルサーバ

WordPressテーマ

ASP

セミナー

ホームページ作成パートナー

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

コメント

コメントする

CAPTCHA


目次