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 が追加されます。
まとめ
placeholderオプションを使って簡単に設定可能- テキスト、メール、テキストエリアなど多くのフィールドで利用できる
- 管理画面のUIからも設定でき、手動でショートコードを編集してもOK
プレースホルダーテキストを適切に設定することで、ユーザーが迷わずにフォームを入力しやすくなります。
