### [フィールドにプレースホルダーテキストを追加する方法](https://wpforms.com/docs/how-to-add-placeholder-text-to-a-form-field/) **公開日:** 2023年11月26日 **著者:** Umair Majeed **抜粋:** フィールドにプレースホルダーまたはサンプルテキストを追加する方法を学びます。 **コンテンツ:** フォームのフィールドにプレースホルダーテキストを追加したいですか？プレースホルダーテキストは、指示を提供したり、サンプルフォーマットを示したりすることで、ユーザーがフォームに入力するのをガイドするのに役立ちます。 このチュートリアルでは、WPFormsのフィールドにプレースホルダーテキストを追加する方法を説明します。 --- ### プレースホルダーテキストを使用する理由 プレースホルダーテキストは、ユーザーに簡単なガイダンスを提供するためによく使用されます。ただし、場合によっては、デザイン目標を達成するのにも役立ちます。 プレースホルダーテキストは、フィールド内に表示されていても、ユーザーが独自のテキストを追加するまでフィールドは空と見なされるため、特に役立ちます。 以下に、プレースホルダーテキストを使用する最も一般的な理由をいくつか紹介します。 #### ユーザーにサンプル入力を表示する ほとんどの場合、プレースホルダーテキストはユーザーにサンプル入力を表示するために使用されます。入力があなたにとって明白に見える場合でも、これはユーザーがフォームに入力するプロセスをさらに簡単にできる方法の1つです。 たとえば、電話フィールドの期待されるフォーマットを示すためにプレースホルダーテキストを使用しているサイトをよく見かけます。  **注:** 上記のスクリーンショットに示されているように、プレースホルダーを灰色で表示したいですか？[プレースホルダーテキストの色を変更する方法](https://wpforms.com/developers/style-placeholder-text-for-form-fields/ "フォームフィールドのプレースホルダーテキストのスタイル設定")の詳細については、開発者向けドキュメントを確認してください。 #### フィールドラベルを非表示にする フォームをよりコンパクトに見せる最も簡単な方法の1つは、フィールドラベルを非表示にすることです。 ただし、フィールドラベル（「名前」、「メール」、「メッセージ」などを示すテキスト）は、訪問者にとって非常に貴重な指示を提供します。多くの場合、ユーザーが各フィールドに何を入力すべきかを知る唯一の方法です。 代わりにプレースホルダーに通常ラベルで使用するテキストを追加することで、これを回避できます。 たとえば、「名前」フィールドのラベルと、「名」および「姓」のサブラベルを表示する代わりに、[これらすべてを非表示](https://wpforms.com/docs/how-to-customize-form-field-options/#hide-label)にして、各サブフィールドのプレースホルダーにラベルテキストを追加することができます。  **注:** フォームをさらにコンパクトにしたいですか？[複数列レイアウトを使用する](https://wpforms.com/docs/how-to-create-multi-column-form-layouts-in-wpforms/ "WPFormsで複数列フォームレイアウトを作成する方法")か、[フォーム全体を1行に表示する](https://wpforms.com/docs/how-to-display-your-form-in-a-single-line/ "フォームを1行に表示する方法")ことを検討してください。 #### ドロップダウンフィールドのオプションを選択するようにユーザーに要求する クラシック スタイルを使用してドロップダウン フィールドを設定すると、最初のオプションがデフォルトで選択されます。  ユーザーが利用可能なオプションの1つを選択するまでこのフィールドを空にしておきたい場合は、プレースホルダーテキストを追加する必要があります。これにより、訪問者の混乱を防ぎ、誤解を招くエントリを受け取るのを避けることができます。  **注:** モダン スタイルのドロップダウンを使用する場合、ユーザーが利用可能な項目から選択するまでオプションは選択されません。クラシック ドロップダウン フィールドとモダン ドロップダウン フィールドの違いについて詳しくは、[ドロップダウン フィールドで複数選択を許可する方法](https://wpforms.com/docs/how-to-allow-multiple-selections-to-a-dropdown-field-in-wpforms/#customization)に関するチュートリアルでカスタマイズ オプションを確認してください。 ### 入力フィールドにプレースホルダーテキストを追加する 名前、メール、または一行テキストフィールドなどの入力フィールドは、プレースホルダーテキストを追加するのに最適な場所です。なぜなら、ユーザーに非常に具体的な情報を入力してもらいたい場合が多いからです。 この例では、メールフィールドにプレースホルダーテキストを追加します。 まず、[新しいフォームを作成](https://wpforms.com/docs/creating-first-form/ "最初のフォームの作成")するか、既存のフォームを編集します。次に、フォームに新しいフィールドを追加するか、フォームビルダー内のフィールドをクリックしてフィールドオプションを開きます。  ここで、「**詳細設定**」セクションをクリックして展開する必要があります。これにより、「**プレースホルダーテキスト**」フィールドを含む追加の設定が表示されます。 表示したいテキストを入力するだけで、完了です！  変更が完了したら、必ずフォームを保存してください。 ### ドロップダウンフィールドにプレースホルダーテキストを追加する プレースホルダーテキストは、ドロップダウンフィールドでも非常に役立ちます。ユーザーが選択を行う際の指示、まだ項目が選択されていないときの明確化、およびクラシック スタイルを使用する場合にユーザーがオプションを選択することを保証するのに役立ちます。 ドロップダウンフィールドのプレースホルダーテキストを設定するには、まずフォームにドロップダウンフィールドを追加する必要があります。  次に、ドロップダウンフィールドをクリックしてフィールドオプションを開きます。ここで、「**詳細設定**」タブをクリックし、「**プレースホルダーテキスト**」を追加する必要があります。  プレースホルダーテキストに満足したら、フォームビルダーを終了する前に必ず変更を保存してください。 これで、フォームフィールドにプレースホルダーテキストを追加できるようになりました。 次に、指示テキストでユーザーをガイドする他の方法について詳しく知りたいですか？[フォームに非入力テキストと説明を追加する方法](https://wpforms.com/docs/how-to-add-extra-text-and-descriptions-to-forms/ "フォームに非入力テキストと説明を追加する方法")に関するガイドを確認してください。 **カテゴリー:** フィールド、フィールドのカスタマイズ ---