AI要約
WordPressでフォームのプレースホルダーテキストを追加したいですか？プレースホルダーを使用すると、訪問者が各フィールドを正しく入力しやすくなります。
フィールド内に表示され、入力する前に正確に入力すべき内容をユーザーに示します。これにより、推測やそれに続くやり取りが削減されます。
この記事では、利用可能な最も簡単なソリューションであるWPFormsを使用して、WordPressコンタクトフォームのすべてのフィールドにプレースホルダーテキストを追加する方法を説明します！
プレースホルダーテキストとは？
プレースホルダーテキストとは、フォームフィールド内のテキストで、ユーザーに何を入力すべきかを示します。HTML5の仕様で導入されたため、「HTML5プレースホルダー属性」と呼ばれることもあります。
プレースホルダーは、メールアドレスのような特定の形式を持つフィールドに役立ちます。訪問者にエントリのフォーマット方法を示し、すべてのフィールドが有効であることを確認するために非常に重要です。
つまり、訪問者が入力した内容を何度も確認して修正する必要がなくなるため、フォーム放棄の可能性が低くなります。特に次のようなフィールドに役立ちます：
- URL: 訪問者にウェブサイトのアドレスを正しく入力する方法を示すために、
https://example.comをプレースホルダーテキストとして追加できます。 - 電話番号: たとえば、通常の電話番号と一緒にユーザーの国コードを取得したい場合、プレースホルダーテキストを追加して入力方法を示すことができます。
- ソーシャルメディアのユーザー名: プレースホルダーテキストは、ユーザーがユーザー名を正しく入力する方法を示すことができます。たとえば、Twitterフィールドのプレースホルダーテキストとして
@exampleを追加すると、先頭の@を入力する必要があることがわかります。
訪問者を支援するために、プレースホルダーテキストを使用する他の方法をおそらく思いつくでしょう。プレースホルダーテキストは、デフォルト値とは少し異なります。
ユーザーがプレースホルダーのあるフィールドに入力を開始すると、プレースホルダーテキストは消えます。対照的に、ユーザーが変更しない限り、デフォルト値がフォームエントリとともに送信されます。
WordPressフォームにプレースホルダーテキストを追加する方法
フォームが作成されると、フィールドごとに数回のクリックでプレースホルダーテキストを設定でき、コードやCSSを一切触る必要がありません。開始するには、以下の手順に従ってください。
ステップ1：WPFormsプラグインをインストールする
WPFormsはWordPress用のドラッグ＆ドロップフォームビルダーで、2,100以上のフォームテンプレートを備えているため、最初から作成するのではなく、既製の連絡フォームから開始できます。
ドラッグした各フィールドには独自のオプションパネルがあり、プレースホルダーテキストはすべて同じ場所にあります。この特定のジョブでWPFormsを最も気に入っている点は、プレースホルダーのプレビューがライブで更新されることです。
WPFormsのすべてのバージョンで、WPForms Liteを含め、フォームフィールドにプレースホルダーを追加できます。 Proバージョンでは、フォームに高度なフィールドを追加できるため、無料バージョンよりもはるかに強力であることを覚えておいてください。
WPFormsアカウントのダウンロードタブからzipファイルをダウンロードし、WordPressサイトにアップロードします。この手順に問題がある場合は、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。
ステップ2：お問い合わせフォームを作成する
WPFormsでは、2,100以上のフォームテンプレートのライブラリと高度なAIフォーム構築機能のおかげで、5分以内にフォームを作成して埋め込むことができます。
WPForms » Add Newに移動し、Simple Contact Formテンプレートを選択するか、WPForms AIにフォームの作成を依頼することから始めることができます。
テンプレートを選択するか、WPForms AIを使用してフォームを作成すると、フォームビルダーにリダイレクトされます。ここでは、左側にフィールドのリスト、右側にフォームのライブプレビューが表示されます。
フォームのカスタマイズや、必要なフィールドの追加は簡単です。GDPRフィールドをフォームプレビューにドラッグするだけで、簡単にGDPR同意を追加することもできます。
さらにヘルプが必要ですか？WordPressでシンプルな連絡フォームを作成する方法を示す詳細ガイドがあります。フォームの準備ができたら、フォームビルダーの上部にあるSaveをクリックして、これまでの進捗を保存してください。
ステップ3：テキストまたはメールフィールドにプレースホルダーテキストを追加する
これで、WordPressフォームにプレースホルダーテキストを追加する準備ができました。この機能を使用して、フォームの入力を簡単にするための2つの便利な方法をご紹介します。
最初の例としてメールフィールドを使用しましょう。フォームビルダーで、右側のメールフィールドをクリックして設定を開きます。
次に、左側でAdvanced Optionsサブメニューを展開します。Placeholder Textのフィールドが表示されます。
使用したいプレースホルダーテキストを入力します。入力すると、右側のフォームプレビューに同じテキストが表示され、WordPressフォームでどのように表示されるかを確認できます。
必要に応じて、Hide Labelチェックボックスをクリックすることもできます。これにより、フィールドの上にあるラベルが非表示になり、フォームがよりコンパクトになります。
ただし、スクリーンリーダーはHTML5プレースホルダー属性を読み取れないため、アクセシビリティのためにフィールドラベルを残しておくことをお勧めします。
今回は、ラベルとプレースホルダーテキストの両方があるように、Hide Labelのチェックを外します。ヒントが必要な各フィールドについて、これを繰り返します。
ステップ4：ドロップダウンフィールドにプレースホルダーテキストを追加する
プレースホルダーテキストはどのフィールドでも使用できますが、ドロップダウンで特に便利です。デフォルトでは、ドロップダウンリストはリストの最初の選択肢がデフォルトになりますが、プレースホルダーを使用してこれを防ぐことができます。
WPForms LiteとContact Form 7の比較をお読みになった方は、Contact Form 7ではドロップダウンの上部に空白行を追加できることをご存知でしょう。
ただし、プレースホルダーとしては3つのダッシュ（– – –）しか表示されず、実際のプレースホルダーテキストをカスタマイズすることはできません。そのため、WPFormsはプレースホルダーの外観をより細かく制御できます。
まずドロップダウンの例から始めましょう。このドロップダウンには3つの回答選択肢を追加しました。フォームを公開すると、最初の選択肢がデフォルトで選択されます。
これはどのフォームでも問題になる可能性がありますが、特にアンケートフォームや質問票では問題となります。どのようなアンケートであっても、訪問者が意識的に回答を選択するようにしたいはずです。
ドロップダウンフィールドにプレースホルダーを追加することで、この問題を簡単に解決できます。 高度なオプションの下に、左側にプレースホルダーテキストを入力しました。変更は右側のプレビューに即座に表示されます。
これで、フォームには最初の選択肢の代わりにプレースホルダーが表示されます。
リストを展開すると、プレースホルダーテキストがグレー表示され、有効な選択ではないことが示されます。
プレースホルダーテキストを使用せず、ドロップダウンの一番上に空白行を設けたい場合は、プレースホルダーを空白のままにすることができます。
プレースホルダーテキストフィールドでスペースキーを押すだけです。これにより、訪問者が選択するまでドロップダウンフィールドは空のまま表示されます。
プレースホルダーテキストをサポートするすべてのWPFormsフィールド
すべてのフィールドがプレースホルダーテキストを保持できるわけではありません。どのフィールドが対応しているかを知っておくことで、存在しない設定を探し回る手間が省けます。
すべてのフィールドタイプの完全なリファレンスについては、WPFormsには詳細を網羅したプレースホルダーテキストのドキュメントがあります。
| フィールド | 注記 |
|---|---|
| 一行テキスト | 標準プレースホルダー |
| 段落テキスト | 標準プレースホルダー |
| 名前 | サブフィールドごとに個別のプレースホルダー（名、ミドルネーム、姓） |
| Eメール | 確認フィールド用の個別のプレースホルダー |
| ウェブサイト/URL | 標準プレースホルダー |
| 電話 | 標準プレースホルダー |
| 数値 | 標準プレースホルダー |
| ドロップダウン | 最初の選択肢が事前に選択されるのを防ぐ方法としても機能します |
| 住所 | 行、都市、州、郵便番号、国ごとに個別のプレースホルダー |
| 日付 / 時刻 | 日付と時刻ピッカー用の個別のプレースホルダー |
| パスワード | 確認フィールド用の個別のプレースホルダー |
| カスタムキャプチャ | 標準プレースホルダー |
入力するのではなくクリックするものは、ヒントを入れるための空のテキストボックスがないため、プレースホルダーオプションがありません。これには、チェックボックス、複数選択、評価、署名、ファイルアップロード、数値スライダー、リッチテキストが含まれます。
上記のフィールドのうち6つは無料のWPForms Liteに含まれており、シングルラインテキスト、名前、メール、段落テキスト、ドロップダウン、数値が含まれます。電話、住所、日付/時刻、カスタムキャプチャは、有料ライセンスが必要な高度なフィールドです。
Contact Form 7からWPFormsへの移行
Contact Form 7からここにたどり着いたあなたは、その理由をすでに知っているでしょう。そこでのプレースホルダーとは、フォームタブを開き、すべてのフィールドのフォームタグショートコードに手動でplaceholder属性を入力するか、「このテキストをプレースホルダーとして使用する」ボックスをデフォルト値の下にチェックすることです。
どちらの場合もマークアップを編集しており、新しいフィールドごとにショートコードに戻る必要があります。Contact Form 7は空白の最初の行を提供できますが、3つのダッシュとして表示され、それを変更する設定がないため、ドロップダウンはより厳しい制限に直面します。
「部署を選択してください」や「予算を選択してください」と入力することはできません。ショートコードの編集をいくら行っても、それは変わりません。完全な比較を知りたい場合は、WPForms Lite vs Contact Form 7の比較でその他の違いをすべて確認できます。
このギャップこそが、この特定の作業のために切り替えるべき正直な理由です。WPFormsのプレースホルダーテキストは、対応しているすべてのフィールドで、ライブプレビュー付きの入力ボックスです。
再構築する代わりに既存のContact Form 7フォームをインポートできるため、ショートコード編集にうんざりしている場合は、WPFormsは簡単なContact Form 7の代替になります。
お問い合わせフォームのプレースホルダーテキストに関するFAQ
プレースホルダーテキストは、WordPressユーザーがコンタクトフォームを設定する際によく話題になります。最もよく寄せられる質問を以下に示します。
プレースホルダーテキストとは何ですか？
入力すべき内容を示すフォームフィールド内のヒントテキストで、入力を開始すると消えます。
HTML5のplaceholder属性に由来し、WPFormsでは対応するフィールドの詳細タブから追加できます。
プレースホルダーテキストとデフォルト値の違いは何ですか？
プレースホルダーテキストは視覚的なヒントにすぎないため、フォームと一緒に送信されることはありません。デフォルト値はフィールド内にある実際のコンテンツであり、ユーザーが変更しない限り送信されます。
プレースホルダーは希望する形式を示し、デフォルト値は実際の回答を事前入力したい場合に使用します。
スクリーンリーダーはプレースホルダーテキストを読み取れますか？
確実ではないため、プレースホルダーテキストはフィールドの唯一の説明であるべきではありません。
ラベルを非表示にするをオンにするのではなく、フィールドラベルを表示したままにし、画面上に表示されるフィールドの説明に本当に重要なものを入力してください。
ドロップダウンが自動的に最初のオプションを選択するのはなぜですか？
常に最初の選択肢を事前選択するクラシックスタイルに設定されているためです。
詳細タブにプレースホルダーテキストを追加するとそれが停止するか、一般タブのスタイルをモダンに切り替えてください。モダンなドロップダウンは一切事前選択しません。
Contact Form 7にプレースホルダーテキストを追加できますか？
フォームタグのショートコードにplaceholder属性を入力するか、デフォルト値チェックボックスを使用することで可能です。
Contact Form 7はカスタマイズ可能な文言なしで、3つのダッシュで表示される空白行しか提供しないため、ドロップダウンが限界です。
次のステップ：プレースホルダーテキストのスタイル設定
デフォルトでは、WordPressのコンタクトフォームのプレースホルダーテキストはグレーになります。 コントラストを加えたい場合は、CSSを使用してスタイルを設定できます。
ドキュメントのコードスニペットをご覧ください：プレースホルダーテキストのスタイル設定方法。デザインのインスピレーションが必要な場合は、お問い合わせページの良い例もいくつかあります。
フォームの作成準備はできましたか？最も簡単なWordPressフォームビルダープラグインで今日から始めましょう。WPForms Proには多くの無料テンプレートが含まれており、14日間の返金保証が付いています。
この記事がお役に立った場合は、FacebookとTwitterでフォローして、WordPressの無料チュートリアルやガイドをさらにご覧ください。
