AI要約
WordPressでフォームのプレースホルダーテキストを追加したいですか？
プレースホルダーは、訪問者が各フィールドに正しく入力するのを容易にします。これにより、適切な情報を取得でき、訪問者のフラストレーションを軽減できます。
この記事では、あらゆる種類のフォームにプレースホルダーテキストを追加する簡単な方法を紹介します。
プレースホルダーテキストとは？
プレースホルダーテキストとは、フォームフィールド内のテキストで、ユーザーに何を入力すべきかを示します。HTML5の仕様で導入されたため、「HTML5プレースホルダー属性」と呼ばれることもあります。
プレースホルダーは、メールアドレスのような特定の形式を持つフィールドに役立ちます。訪問者にエントリのフォーマット方法を示します。
プレースホルダーテキストは、各フィールドが有効であることを確認するために非常に重要です。これにより、訪問者は入力した内容を何度も確認して修正する必要がないため、フォームの放棄が少なくなる可能性があります。
特に次のようなフィールドに役立ちます。
- URL: 訪問者にウェブサイトのアドレスを正しく入力する方法を示すために、
https://example.comをプレースホルダーテキストとして追加できます。 - 電話番号: たとえば、通常の電話番号と一緒にユーザーの国コードを取得したい場合、プレースホルダーテキストを追加して入力方法を示すことができます。
- ソーシャルメディアのユーザー名: プレースホルダーテキストは、ユーザーがユーザー名を正しく入力する方法を示すことができます。たとえば、Twitterフィールドのプレースホルダーテキストとして
@exampleを追加すると、先頭の@を入力する必要があることがわかります。
訪問者を支援するために、プレースホルダーテキストを使用する他の方法をさらに思いつくことができるでしょう。
プレースホルダーテキストは、デフォルト値とは少し異なります。プレースホルダーのあるフィールドにユーザーが入力し始めると、プレースホルダーテキストは消えます。対照的に、デフォルト値はユーザーが変更しない限り、フォームエントリとともに送信されます。
HTML5プレースホルダー属性の使用方法がわかったので、フォームに追加する簡単な方法を紹介します。
WordPressフォームにプレースホルダーテキストを追加する方法
以下の手順で、プレースホルダーテキストを簡単に追加する方法を説明します。
この記事の内容
WordPress向けの最高のフォームビルダープラグインをインストールすることから始めましょう。
1. WPFormsプラグインのインストール
まず、WPFormsプラグインをインストールして有効化します。
WPFormsのすべてのバージョンで、WPForms Liteを含め、フォームフィールドにプレースホルダーを追加できます。 Proバージョンでは、フォームに高度なフィールドを追加できるため、無料バージョンよりもはるかに強力であることを覚えておいてください。
WPFormsアカウントのダウンロードタブからzipファイルをダウンロードし、WordPressサイトにアップロードします。この手順に問題がある場合は、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。
2. 簡単な連絡先フォームを作成する
次に、簡単な連絡先フォームを作成します。WPFormsでは、5分以内にフォームを作成して埋め込むことができます。
フォームのカスタマイズや、必要なフィールドの追加は簡単です。GDPRフィールドをフォームプレビューにドラッグするだけで、簡単にGDPR同意を追加することもできます。
さらにヘルプが必要ですか？WordPressで簡単な連絡フォームを作成する方法を説明した詳細ガイドをご覧ください。WordPressで簡単な連絡フォームを作成する方法。
フォームの準備ができたら、フォームビルダーの上部にある 保存をクリックして、これまでの進捗を保存してください。
3. メールフィールドにプレースホルダーテキストを追加する
これで、WordPressフォームにプレースホルダーテキストを追加する準備ができました。この機能を使用して、フォームの入力を簡単にするための2つの便利な方法をご紹介します。
最初の例として、メールフィールドを使用しましょう。
フォームビルダーで、右側にあるメールフィールドをクリックして設定を開きます。
次に、左側で 高度なオプションサブメニューを展開します。
プレースホルダーテキストのフィールドが表示されます。
使用したいプレースホルダーテキストを入力します。入力すると、右側のフォームプレビューに同じテキストが表示され、WordPressフォームでどのように表示されるかを確認できます。
必要に応じて、ラベルを非表示チェックボックスをクリックすることもできます。これにより、フィールドの上部にあるラベルが非表示になり、フォームがコンパクトになります。ただし、スクリーンリーダーはHTML5のプレースホルダー属性を読み取れないため、アクセシビリティのためにフィールドラベルを残しておくことをお勧めします。
今回は、ラベルとプレースホルダーテキストの両方が表示されるように、ラベルを非表示のチェックを外しておきます。
4. ドロップダウンフィールドにプレースホルダーテキストを追加する
プレースホルダーテキストはどのフィールドでも使用できますが、ドロップダウンで特に便利です。デフォルトでは、ドロップダウンリストはリストの最初の選択肢がデフォルトになりますが、プレースホルダーを使用してこれを防ぐことができます。
WPForms LiteとContact Form 7の比較をお読みになった方は、Contact Form 7ではドロップダウンの上部に空白行を追加できることをご存知でしょう。ただし、プレースホルダーとして表示されるのは3つのダッシュ（– – –）のみで、実際のプレースホルダーテキストをカスタマイズすることはできません。
そのため、WPFormsではプレースホルダーの外観をより細かく制御できます。
ドロップダウンの例から始めましょう。このドロップダウンには3つの回答選択肢を追加しました。
フォームを公開すると、最初のオプションがデフォルトの選択になります。訪問者は、ドロップダウンをクリックして変更しなくても、このフォームを送信できてしまいます。
これはどのフォームでも問題になる可能性がありますが、特にアンケートフォームや質問票では問題となります。どのようなアンケートであっても、訪問者が意識的に回答を選択するようにしたいはずです。
ドロップダウンフィールドにプレースホルダーを追加することで、この問題を簡単に解決できます。
左側の高度なオプションの下に、プレースホルダーテキストを入力しました。変更は右側のプレビューに即座に表示されます。
これで、フォームには最初の選択肢の代わりにプレースホルダーが表示されます。
リストを展開すると、プレースホルダーテキストがグレー表示され、有効な選択ではないことが示されます。
プレースホルダーテキストを使用したくないが、ドロップダウンの先頭に空白行を設けたい場合は、プレースホルダーを空白のままにすることができます。プレースホルダーテキストフィールドでスペースキーを押すだけです。これにより、訪問者が選択するまでドロップダウンフィールドは空のまま表示されます。
これで完了です！WordPressフォームに便利なプレースホルダーテキストを追加する方法がわかりました。
次のステップ：プレースホルダーテキストのスタイル設定
デフォルトでは、WordPressのコンタクトフォームのプレースホルダーテキストはグレーになります。 コントラストを加えたい場合は、CSSを使用してスタイルを設定できます。
ドキュメントのコードスニペットをご覧ください：プレースホルダーテキストのスタイル設定方法。デザインのインスピレーションが必要な場合は、お問い合わせページの良い例もいくつかあります。
WordPressにCSSを追加する方法がわからないですか？サイトを壊さずにコードスニペットを追加する方法に関するこのガイドをお読みください。
フォームの作成準備はできましたか？最も簡単なWordPressフォームビルダープラグインで今日から始めましょう。WPForms Proには多くの無料テンプレートが含まれており、14日間の返金保証が付いています。
もしこの記事がお役に立ったなら、WordPressの無料チュートリアルやガイドをもっと知るために、FacebookとTwitterでフォローしてください。
