Contact Form 7 でフォームを作成するとき、入力フィールドに「プレースホルダーテキスト」を設定すると、ユーザーに入力内容のヒントを示せます。この記事では Contact Form 7 でプレースホルダーテキストを設定する具体的な方法を解説します。
プレースホルダーテキストとは？
プレースホルダーテキスト（placeholder）は、フォームの入力欄にあらかじめ表示される薄い文字のことです。実際に入力を始めると消え、ユーザーに入力のガイドを与える役割を果たします。
テキスト入力フィールドにプレースホルダを設定する
Contact Form 7 では、フィールド定義の中で placeholder オプションを利用します。例えば以下のように書きます。
[text* your-name placeholder "お名前を入力してください"]
この場合、your-name フィールドに「お名前を入力してください」というプレースホルダーテキストが表示されます。
メールアドレス入力に設定する例
[email* your-email placeholder "例: example@example.com"]ユーザーに入力形式を直感的に示すことができます。
テキストエリアに設定する例
[textarea your-message placeholder "ご用件をご記入ください"]
複数行の入力欄でも同じように placeholder を使えます。
管理画面のフォーム作成UIから設定する
Contact Form 7 の管理画面で「テキスト」や「メール」などのフィールドを追加するとき、オプションに「プレースホルダーテキスト」の入力欄があります。そこに入力すると、自動的にショートコードに placeholder が追加されます。
よくある質問（FAQ）
Q. CF7のテキストフィールドにプレースホルダーを設定するには？
A. フォームタグに placeholder “テキスト” を追加します。例：[text* your-name placeholder “お名前を入力してください”]の形式です。CF7 5.2以降は標準でplaceholder属性をサポートしています。
Q. セレクトボックスにも選択を促す初期テキストを表示するには？
A. selectタグの最初のオプションに空値で「—選択してください—」のような選択肢を追加します。CF7のフォームタグでは[select menu-name “—選択—” “選択肢1” “選択肢2”]のように記述します。
Q. テキストエリアにも複数行のプレースホルダーを設定するには？
A. [textarea your-message placeholder “例：お問い合わせの内容を入力してください…”]の形式で設定できます。textareaのplaceholderは単一行のテキストしか表示されないブラウザもあります。
まとめ
placeholderオプションを使って簡単に設定可能- テキスト、メール、テキストエリアなど多くのフィールドで利用できる
- 管理画面のUIからも設定でき、手動でショートコードを編集してもOK
プレースホルダーテキストを適切に設定することで、ユーザーが迷わずにフォームを入力しやすくなります。
