AEM Sites ページへのアダプティブフォームの埋め込み embed-an-adaptive-form-to-aem-sites-page
概要 overview
AEM Forms を使用すると、フォーム開発者は AEM サイトページまたは AEM の外側にホストされた web ページにアダプティブフォームをシームレスに埋め込むことができます。埋め込まれたアダプティブフォームではすべての機能を使用できるため、ユーザーは、ページから移動することなくフォームに記入およびフォームを送信できます。これにより、ユーザーは web ページのその他の要素との整合性を保つことができ、同時にフォームとの相互作用も保つことができます。これにより、訪問者は、ページを離れることなく、フォームに簡単に入力して送信できます。この統合により、顧客が作成済みのアダプティブフォームを再利用する便利な方法が提供されます。
AEM ページエディターを使用すると、複数のフォームをすばやく作成して AEM Sites ページに追加できます。AEM ページエディターを使用すると、コンテンツ作成者は、動的な動作、検証、データ統合、レコードのドキュメントの生成、ビジネスプロセスの自動化など、アダプティブフォームのコンポーネントを活用して、Sites ページ内にシームレスなデータキャプチャのエクスペリエンスを作成できます。また、バージョン管理、ターゲティング、翻訳、マルチサイトマネージャーなど、AEM Sites ページの様々な機能を使用できます。
AEM Forms にはア ダプティブフォームコンテナおよびアダプティブフォーム（埋め込みコンポーネント）が用意されています。 以下を使用できます。 アダプティブForms — 埋め込み (v2) 既存のアダプティブフォームを追加するコンポーネント、またはアダプティブFormsエディターを使用してフォームを作成するコンポーネント アダプティブフォームコンテナ をクリックして、エクスペリエンスフラグメントページまたはAEM Sitesページ内に新しいフォームを作成します。
AEM Sites ページまたは AEM エクスペリエンスフラグメントでアダプティブフォームを作成または追加する方法？ various-options-to-create-or-embed-an-adaptive-form-in-aem-sites-page-or-aem-experience-fragment
次のオプションを使用すると、この機能を最大限に活用できます。
-
承認済みのテンプレートを使用してアダプティブフォームを作成し、AEM Sites ページに埋め込む： 事前に承認されたテンプレートを使用して、組織のブランディングガイドラインやデザイン標準に合ったアダプティブフォームをすばやく作成し、埋め込むことができます。
-
既存のフォームを AEM Sites ページに追加： 作成済みのフォームを web サイトに簡単に統合し、訪問者が直接操作できるようにします。
-
アダプティブフォームをエクスペリエンスフラグメントに変換： AEM Sites ページに追加されたアダプティブフォームをエクスペリエンスフラグメントに変換して、複数の AEM Sites ページでフォームを再利用します。
-
**カスタムアダプティブフォームを作成し、AEM Sites ページに追加：**アダプティブフォームコンテナ コンポーネントを使用すると、要件やデザインの環境設定に合わせてカスタマイズし、新規フォームをゼロから作成します。
-
カスタムアダプティブフォームを作成し、エクスペリエンスフラグメントに追加： AEM エクスペリエンスフラグメントにフォームを追加して、フォームのリーチを拡張し、複数のページやサイトでシームレスに再利用できます。
-
複数のフォームを AEM Sites ページまたはエクスペリエンスフラグメントに追加： 複数のアダプティブフォームを作成し、AEM Sites ページに追加して、ユーザーの環境設定や要件に基づいて複数の選択肢をユーザーに提供します。AEM ページエディターを使用すると、複数のフォームをすばやく作成して AEM Sites ページに追加できます。以下を使用すると、 アダプティブフォームコンテナ コンポーネントを複数回追加して、AEM SitesページにアダプティブFormsを追加します。 以下を使用すると、 アダプティブForms — 埋め込み AEM Sitesページでコンポーネントを複数回作成する ( フォームはフレームの幅全体をカバーします 」オプションが選択されている。 例えば、 フォームはフレームの幅全体をカバーします 「 」オプションがオフの場合、AEM Sitesページでは、iframe なしで存在するアダプティブフォームが 1 つだけサポートされます。 を使用してアダプティブFormsをさらに追加するには アダプティブForms — 埋め込み コンポーネント、選択 フォームはフレームの幅全体をカバーします オプション。
AEM Sites ページまたは AEM エクスペリエンスフラグメントでアダプティブフォームを作成する際の考慮事項 consideration
-
アダプティブフォーム - 埋め込み コンポーネントを使用してフォームを作成または追加する場合、そのフォームは AEM Forms の翻訳フローを使用して翻訳およびローカライゼーションが実行されます。 この場合、単一のフォームが維持され、Sites ページのすべての言語コピーで参照されます。アダプティブフォーム - 埋め込み コンポーネントでは、バージョン管理、ターゲティング、翻訳、マルチサイトマネージャーなど、AEM Sites ページの様々な機能にアクセスできません。
-
アダプティブフォームコンテナ を使用してフォームを作成または追加する場合、フォームは AEM Sites 翻訳フローを通じて翻訳およびローカライゼーションが実行されます。言語ごとに、Sites ページと対応するフォームの個別のコピー（言語コピー）が生成され、コンテンツ作成者が親ページのフォームのルールを変更する場合は、全言語のフォームのコピーで同じ変更を行う必要があります。アダプティブフォームコンテナ では、AEM Sites ページの様々な機能（バージョン管理、ターゲティング、翻訳、マルチサイトマネージャーなど）を使用できます。
AEM Sites ページまたは AEM エクスペリエンスフラグメントでアダプティブフォームを作成する際の考慮事項 before-you-start-embedding-an-adaptive-form
新しいアダプティブフォームまたは既存のアダプティブフォームを埋め込む前に、 アダプティブForms — 埋め込み (v2)，有効 アダプティブFormsコアコンポーネント とを追加します。 アダプティブFormsクライアントライブラリ をAEM Sitesページに追加します。
フォームコンテナ 設定ダイアログボックスで「フォームがページの幅全体に広がっている場合」オプションが選択されており、コアコンポーネントを使用したアダプティブフォームが使用されている場合は、対応する Sites ページに clientlibs を含める必要があります。
次を追加： Customheaderlibs および Customfooterlibs クライアントライブラリをAEM Sitesページに追加します。 ライブラリを追加するには、次の手順を実行します。
-
AEM Cloud Service Git リポジトリにアクセスしてクローンを作成します。
-
プランテキストエディターで AEM Cloud Service Git リポジトリフォルダーを開きます。例えば Microsoft Visual Code などです。
-
ui.apps\src\main\content\jcr_root\apps\[your-project]\components\page\customheaderlibs.htmlファイルを開き、次のコードをファイルに追加します。code language-none //Customheaderlibs.html <sly data-sly-use.clientlib="core/wcm/components/commons/v1/templates/clientlib.html"> <sly data-sly-call="${clientlib.css @ categories='core.forms.components.runtime.all'}"/> </sly> -
ui.apps\src\main\content\jcr_root\apps\[your-project]\components\page\customfooterlibs.htmlファイルを開き、次のコードをファイルに追加します。code language-none //customfooterlibs.html <sly data-sly-use.clientlib="core/wcm/components/commons/v1/templates/clientlib.html"> <sly data-sly-test="${!wcmmode.edit}" data-sly-call="${clientlib.js @ categories='core.forms.components.runtime.all', async=true}"/> </sly> -
ui.apps\src\main\content\jcr_root\apps\[your-project]\components\xfpage\customheaderlibs.htmlファイルを開き、次のコードをファイルに追加します。code language-none //Customheaderlibs.html <sly data-sly-use.clientlib="core/wcm/components/commons/v1/templates/clientlib.html"> <sly data-sly-call="${clientlib.css @ categories='core.forms.components.runtime.all'}"/> </sly> -
ui.apps\src\main\content\jcr_root\apps\[your-project]\components\xfpage\customfooterlibs.htmlファイルを開き、次のコードをファイルに追加します。code language-none //customfooterlibs.html <sly data-sly-use.clientlib="core/wcm/components/commons/v1/templates/clientlib.html"> <sly data-sly-test="${!wcmmode.edit}" data-sly-call="${clientlib.js @ categories='core.forms.components.runtime.all', async=true}"/> </sly> -
デプロイメントパイプラインを実行して、クライアントライブラリを AEM as a Cloud Service 環境にデプロイします。
テンプレートのポリシーで アダプティブフォーム - 埋め込み（v2） コンポーネントを有効にするには、次の手順を実行します。
- AEM Sites ページまたはエクスペリエンスフラグメントを編集用に開きます。ページを編集用に開くには、ページを選択して「編集」をクリックします。
- Sites ページまたはエクスペリエンスフラグメントページのテンプレートを開きます。テンプレートを開くには、ページ情報 に移動し、
- 構造ビューで、メニューバーから「ポリシー」
- 「完了」をクリックします。
| embed |
|---|
|
|
アダプティブフォーム - 埋め込みコンポーネントを使用してアダプティブフォームを埋め込むには： embed-an-adaptive-form-in-sites-editor-or-experience-fragment
以下を使用します。 アダプティブForms — 埋め込み (v2) フォーム作成ウィザードを使用して、AEM Sitesエディター内で直接アダプティブフォームを作成するためのコンポーネントです。 結果のフォームは外部エンティティとして保存され、他の Sites ページやスタンドアロンフォームで再利用できます。 要件やデザインの環境設定に合わせて、AEM Sites ページまたはエクスペリエンスフラグメント内で直接新しいフォームを最初から作成できます。単一用途のフォームの場合は、AEM Sites ページへの直接オーサリングをお勧めします。一方、エクスペリエンスフラグメントは、web サイトの複数のページで再利用する必要があるフォームに最適です。
新しいフォームを簡単に埋め込むには、 アダプティブForms — 埋め込み (v2). 例えば、新しい連絡先フォームをAEM SitesページやAEM Experience Fragment に組み込むとします。 AEM Sitesページまたはエクスペリエンスフラグメント内の連絡先フォームに対する更新や変更は、デプロイ先のすべてのページに自動的に適用されます。 これにより、Web サイトのフォームの管理が簡素化され、プロセス全体を合理化しながら、シームレスなユーザーエクスペリエンスを実現します。
使用 アダプティブForms — 埋め込み (v2) を使用すると、次のことができます。
AEM SitesページのアダプティブFormsウィザードを使用して新しいフォームを埋め込む embed-form-using-adaptive-form-wizzard-aem-sites
新しいフォームをAEM Sitesページに埋め込む手順は次のとおりです。
-
AEM Sites ページを編集モードで開きます。
-
コンポーネントブラウザーパネルから、アダプティブフォーム - 埋め込み（v2） コンポーネントをページ上にドラッグ＆ドロップします。
-
「プラス」アイコンをクリックすると、フォーム作成ウィザードにリダイレクトされます。
-
フォーム作成 ウィザードから新しいアダプティブフォームを作成します。
アセットパス には、作成されたアダプティブフォームのパスが既に含まれています -
設定を保存します。これで、アダプティブフォームがページに埋め込まれました。
次に、次の操作を行います。 送信アクションの設定 埋め込まれたアダプティブフォームの詳細プロパティを作成するには、フォーム作成ウィザードを使用します。
アダプティブフォームウィザードを使用して、エクスペリエンスフラグメントに新しいフォームをFormsに埋め込む embed-form-using-adaptive-form-wizzard-experience-fragment
エクスペリエンスフラグメントに新しいフォームを埋め込む手順は、次のとおりです。
-
エクスペリエンスフラグメントを編集モードで開きます。
-
コンポーネントブラウザーパネルから、アダプティブフォーム - 埋め込み（v2） コンポーネントをページ上にドラッグ＆ドロップします。
-
「プラス」アイコンをクリックすると、フォーム作成ウィザードにリダイレクトされます。
-
フォーム作成 ウィザードから新しいアダプティブフォームを作成します。
アセットパス には、作成されたアダプティブフォームのパスが既に含まれています -
設定を保存します。これで、アダプティブフォームがページに埋め込まれました。
次に、次の操作を行います。 送信アクションの設定 埋め込まれたアダプティブフォームの詳細プロパティを作成するには、フォーム作成ウィザードを使用します。
AEM Sites ページへのアダプティブフォームの埋め込み embed-an-adaptive-form-in-sites-editor
を使用 アダプティブForms — 埋め込み (v2) コンポーネントを使用すると、既存のアダプティブフォームをAEM Sites内のページに容易に統合できます。 この機能は、アダプティブFormsの適応性と再利用性を大幅に向上させ、作成済みのフォームを再利用する便利な方法を提供します。 例えば、AEM Sitesページに連絡先フォームを組み込むと、フォームを複数回再作成しなくても済むとします。
Sites ページでアダプティブフォームを作成するには、次の手順を実行します。
- AEM Sites ページを編集モードで開きます。
- アダプティブフォームコンテナ コンポーネントをコンポーネントブラウザーから Sites ページにラッグ＆ドロップします。
- Sites ページに埋め込まれた アダプティブフォーム - 埋め込み コンポーネントを選択し、アクションバーの
- アセットパス に埋め込むアダプティブ フォームを参照して選択します。
- 設定を保存します。これで、アダプティブフォームがページに埋め込まれました。
次に、次の操作を行います。 送信アクションの設定 埋め込まれたアダプティブフォームの詳細プロパティを作成するには、フォーム作成ウィザードを使用します。
エクスペリエンスフラグメント内に既存のアダプティブフォームを埋め込む embed-an-adaptive-form-in-experience-fragment
また、フォームをAEM Experience Fragment に埋め込むことで、フォームのアクセシビリティを拡張することもできます。 エクスペリエンスフラグメント内にアダプティブフォームを作成するには、次の手順を実行します。
- エクスペリエンスフラグメントを編集モードで開きます。
- アダプティブフォームコンテナ コンポーネントを、コンポーネントブラウザーからエクスペリエンスフラグメントにドラッグ＆ドロップします。
- エクスペリエンスフラグメントに埋め込まれた アダプティブフォーム - 埋め込み コンポーネントを選択し、アクションバーの
- アセットパス に埋め込むアダプティブ フォームを参照して選択します。
- 設定を保存します。アダプティブフォームがエクスペリエンスフラグメントに埋め込まれました。
次に、次の操作を行います。 送信アクションの設定 埋め込まれたアダプティブフォームの詳細プロパティを作成するには、フォーム作成ウィザードを使用します。
AEM Sites ページ内のフォームをエクスペリエンスフラグメントに変換 convert-an-adaptive-form-in-sites-page-to-an-experience-fragment
Sites ページエディター内にある既存のアダプティブフォームをエクスペリエンスフラグメントに変換すると、複数のページやサイトでフォームを再利用できます。
AEM Sites ページ内のアダプティブフォームをエクスペリエンスフラグメントに変換するには、次の手順を実行します。
-
アダプティブフォームを含む AEM Sites ページ（アダプティブフォームコンテナコンポーネント内）を編集モードで開きます。
-
コンテンツツリーを開き、アダプティブフォームをホストする アダプティブフォームコンテナ を選択します。1 つの AEM Sites ページで複数のアダプティブフォームをホストできます。したがって、適切なアダプティブフォームコンテナを慎重に選択してください。
-
メニューバーで、
アダプティブフォームコンテナを新しいエクスペリエンスフラグメントに変換するか、既存のエクスペリエンスフラグメントに追加するためのダイアログボックスが表示されます。
-
エクスペリエンスフラグメントバリエーションに変換 ダイアログボックスで、次のオプションの値を設定します。
- アクション： 新しいエクスペリエンスフラグメントを作成するか、既存のエクスペリエンスフラグメントに追加するかを選択します。
- 親パス： エクスペリエンスフラグメントをホストするフォルダーのパスを指定します。このオプションは、新しいエクスペリエンスフラグメントを作成する場合にのみ使用できます。
- テンプレート： エクスペリエンスフラグメントテンプレートのパスを指定します。エクスペリエンスフラグメントテンプレートがない場合は、作成します。このオプションは、アダプティブフォームを既存のエクスペリエンスフラグメントに追加する場合にのみ使用できます。
- フラグメントのタイトル： エクスペリエンスフラグメントのタイトルを指定します。タイトルは、エクスペリエンスフラグメントを一意に識別します。
- フラグメントのタイトル： エクスペリエンスフラグメントのタイトルを指定します。このタグは、エクスペリエンスフラグメントのカテゴリを一意に識別します。
アダプティブフォーム埋め込み (v2) プロパティの設定
アダプティブフォーム - 埋め込み（v2） コンポーネントの詳細設定をカスタマイズできます。アダプティブフォーム - 埋め込み（） ダイアログでは、次の項目を指定できます。
-
アセットパス：埋め込むアダプティブフォームを閲覧して選択します。また、アセットブラウザーからドロップすると、自動的に入力されます。
-
送信後処理：フォーム送信時にトリガーするアクションを選択します。お礼のメッセージを表示するため、「ありがとうございます」ページを設けることができます。
- ありがとうメッセージの表示：フォーム送信時に表示するメッセージをリッチテキストエディターで書き込みます。このオプションは、ありがとうメッセージの表示が有効な場合にのみ選択できます。
- ありがとうページの表示： フォームの送信時に表示するページを参照して選択します。このオプションは、ありがとうページの表示が有効な場合にのみ選択できます。
- ありがとうページにリダイレクト：このオプションを有効にすると、アダプティブフォームが埋め込まれたページはありがとうページに置き換わります。 このオプションを有効にしない場合は、アダプティブフォーム - 埋め込み コンポーネント内のアダプティブフォームがありがとうページに置き換わり、ベースとなる Sites ページは更新されません。このオプションは、ありがとうページの表示が有効な場合にのみ選択できます。
- 感謝状メッセージ：フォームが正常に送信された後に画面に表示される簡単な確認または確認。
- 感謝のページ：フォームが正常に送信された後に表示するページを参照および選択します。
-
ページ言語を使用：アダプティブフォームのロケールではなく、AEM Sites ページのロケールを使用します。このオプションは、アダプティブフォーム (Foundation) にのみ適用されます。
-
フォームにフォーカスを設定：アダプティブフォームの最初のフィールドにフォーカスを設定する場合に選択します。このオプションは、アダプティブフォーム (Foundation) にのみ適用されます。
-
テーマ： アダプティブフォームのコンポーネントのスタイルを定義するテーマを選択します。スタイル設定には、フォントスタイル、背景色、サイズ、配置など、外観のプロパティが含まれます。このオプションは、アダプティブフォーム (Foundation) にのみ適用されます。
note note NOTE 以下を使用すると、 ページ言語を使用, フォームにフォーカスを設定 および テーマ のオプションは、アダプティブフォーム (Foundation) に対してのみ使用できます。 -
フォームはフレームの幅全体をカバーします：インラインフレーム (iframe) は、アダプティブフォームをAEM Sitesページに読み込むHTML要素です。
-
次の場合、 フォームはフレームの幅全体をカバーします チェックボックスがオンの場合、アダプティブフォームは配置されるコンテナの全幅を占有します。 この場合、iframe はフォームのレンダリングには使用されません。 アダプティブフォームのレイアウトとデザインは、コンテナの幅全体に適応し、レスポンシブで、様々な画面サイズに調整できます。 このオプションを使用すると、AEM Sites ページ内に複数のアダプティブフォームを埋め込むことができます。
note note NOTE 複数のフォームをAEM Sitesページに埋め込むには、 フォームはフレームの幅全体をカバーします チェックボックス。 -
次の場合、 フォームはフレームの幅全体をカバーします チェックボックスがオフの場合、アダプティブフォームはコンテナの幅全体をカバーしません。 代わりに、iframe を使用してフォームをレンダリングします。このフォームは、特定の幅を超えて拡張することはできません。 この方法は、アダプティブフォームに明確な境界があり、コンテナ内でアダプティブフォームの隣にある他の AEM コンポーネントと共存する必要がある場合に役立ちます。このオプションを選択しない場合、AEM Sitesページで iframe を使用せずに埋め込むアダプティブFormsは 1 つだけになります。
note note NOTE AEM Sitesページでは、iframe なしで存在するアダプティブフォームは 1 つだけサポートされています。 を使用してアダプティブFormsをさらに追加するには アダプティブForms — 埋め込み コンポーネント、選択 フォームはフレームの幅全体をカバーします オプション。
-
-
高さ：コンテナの高さを指定します。コンテナのサイズを自動的に変更するには、空白のままにします。
-
CSS クライアントライブラリ：CSS クライアントライブラリへのパスを指定します。
埋め込まれたアダプティブフォームの公開 publishing-embedded-adaptive-form
ここでは、AEM Sites ページに埋め込まれたアダプティブフォームを公開するための、次のようなシナリオを考えてみます。
- 初めて AEM Sites ページを公開する場合で、かつページにアダプティブフォームが埋め込まれている場合は、Sites ページに加え、埋め込みアセットも公開します。
- 公開済みサイトページに埋め込まれたアダプティブフォームのみを変更した場合は、元のアセットを公開します。変更内容は、公開されたサイトページに反映されます。公開されたサイトページにはアセットへの参照情報が含まれているため、ページを再公開する必要はありません。
- サイトページに加え、埋め込まれたアダプティブフォームを変更した場合は、サイトページと埋め込みアセットを再公開します。
埋め込まれたアダプティブフォームの公開 modifying-embedded-adaptive-form
埋め込まれたアダプティブフォームの設定やプロパティを変更するには、次のいずれかの操作を行います。
- それぞれのエディターのアダプティブフォームで元のフォームを開いて、変更します。
- 編集モードで開いた Site ページ内からアダプティブフォームを選択し、「新しいウィンドウで編集」をクリックします。元のフォームは、修正可能な編集モードで開きます。
ベストプラクティス best-practices
AEM Sites ページにアダプティブフォームを埋め込む際は、以下の点に留意してください。
- 元のフォームにあったヘッダーとフッターは、埋め込まれたフォームには含まれません。
- ユーザードラフトと埋め込みフォームの送信はサポートされており、フォームポータル上の「下書き」タブや「送信済みフォーム」タブに表示されます。
- 元のフォームに設定された送信アクションは、埋め込まれたフォームでも保持されます。
- 元のフォームに Adobe Analytics が設定されている場合、埋め込まれたフォームの分析データは Adobe Analytics でキャプチャされます。ただし、フォームの分析レポートでは使用できません。