チュートリアル:アダプティブフォームの公開

最終更新日: 2023-12-07

Hero-image

これは、最初のアダプティブフォームを作成するシリーズを構成するチュートリアルです。チュートリアルの使用例全体を理解、実行、デモするために、シリーズを時系列に沿って実施することをお勧めします。

アダプティブフォームの準備が整ったら、エンドユーザーが使用できるようフォームを公開することができます。エンドユーザーは、公開されたフォームを任意のデバイスおよびインターネットブラウザーで開くことができます。アダプティブフォームが公開されると、フォームと関連コンテンツが AEM オーサーインスタンスから AEM パブリッシュインスタンスにコピーされます。このパブリッシュインスタンスを通じて、エンドユーザーはフォームを使用できるようになります。

アダプティブフォームを公開するには、次の方法があります。

事前準備

  • AEM Forms パブリッシュインスタンスの設定:パブリッシュインスタンスは、パブリッシュモードで実行される AEM Forms のパブリッシュインスタンスです。実稼動環境では、パブリッシュインスタンスは組織のファイアウォールの外部にあります。
  • レプリケーションとリバースレプリケーションの設定:レプリケーションは、コンテンツをオーサーインスタンスからパブリッシュインスタンスにコピーし、ユーザー入力(フォーム入力など)をパブリッシュインスタンスからオーサーインスタンスに返します。

アダプティブフォームを AEM ページとして公開する

アダプティブフォームが AEM ページとして公開された場合、web ページ全体には公開されたフォームのみが含まれます。アダプティブフォームの URL を使用して、別の web ページからリンクすることができます。shipping-address-add-update-form アダプティブフォームを AEM ページとして公開するには:

  1. AEM Forms オーサーインスタンスにログインし、AEM Forms UI で shipping-address-add-update-form アダプティブフォームを探します。
    https://localhost:4502/aem/forms.html/content/dam/formsanddocuments
  2. shipping-address-add-update-form アダプティブフォームを選択し、「 」を選択します。 公開. アダプティブフォームに関連するアセットを含むダイアログが表示されます。選択 公開. アダプティブフォームが公開され、成功ダイアログが表示されます。
  3. パブリッシュインスタンスでフォームを開きます。エンドユーザーがフォームに入力して送信できるようになります。
    https://localhost:4503/content/forms/af/shipping-address-add-update-form.html

アダプティブフォームを AEM Sites ページに埋め込む

AEM Forms を使用するとフォーム開発者は、アダプティブフォームをシームレスに AEM Sites ページに埋め込むことができます。埋め込まれたアダプティブフォームではすべての機能を使用できるため、ユーザーは、ページから移動することなくフォームを記入および送信できます。これにより、ユーザーは web ページの他の要素に意識を保ちつつ、同時にフォームの操作も行うことができます。

AEM Forms には AEM Forms コンテナという名前のコンポーネントが用意されており、これを使用してアダプティブフォームを AEM Sites ページに埋め込むことができます。デフォルトでは、このコンポーネントは AEM Sites コンテナには表示されません。次の手順を実行して AEM Forms コンテナコンポーネントを有効にし、アダプティブフォームを AEM Sites ページに埋め込みます。

  1. We.Retail サイトでページを作成し、編集用に開きます。(例:https://localhost:4502/editor.html/content/we-retail/us/en/user/shipping-and-billing-address.html)アダプティブフォームが Sites ページに埋め込まれます。

    アダプティブフォームを既存の We.Retail Site’s ページに埋め込むこともできます。例えば、「会社概要」ページ(https://localhost:4502/editor.html/content/we-retail/us/en/about-us.html)に埋め込むことができます。これにより、ページを作成する時間を節約できます。以下では、ページを新たに作成する場合の手順を説明します。

    We.Retail サイトは AEM に付属しています。We.Retail サイトをインストールしていない場合は、We.Retail 参照実装を参照してサイトをインストールします。

  2. 選択 プロパティ ページ情報を選択し、 テンプレートを編集 」オプションが追加されました。 ブラウザーの新しいタブでページのテンプレートが表示されます。

  3. 内でを選択します。 レイアウトコンテナ ボックスとを選択します。 フィード管理. Adobe Analytics の 許可されたコンポーネント タブ、展開 一般 アコーディオンで、 AEM Form オプションを選択し、 save_icon. AEM Forms コンテナコンポーネントはそのページに対して有効になっています。

  4. 手順 1 で開いた AEM Sites ページを含むブラウザータブを開きます。 を選択します。 ここにコンポーネントをドラッグ ボックスとを選択します。 +. Adobe Analytics の 新規コンポーネントを挿入 ボックス、選択 AEM Form. この「AEM Forms コンテナ」コンポーネントがページに追加されます。

  5. を選択します。 AEM Formsコンテナ コンポーネントと選択 configure-icon. AEM Forms コンテナのプロパティを含むダイアログボックス が表示されます。アセットパス​フィールドで「 shipping-address-add-update-form 」アダプティブフォームを参照して選択してください。選択 save_icon. アダプティブフォームがページに埋め込まれました。

  6. アダプティブフォームと Sites ページの両方を公開します。次の点について考慮してください。

    • 初めて AEM Sites ページを公開する場合で、かつ、フォームが埋め込まれている場合は、Sites ページに加えて、埋め込まれたフォームも公開してください。

    • 公開されたサイトページに埋め込まれたフォームのみを変更する場合は、元のフォームを公開します。変更内容は、公開されたサイトページに反映されます。公開されたサイトページにはフォームへの参照情報が含まれているため、ページを再公開する必要はありません。

    • Sites ページと埋め込みフォームに変更を加えた場合、 Sites ページとフォームを再公開します。

      embed-in-aem-sites

    AEM Sites ページに追加された発送先住所と請求先住所の変更フォーム 。

外部 web ページへのアダプティブフォームの埋め込み

外部 web ページに数行の JavaScript を挿入することで、アダプティブフォームを外部 web ページ(AEM の外部でホストされる AEM 以外の web ページ )に埋め込むことができます。JavaScript コードは、アダプティブフォームおよび関連リソースの HTTP リクエストを AEM Forms サーバーに送信し、アダプティブフォームを web ページに追加します。手順について詳しくは、外部 web ページへのアダプティブフォームの埋め込みを参照してください。

このページ