WordPressウェブサイトのフォームに説明テキストを追加したいですか？
フォームに説明テキストを追加する方法を知っていれば、説明的なプロンプトや指示をユーザーと共有することができます。
この記事では、フォームに説明テキストを追加する4つの異なる方法を説明します。
インストラクショナル・テキストにはどのような例があるか？
インストラクション・テキストは、ウェブサイト訪問者にフォームへの入力を指示するなど、読者にタスクの完了を指示する。
レシピやユーザーマニュアルのように、説明文の内容や長さはさまざまですが、オンラインフォームに記載される場合は、この説明文は短い断片になるでしょう。
例えば、ウェブサイトの訪問者に、お問い合わせページでメッセージを送るように促すだけかもしれません。その場合、「下記のお問い合わせフォームにご記入ください。
一言で言えば、インストラクション・テキストとは、ウェブサイト訪問者に何をしてほしいかを指示するものである。
フォームに指示文を追加する方法（4つの方法）
このチュートリアルではWPFormsを使用します。使いやすく、ドラッグ＆ドロップのユーザーインターフェイスで、使い方を学ぶのにほとんど時間はかかりません。
WPFormsでは、フォームテンプレートを使用している場合でも、ゼロから作成している場合でも、フォームに説明テキストを追加する方法がいくつか見つかります。カスタマイズのための多くのオプションは、あなたのニーズに合うように様々なスタイルで説明テキストを含めることができます。
1.コンテンツ分野
WPFormsフォームビルダーで説明テキストを追加する一つの方法は、コンテンツフィールドを使用することです。コンテンツフィールドにアクセスするには、WPForms Proライセンスが必要です。
この例では、フォームの上部にコンテンツフィールドをドラッグ＆ドロップし、ユーザーがフォームに記入するための指示を挿入しています。
そのためには、フィールドをクリックしてフィールドオプションを開き、左側に表示されるテキストボックスにテキストを入力するだけです。
この例のテキストエディタでは、歓迎のメッセージと、訪問者がフォームに入力するよう促すプロンプトを書いています。
テキストエディターに組み込まれている書式設定ツールを使って、「コンテンツ」フィールドに入れるテキストのフォント、サイズ、色、その他のスタイル要素を調整することができます。
カスタマイズ可能なテキストを好きな場所に簡単に追加できるので、フォームの他の場所でもこのフォームフィールドを使いたいと思うかもしれません。
実際、コンテンツフィールドでは、説明テキストと一緒に画像を挿入することもできます。これは WPForms を競合他社から際立たせるユニークな機能です。詳しくは Gravity Forms vs Fluent Forms vs WPFormsをご覧ください。
2.フィールドの説明
フォームに説明テキストを追加するもう一つの方法は、フィールドの説明を使用することです。WPFormsのほとんどのフィールドでは、小さなテキストの説明を書き出すことができます。
任意のフォームフィールドに説明を追加するには、まず、フォームにテキストフィールドを挿入し、それをクリックしてフィールドオプションを開きます。フィールドオプションの一般タブで、説明テキストボックスに説明を入力します。
そこで、「全般」タブをクリックし、「説明」ボックスに指示を書き込むことで、「Eメール」フィールドに指示文を追加します。
そうすると、説明文に書いた内容がフォームのフィールドの真下に小さなテキストとして表示されます。これは、どのような情報が必要なのかをユーザーに示すための小さな通知のようなものです。
この例では、ウェブサイトの訪問者にEメールアドレスを入力するよう指示していますが、フォームの他のフィールドの設定を使用して、適切と思われる指示文をカスタマイズすることもできます。
3.フィールド内のプレースホルダーテキスト
また、他のフィールド設定を使用して、別の方法で指導テキストを含めることもできます。
フィールドの詳細設定では、プレースホルダー・テキストを書き出すオプションがあります。
つまり、ここに入力したテキストは、フィールドのプレースホルダーとして機能します。
フィールドオプションの詳細設定タブで、プレースホルダーテキストと書かれたボックスまでスクロールダウンします。ここに入力したテキストは、フォームのEメールフィールドの入力ボックス内に表示されます。
このテキストは、フィールドのメール入力ボックスに置かれるため、スペースが限られています。ですから、ここでの説明文はある程度短くする必要があります。
長い指示やプロンプトの場合は、前の方法で示したように、フィールドの下に「説明」を使った方がすっきりします。
4.セクションディバイダーでテキストを編集する
フォームに説明テキストを追加する次の方法は、セクション分割フィールドのテキストを編集することです。最初の例でアクセスしたFancy Fieldsに戻ります。
もう一度言いますが、このフィールドはドラッグしてフォームの好きな場所に置くことができます。
この例では、フォームの最下部、コメントボックスと送信ボタンの間にフィールドを配置しています。これは、フォームの内容をまとめるための、訪問者への結びのメッセージとなります。
そして、Labelと Descriptionを一緒に使って説明テキストを作成します。しかし、これらのオプションのいずれかを使用して、フォームを好きなようにスタイルすることができます。
フィールドの ラベルは太字で表示されるので、この例ではここに重要なテキストを挿入します。Descriptionの小さいテキストを使って、短いメッセージを入れます。
これまで述べてきたように、さまざまなフォントサイズを利用して、お好きなように指導テキストのスタイルを設定することができます。
ここで使用した方法が、最初の例で作成したものと同じようなテキストスタイルを、Contentフィールドを使って作成していることに注目してください。しかし、Contentフィールドのテキストエディタのおかげで、フォントをカスタマイズするための多くの追加オプションがあります。
とはいえ、自分のニーズに合わせてフォームを編集・カスタマイズしていくうちに、好みのものが見つかるはずだ。
次に、コンテンツ・フィールドを使ってヘッダー画像を追加します。
例1でコンテンツフィールドのメディア追加ボタンをスキップしたのを覚えていますか？今こそ見直して、フォームにヘッダー画像を追加しましょう。ヘッダー画像を追加することは、フォームをパーソナライズしたり、あなたのビジネスを宣伝するクリエイティブな方法です。コンテンツフィールドを使ってヘッダー画像を追加する方法については、こちらのチュートリアルをご覧ください。
条件ロジックを使ってフォームの機能を向上させることもできることをお忘れなく。
そして最後に、コンバージョンを高めるための優れたフォームデザインの使い方を学ぶ。
フォームを作る準備はできましたか？最も簡単なWordPressフォームビルダープラグインで今すぐ始めましょう。WPForms Proにはたくさんの無料テンプレートが含まれており、14日間の返金保証がついています。
この記事がお役に立ちましたら、Facebookや TwitterでWordPressの無料チュートリアルやガイドをフォローしてください。
