ドキュメントAEMコアコンポーネントガイド

フォームコンテナコンポーネント form-container-component

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

作成対象：

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

コアコンポーネントのフォームコンテナコンポーネントを使用すれば、シンプルな送信フォームを作成できます。

使用方法 usage

フォームコンテナコンポーネントは、シンプルな WCM フォームをサポートしており、フォームコンポーネントの追加が可能なネスト構造を使用しているので、シンプルな情報送信フォームおよび機能を作成できます。

設定ダイアログを使用すると、フォーム送信でトリガーされるアクション、送信を処理する URL、ワークフローをトリガーするかどうかをコンテンツ編集者が定義できます。テンプレート作成者は、デザインダイアログを使用して、テンプレートエディターにおける標準レイアウトコンテナのデザインダイアログと同様に、許可されるコンポーネントとそのマッピングを定義できます。

NOTE
コアコンポーネントのフォームコンテナコンポーネントでは、コアコンポーネントのフォームコンポーネント（ボタン、テキスト、非表示など）のみ使用できます。基盤コンポーネントのフォームコンポーネントをコアコンポーネントのフォームコンテナ内で使用すること（およびその逆の使用）はサポートされていません。

バージョンと互換性 version-and-compatibility

このドキュメントでは、フォームコンテナコンポーネントの現在のバージョン（2018年1月にコアコンポーネントのリリース 2.0.0 で導入された v2）について説明します。

コンポーネントのすべてのサポート対象バージョン、コンポーネントの各バージョンと互換性のある AEM バージョン、以前のバージョンのドキュメントへのリンクを次の表に示します。

コンポーネントのバージョン
AEM 6.4
AEM 6.5
AEM as a Cloud Service
v2
リリース 2.17.4 以前と互換性あり
互換性あり
互換性あり
v1
互換性あり
互換性あり
互換性あり

コアコンポーネントのバージョンとリリースについて詳しくは、コアコンポーネントのバージョンを参照してください。

コンポーネント出力のサンプル sample-component-output

フォームコンテナコンポーネントを体験し、その設定オプションや HTML および JSON 出力の例を確認するには、コンポーネントライブラリを参照してください。

技術的詳細 technical-details

フォームコンテナコンポーネントに関する最新の技術ドキュメントについては、GitHub を参照してください。

コアコンポーネントの開発について詳しくは、コアコンポーネント開発者向けドキュメントを参照してください。

設定ダイアログ configure-dialog

設定ダイアログでは、コンポーネントの送信時に実行されるアクションをコンテンツ作成者が定義できます。

選択した​ アクションタイプ ​に応じて、コンテナ内で使用可能なオプションが変わります。使用可能なアクションタイプは次のとおりです。

タイプに関係なく、各アクションに適用される一般的な設定があります。

Post Form Data post-data

フォームが送信されると、「Post Form Data」アクションタイプにより、送信されたデータを JSON 形式でサードパーティに渡して処理させます。

フォームコンテナコンポーネントの編集ダイアログの「Post Form Data」オプション

  • エンドポイント - データを処理する HTTPS サービスの完全修飾名
  • エラーメッセージ - 送信が成功しなかった場合に表示するメッセージ
TIP
転送されたフォームデータを処理するためにシステム管理者が調整できる追加のタイムアウトオプションが用意されています。詳しくは、GitHub の技術ドキュメントを参照してください。

Mail mail

アクションタイプが「Mail」の場合、フォームが送信されると、指定した受信者にメールが送信されます。

フォームコンテナコンポーネントの編集ダイアログのメールオプション

  • 件名 - フォーム送信時に送信されるメールの件名

  • 宛先 - フォーム送信時に送信されるメールの差出人のメールアドレス

  • 宛先- - フォーム送信時にメールを受信する受信者のアドレス

    • アドレスを追加するには、「追加」ボタンをタップまたはクリックします
    • メールアドレスを削除するには、「削除」ボタンをタップまたはクリックします

  • CC - フォーム送信時に送信されるメールのカーボンコピーを受信する受信者のアドレス

    • アドレスを追加するには、「追加」ボタンをタップまたはクリックします
    • メールアドレスを削除するには、「削除」ボタンをタップまたはクリックします

コンテンツを格納 store-content

フォームが送信されると、フォームのコンテンツは、指定されたリポジトリの場所に保存されます。

フォームコンテナの編集ダイアログのコンテンツ保存オプション

  • コンテンツのパス - 送信されたコンテンツが格納されるコンテンツリポジトリのパス
  • データを表示 - タップまたはクリックすると、保存された送信済みデータが JSON 形式で表示されます
  • ワークフローを開始 - フォーム送信時に保存されたコンテンツをペイロードとしてワークフローを開始するように設定します
NOTE
ユーザーデータを管理しやすくしたり、問題点を分離できるようにするために、ユーザー生成コンテンツをリポジトリ内に格納することは、一般的には推奨されません。
代わりに、Post Form Data アクションタイプを使用して、ユーザーコンテンツを専用のサービスプロバイダーに渡します。

一般設定 general-settings

ありがとうページは、選択したアクションタイプに関係なくいつでも定義できます。

フォームコンテナコンポーネントの編集ダイアログの一般オプション

  • ありがとうページ - フォーム送信の完了後、ユーザーは指定したページにリダイレクトされます。

    • 選択ダイアログを使用して、AEM 内のリソースを選択します。
    • ありがとうページが AEM にない場合は、絶対 URL を指定します。絶対 URL 以外の URL は、AEM からの相対 URL と解釈されます。
    • 空白のままにすると、送信後にフォームが再度表示されます。

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

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

デザインダイアログ design-dialog

テンプレート作成者は、デザインダイアログを使用して、テンプレートエディターにおける標準レイアウトコンテナのデザインダイアログと同様に、許可されるコンポーネントとそのコンテナマッピングを定義できます。

「スタイル」タブ styles-tab

フォームコンテナコンポーネントは、AEM スタイルシステムをサポートしています。

recommendation-more-help
d2be9096-a81e-404b-9952-d8925af7219c