フォームタイトルコンポーネント

最終更新日： 2025年6月27日

作成対象：

  • 開発者
  • 管理者
  • ユーザー

アダプティブフォームの「タイトル」とは、フォームの上部（通常、ヘッダーの下）に表示されるテキストを指します。タイトルは、タイトルコンポーネントを使用して指定します。このコンポーネントをフォームレイアウトに追加し、そのテキストをフォームの目的やトピックに合わせて編集できます。 タイトルは、ユーザーに対するフォームのラベルまたは短い説明として機能し、フォームを区別するのに役立ちます。

ヒント
AEM 向け Edge Delivery Servicesについて検討したことはありますか？
既存のプロジェクトでは、このドキュメントで説明されている方法を引き続き使用できます。ただし、新規プロジェクトの場合は、Edge Delivery Services を利用することをお勧めします

例

タイトルの例

使用方法

フォームでタイトルを使用するメリットはいくつかあります。

  • 明確さ：タイトルは、フォームの目的を明確に示し、ユーザーが提供する必要のある情報を理解するのに役立ちます。

  • 組織：タイトルは、トピック別または目的別にフォームを整理するのに役立ちます。また、ユーザーが必要なフォームを簡単に見つけられるようになります。

  • アクセシビリティ：スクリーンリーダーで読み上げられ、ユーザーがフォームのコンテキストを理解するのに役立つため、タイトルはアクセシビリティのニーズを持つユーザーにとって重要な要素です。

  • ブランディング：タイトルを使用して、会社または組織の名前を表示することもできます。ユーザーに信頼してもらい、親しみを持ってもらうのに役立ちます。

  • ナビゲーション：タイトルは、特にフォームが長い場合や複雑な場合に、フォーム内を移動する際にも役立ちます。

  • 検索エンジン最適化（SEO）：フォームにタイトルを付けると SEO でも役立ちます。これは、検索エンジンがタイトルを使用して、検索クエリに対する web ページの関連性を判断するからです。

全体的に、フォームのタイトルはユーザーエクスペリエンスに関する重要な要素であり、フォームのコンテキストと目的を理解するのに役立つ明確で簡潔なラベルをフォームで提供する際に使用します。

バージョンと互換性

アダプティブフォームのタイトルコアコンポーネントは、Cloud Service 向けコアコンポーネント 2.0.4 および AEM 6.5.16.0 Forms 向けコアコンポーネント 1.1.12 以降の一部として、2023年2月にリリースされました。 次の表に、サポートされているすべてのバージョン、AEM の互換性、対応するドキュメントへのリンクを示します。

コンポーネントのバージョンAEM as a Cloud ServiceAEM 6.5.16.0 Forms 以降
v1リリース 2.0.4 以降と互換性ありリリース 1.1.12 以降、2.0.0 未満と互換性があります。

コアコンポーネントのバージョンとリリースについて詳しくは、コアコンポーネントのバージョンドキュメントをご覧ください。

技術的詳細

アダプティブフォームのタイトルコアコンポーネントの最新情報については、GitHub のテクニカルドキュメントをご覧ください。 コアコンポーネントの開発について詳しくは、コアコンポーネント開発者向けドキュメントをご覧ください。

設定ダイアログ

設定ダイアログを使用すると、訪問者によるタイトルの利用を簡単にカスタマイズできます。 また、簡単にタイトルオプションを定義して、シームレスなユーザーエクスペリエンスを実現することもできます。

「基本」タブ

編集ダイアログでは、コンテンツ作成者がタイトルテキストを定義したり、見出しレベルを選択したりできます。

  • タイトル - タイトルを使用すると、フォーム内のコンポーネントを簡単に識別できます。デフォルトでは、コンポーネントの上にタイトルが表示されます。タイトルを追加しない場合、コンポーネントの名前がタイトルテキストの代わりに表示されます。

  • 種類 / サイズ - タイトルの見出しレベルを定義します.

  • ID - このオプションを使用すると、HTML 内およびデータレイヤー内のコンポーネントの一意の識別子を制御できます。

    • 空白のままにした場合、一意の ID が自動的に生成されます。生成された ID は結果のページを調べることで確認できます。
    • ID を指定した場合、作者はその ID が一意であることを確認する必要があります。
    • ID を変更すると、CSS、JS、およびデータレイヤーのトラッキングに影響を与える可能性があります。

デザインダイアログ

「デザイン」タブでは、フォームタイトルコンポーネントの CSS スタイルを定義および管理できます。

タイトル

「タイトル」タブでは、テンプレート作成者がフォーム作成者のために、許可されるデフォルトの HTML 見出し要素を設定できます。

デザインダイアログの「プロパティ」タブ

  • 許可されている見出し要素：フォーム作成者がタイトルに使用できる見出し要素をテンプレート作成者が選択できる複数のオプションを含むリストです。

  • デフォルトの見出し要素：タイトルコンポーネントのデフォルトの見出し要素を設定するドロップダウンリストです。

「スタイル」タブ

タブを使用して、コンポーネントの CSS スタイルの定義と管理を行います。アダプティブフォームの日付選択コアコンポーネントは、AEM のスタイルシステムをサポートしています。

デザインダイアログの「タイトル」タブ

  • デフォルトの CSS クラス：アダプティブフォームのタイトルコアコンポーネントにデフォルトの CSS クラスを指定できます。

  • 許可されたスタイル：スタイルを表す名前と CSS クラスを指定してスタイルを定義します。 例えば、「bold text」という名前のスタイルを作成し、CSS クラス「font-weight: bold」を指定できます。 アダプティブフォームエディターでアダプティブフォームにこれらのスタイルを使用または適用できます。 スタイルを適用するには、アダプティブフォームエディターでスタイルを適用するコンポーネントを選択し、「プロパティ」ダイアログに移動して「スタイル」ドロップダウンリストから希望のスタイルを選択します。 スタイルを更新または変更する必要がある場合は、デザインダイアログに戻り、「スタイル」タブでスタイルを更新して変更を保存します。