AI要約
WordPressのフォームを完了する際に、ユーザーにもっと多くの情報を提供したいですか？追加の説明により、ユーザーはフォームの要件をよりよく理解できるようになり、フォームを正常に完了する可能性が高まります。
このチュートリアルでは、WPFormsを使用してフォームにテキストや説明を追加するさまざまな方法を紹介します。
以下のオプションを試す前に、WPFormsがWordPressサイトにインストールされ、有効化されていることを確認してください。次に、新しいフォームを作成するか、既存のフォームを編集します。
フォームの名前と説明を追加する
フォームの名前と説明により、ユーザーはフォームの概要を素早く把握できます。
フォームビルダーのセットアップページで、フォームの名前フィールドにフォームのタイトルを追加または編集できます。
フォームの説明により、ユーザーにより多くの情報を提供できます。フォームに説明を追加するには、設定 » 一般に移動し、フォームの説明フィールドを編集します。
デフォルトでは、フォームの名前と説明は、フォームを公開してもフロントエンドには表示されません。ユーザーに表示したい場合は、WPFormsブロックツールバーの3点アイコンをクリックし、 その他の設定を表示を選択します。
注意： ボタンラベルを表示が有効になっている場合、このボタンは「オプション」というラベルになります。この機能は、WordPressブロックエディターのオプション » 設定 » 一般 » 外観で切り替えることができます。
これにより、エディターの右側にあるブロックオプションパネルが開きます。ここで、 タイトルを表示および 説明を表示オプションをオンにします。
次に、ページを保存または更新します。サイトのフロントエンドでは、フォームの名前と説明は次のようになります：
フィールドラベル、説明、プレースホルダーテキストを追加する
フォームの名前と説明はユーザーにフォームの概要を提供できますが、フィールドラベル、説明、またはプレースホルダーテキスト（またはこれらの組み合わせ）を追加することで、個々のフィールドに具体的な情報を提供できます。
フォームビルダーで、情報追加したいフィールドをクリックします。これによりフィールドオプションパネルが開き、フィールドのラベルと説明を編集できます。
注意： WPFormsでフォームラベルの前後に画像を追加することに興味がありますか？手順については、開発者ドキュメントを参照してください。
必要に応じて、ユーザーにサンプル入力を表示するプレースホルダーテキストを追加することもできます。このテキストは、ユーザーが自身の入力を開始するか、選択を行うまで表示されます。
フィールドにプレースホルダーテキストを追加するには、プレビューエリアでフィールドをクリックしてフィールドオプションを開きます。そこから、高度な設定タブをクリックし、プレースホルダーテキストフィールドに入力します。
注意: フォームでプレースホルダーテキストを使用するすべての方法について、さらに詳しく知りたいですか？ WPFormsでのフィールドへのプレースホルダーテキストの追加に関するチュートリアルをご覧ください。
フィールドラベル、説明、プレースホルダーテキストを含むメールフィールドがフロントエンドでどのように表示されるかは次のとおりです。
HTMLフィールドを使用する
WPFormsのHTMLフィールドを使用すると、フォームに独立したテキストまたはHTMLコードを追加できます。このフィールドをフォームに追加するには、Fancy Fieldsの下を確認し、HTMLをクリックするか、プレビューエリアにドラッグアンドドロップします。
次に、フィールドオプションパネルのCodeフィールドに追加したいテキストを入力します。必要に応じて、HTMLでテキストをフォーマットすることもできます。
段落入力フィールドの上に公開されたフォームでHTMLフィールドのテキストがどのように表示されるかは次のとおりです。
フォームにリンクを追加したい場合は、HTMLフィールドをこれに使用することもできます。HTMLフィールドにリンクのコードを追加するだけです。
公開されたフォームでリンクがどのように表示されるかは次のとおりです。
注意: HTMLリンクの作成方法がわからない場合は、Mozilla Developer Networkのハイパーリンクの作成ガイドを確認して詳細を確認してください。
WPFormsのHTMLフィールドで利用可能なすべてのオプションを確認するには、カスタムHTMLフィールドの組み込みに関するチュートリアルを確認してください。
コンテンツフィールドの使用
WPFormsのコンテンツフィールドは、見出し、リスト、段落、メディアなどのコンテンツをフォームに追加するためのシンプルでユーザーフレンドリーな方法を提供します。このフィールドをフォームに追加するには、Fancy Fieldsの下を確認し、コンテンツまたはプレビューエリアにドラッグアンドドロップします。
次に、シンプルなエディターにコンテンツを追加します。エディターには、コンテンツを追加するために選択できる2つの異なるモードがあります。ビジュアルとテキスト.
注意: ビジュアルエディターとテキストエディター、およびコンテンツフィールドでメディアを追加する方法の詳細については、完全なWPFormsコンテンツフィールドガイドを確認してください。
サイトのフロントエンドでフォームがどのように表示されるかのプレビューは次のとおりです。
セクション区切りを追加する
フォームに複数のパートがある場合は、セクションタイトルと説明を追加して各部分を定義すると便利です。
これを行うには、フォームビルダーのFancy Fieldsの下を確認します。次に、Section Dividerフィールドをクリックするか、プレビューエリアにドラッグアンドドロップしてフォームに追加します。
セクション区切り線のタイトルと説明を変更するには、フォームビルダーでクリックしてフィールドオプションを開きます。ここから、LabelとDescriptionを編集できます。
フロントエンドでセクション区切り線フィールドの説明がどのように表示されるかは次のとおりです。
フォームのページタイトルを追加する（マルチページフォームの場合）
マルチページフォームは、大きなフォームを整理するための優れた方法です。各ページにタイトルを追加すると、ユーザーはフォームのその部分に関する詳細情報を得ることができます。
ページタイトルを追加するには、フォームビルダープレビューのPage Breakフィールドをクリックしてオプションを開きます。ここから、Page Titleを編集できます。
コネクタプログレスインジケータースタイルが選択されている場合、フロントエンドでページタイトルがどのように表示されるかは次のとおりです。
注意: 複数ページフォームの設定について、さらに詳しいガイダンスが必要ですか？ 詳細については、複数ページフォームに関するチュートリアル全体をご覧ください。
よくある質問
フォームにテキストや説明を追加することに関する、よくある質問への回答です。
クラシックエディターでフォーム名と説明を表示するにはどうすればよいですか？
クラシックエディターを使用している場合、フォームを挿入する際にフォームのタイトルと説明を直接表示できます。フォームの埋め込みポップアップで、フォーム名を表示とフォームの説明を表示のオプションをチェックしてから、フォームを追加をクリックしてください。これにより、ショートコードに自動的に含まれます。
または、このショートコードを使用して、フロントエンドでフォームの名前と説明を表示することもできます。
[wpforms id="123" title="true" description="true"]
123 を実際のフォームIDに置き換えてください。
これで、フォームにテキストを追加するさまざまな方法がわかりました。
次に、ツールチップを使用してユーザーにより多くの情報を表示しますか？ フォームにツールチップを追加するガイドで、手順を確認してください。