AEM Forms を使用すると、フォーム開発者は AEM サイトページまたは AEM の外側にホストされた Web ページにアダプティブフォームおよびインタラクティブ通信をシームレスに埋め込むことができます。埋め込まれたアダプティブフォームおよびインタラクティブ通信ではすべての機能を使用できるため、ユーザーは、ページから移動することなくフォームの記入および送信を行えます。これにより、ユーザーは Web ページのその他のエレメントとのコンテキストを保ったまま、同時にフォームまたはインタラクティブ通信の操作を行うことができます。
外部 Web ページへのアダプティブフォームの埋め込みについて詳しくは、 外部 Web ページにアダプティブフォームを埋め込む.
AEM Sitesページでは、次のアイテムを使用して、アダプティブフォームまたはインタラクティブ通信を追加できます。
AEM Form コンテナコンポーネント
AEM Forms では、サイトページに追加できるコンポーネントを提供します。AEM Form コンテナコンポーネントを使用することで、アダプティブフォームやインタラクティブ通信を埋め込むことが可能になります。
アセットブラウザー 作成したフォームやインタラクティブ通信は、すべて「アセット」の下に表示されます。フォームは、アセットとしてページ上にドラッグ&ドロップすることができます。
編集可能なテンプレートを使用するAEMサイトページにアダプティブフォームまたはインタラクティブ通信を埋め込むには、AEMフォームコンポーネントを、関連するテンプレートで許可されるコンポーネントとして設定します。 詳しくは、「ページテンプレートの作成」の「ポリシーとプロパティ(レイアウトコンテナ)」を参照してください。
サイトページがスタティックテンプレートを使用している場合は、それをサイトページの段落システムから設定する必要があります。詳しくは、デザインモードでのコンポーネントの設定を参照してください。
AEM Forms コンテナコンポーネントを使用してアダプティブフォームやインタラクティブ通信を埋め込むには:
アダプティブフォームやインタラクティブ通信を埋め込む AEM サイトページを、編集モードで開きます。
コンポーネントブラウザーパネルからそのページ上に AEM Forms コンテナコンポーネントをドラッグ&ドロップします。
または、アセットブラウザーでアダプティブフォームまたはインタラクティブ通信を検索して、AEM サイトページにドラッグアンドドロップします。これにより、AEM Forms コンテナにフォームが埋め込まれます。
1 つのページ上の複数の AEM Forms コンテナコンポーネントはサポートされていません。
サイトページに埋め込まれた AEM Forms コンテナコンポーネントをタップし、アクションバーの をタップします。AEM Forms コンテナを編集ダイアログが開きます。
AEM Forms コンテナを編集ダイアログで、次の設定を行います。
アセットのタイプ:埋め込むアセットのタイプを選択します。選択肢はアダプティブフォームとインタラクティブ通信です。
アセットパス:埋め込むアダプティブフォームまたはインタラクティブ通信を参照して選択します。 また、アセットブラウザーからドロップすると、自動的に入力されます。
(アダプティブフォームのみ) 投稿送信:フォームの送信時にトリガーするアクションを選択します。 お礼のメッセージを表示するため、「ありがとうございます」ページを設けることができます。
テーマ:アダプティブフォームまたはインタラクティブ通信のコンポーネントのスタイルを定義するテーマを選択します。スタイル設定には、フォントスタイル、背景色、サイズ、配置など、外観のプロパティが含まれます。
高さ:コンテナの高さを指定します。自動でコンテナのサイズを調整するには、空白のままにします。
CSS クライアントライブラリ:CSS クライアントライブラリへのパスを指定します。
設定を保存します。アダプティブフォームまたはインタラクティブ通信がページに埋め込まれます。
ここでは、AEM サイトページに埋め込まれたアセット(アダプティブフォームまたはインタラクティブ通信)を発行する際における、次のようなシナリオを考えてみます。
AEM サイトページには、AEM Forms コンテナ内のアダプティブフォームおよびインタラクティブ通信への参照情報が保存されます。したがって、元のアダプティブフォームおよびインタラクティブ通信で構成されているすべての構成や特性(テーマ、スタイル、送信アクションなど)は、埋め込まれた形で保持されます。
埋め込まれたアダプティブフォームおよびインタラクティブ通信の構成やプロパティを変更するには、次のいずれかの操作を行います。
元のアダプティブフォームまたはインタラクティブ通信に加えた変更は、埋め込まれたフォームに自動的に反映されます。ただし、発行済みページに変更内容を反映するには、アダプティブフォーム、インタラクティブ通信またはサイトページを再発行する必要があります。
AEM サイトページにアダプティブフォームを埋め込む際は、以下の点に留意してください。