チュートリアル：アダプティブフォームの作成

02-create-adaptive-form-main-image

これは、「最初のアダプティブフォームを作成する」シリーズを構成するチュートリアルです。チュートリアル内のユースケースを理解して実際に操作できるように、このシリーズのチュートリアルを最初から順に学習することをお勧めします。

このチュートリアルについて

アダプティブフォームは、動的でレスポンシブな次世代型のフォームです。アダプティブフォームを使用して、エクスペリエンスをカスタマイズすることができます。また、アダプティブフォームをAdobe Analyticsと統合して使用状況の統計を確認し、Adobe Campaignをキャンペーン管理に統合することもできます。 アダプティブフォームの機能について詳しくは、「アダプティブフォームのオーサリングの概要」を参照してください。

正しい手順を踏めば、フォームの作成と管理を簡単に行うことができます。このチュートリアルでは、以下の操作を行う方法について説明します。

このチュートリアルの最後に、以下のようなフォームにアクセスするためのリンクがあります。

手順 1：アダプティブフォームを作成する

  1. AEM オーサーインスタンスにログインし、Adobe Experience Manager／フォーム／フォームとドキュメント​に移動します。デフォルトのURLはhttp://localhost:4502/aem/forms.html/content/dam/formsanddocumentsです。

  2. 「作成」をタップして、「アダプティブフォーム」を選択します。テンプレートを選択するためのオプションが表示されます。空白​テンプレートをタップして選択し、「次へ」をタップします。

  3. 「プロパティを追加」オプションが表示されます。「タイトル」フィールドと「名前」フィールドは入力必須です。

    • タイトル： 「タイト Add new or update shipping address ル」フィールドで ​​指定します。「タイトル」フィールドに入力した値が、フォームの表示名になります。タイトルは、AEM Formsユーザーインターフェイスでフォームを識別するのに役立ちます。
    • 名前： 「名前」フィ shipping-address-add-update-form ールドで ​​指定します。「名前」フィールドに入力した値が、フォームの名前になります。指定された名前を持つノードがリポジトリに作成されます。タイトルを入力し始めると、名前フィールドの値が自動的に生成されます。候補として入力された値は変更可能です。「ドキュメント名」フィールドには、英数字、ハイフン、アンダースコアのみを使用できます。無効な入力は、すべてハイフンに置き換えられます。

  4. 「作成」をタップします。アダプティブフォームが作成され、フォームを編集用に開くためのダイアログが表示されます。「開く」をタップし、新しく作成されたフォームを新しいタブで開きます。フォームが編集モードで表示されます。新しく作成されたフォームを必要に応じてカスタマイズするためのサイドバーも表示されます。

    アダプティブフォームのオーサリングインターフェースと使用可能なコンポーネントについて詳しくは、「アダプティブフォームの作成について」を参照してください。

    新しく作成されたアダプティブフォーム

AEM Formsは、アダプティブフォーム上に情報を表示するための多くのコンポーネントを提供します。 ヘッダーコンポーネントとフッターコンポーネントを使用すると、フォームの全体的な外観を統一することができます。ヘッダーには通常、会社のロゴ、フォームのタイトル、フォームの概要を指定します。フッターには通常、著作権に関する情報と他のページへのリンクを指定します。

  1. toggle-side-panel > treeexpandallをタップします。 コンポーネントブラウザーが表示されます。ヘッダー​コンポーネントを、コンポーネントブラウザーからアダプティブフォームにドラッグします。

  2. 「ロゴ」をタップします。ツールバーが表示されます。ツールバーのaem_6_3_editをタップし、We.Retail​と入力して、aem_6_3_forms_saveをタップします。

  3. 「画像」をタップします。ツールバーが表示されます。cmpprをタップします。 画面の左側にプロパティブラウザーが表示されます。「参照」をタップして、ロゴ画像をアップロードします。aem_6_3_forms_saveをタップします。 画像がヘッダーに表示されます。

    上記の「Get file」をタップすると、このチュートリアルで使用するロゴをダウンロードすることができます。

ファイルを入手

  1. フッター​コンポーネントをtreeexpandallからアダプティブフォームにドラッグします。 この段階では、フォームは次のようになります。

    adaptive-form-with-headers-and-footers

手順 3：情報を取得して表示するためのコンポーネントを追加する

コンポーネントは、アダプティブフォームを構成するための構築ブロックです。AEM Formsは、アダプティブフォームで情報を取得して表示するための多くのコンポーネントを提供します。 コンポーネントをtreeexpandallからフォームにドラッグできます。 使用可能なコンポーネントと対応する機能については、「アダプティブフォームのオーサリングの概要」を参照してください。

  1. 数値ボックスコンポーネント​をアダプティブフォームにドラッグします。 フッターコンポーネントの前にドロップします。コンポーネントのプロパティを開き、コンポーネントの​タイトル​を​Customer ID​に変更し、要素名​を​customer_ID​に変更し、必須フィールド​オプションを有効にし、HTML5番号入力タイプ​を使用して、10/>aem_6_3_forms_save🔗

  2. 3 つのテキストボックスコンポーネントをアダプティブフォームにドラッグし、フッターコンポーネントの前にドロップします。これらのテキストボックスについて、以下のプロパティを設定します。：

    プロパティ テキストボックス 1
    		 テキストボックス 2
    		 テキストボックス 3
    タイトル 名前
    		 発送先住所 状態
    要素名 customer_Name
    		 customer_Shipping_Address customer_State
    必須フィールド Enabled 有効 有効
    複数行を許可
    		 無効 有効 無効

  3. 数値ボックス​コンポーネントをフッターコンポーネントの前にドラッグします。コンポーネントのプロパティを開き、次の表に示す値を設定して、aem_6_3_forms_saveをタップします。

    プロパティ 値
    タイトル 郵便番号
    要素名 customer_ZIPCode
    最大桁数 6
    必須フィールド 有効
    表示パターンタイプ パターンなし

  4. 電子メール​コンポーネントをフッターコンポーネントの前にドラッグします。コンポーネントのプロパティを開き、次の表に示す値を設定して、aem_6_3_forms_saveをタップします。

    プロパティ 値
    タイトル 電子メール
    要素名 customer_Email
    必須フィールド 有効

  5. 添付ファイル​コンポーネントをフッターコンポーネントの前にドラッグします。コンポーネントのプロパティを開き、次の表に示す値を設定して、aem_6_3_forms_saveをタップします。

    プロパティ 値
    タイトル Government approved address proof
    要素名 customer_Address_Proof
    必須フィールド 有効

  6. 送信ボタン​コンポーネントをアダプティブフォームにドラッグし、フッターコンポーネントの前にドロップします。コンポーネントのプロパティを開き、「要素名」をaddress_addition_update_submitに変更し、aem_6_3_forms_saveをタップします。 これでフォームのレイアウトが設定され、フォームが以下のように表示されます。

    adaptive-form-with-all-the-components

手順 4：アダプティブフォームの送信アクションを設定する

アダプティブフォームの「送信」ボタンをタップすると、送信アクションがトリガーされます。送信アクションを使用して、フォームデータをローカルリポジトリに保存したり、フォームデータを REST エンドポイントに送信したり、フォームデータを電子メールとして送信したりすることができます。アダプティブフォームには、そのほかにも、すぐに使用できる送信アクションがいくつか用意されています。詳しくは、「送信アクションの設定」を参照してください。

次の手順を使用して、フォームの電子メール送信アクションとデモ送信アクションを設定できます。

  1. 電子メールサーバーを設定します。詳しくは、「電子メール通知の設定」を参照してください。

  2. コンテンツブラウザーで「フォームコンテナ」をタップし、cmpprをタップします。 左側にプロパティブラウザーが開きます。

  3. 送信／送信アクション​に移動します。「電子メールを送信」を選択します。次の値を指定してaem_6_3_forms_saveをタップします。

    プロパティ 値
    送信元 donotreply@weretail.com
    To ${customer_Email}
    件名 Acknowledgement: You have added shipping address on We.Retail website.
    電子メールテンプレート ${customer_Name}様、お客様のアカウントの配送先住所として次の住所が追加されます。
    ${customer_Name}、${customer_Shipping_Address}、${customer_State}、${customer_ZIPCode}
    取り扱い、We.Retail
    添付ファイルを含める 有効

    これでフォームが作成されました。フォームのプレビューを表示して機能をテストすることができます。このチュートリアルに記載されている名前を使用し、AEM Formsサーバーを実行するマシン上のフォームにアクセスした場合、フォームはhttp://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.htmlで利用できます。

手順 5：アダプティブフォームのプレビューを表示して、アダプティブフォームを送信する

プレビューオプション​を使用して、フォームの外観と動作を確認することができます。プレビューモードでフォームを送信し、フォームに適用された検証機能を確認することもできます。例えば、必須フィールドに値が入力されていな場合は、エラーメッセージが表示されます。

アダプティブフォームには、各種のデバイスでフォームの操作性をエミュレートするためのオプションも用意されています。例えば、iPhone、iPad、デスクトップパソコンなどのデバイスについて、エミュレーションを行うことができます。プレビュー​と​エミュレーター ルーラーのオプションを組み合わせて使用し、画面サイズの異なるデバイス用のフォームをプレビューできます。

  1. フォームエディター右側の「プレビュー」オプションをタップします。プレビューモードでフォームが開きます。 このチュートリアルに記載されている値を使用してフォームを作成した場合、フォームのプレビュー URL は http://localhost:4502/content/dam/formsanddocuments/shipping-address-add-update-form/jcr:content?wcmmode=disabled になります。
  2. rulerを使用して、様々なデバイスでのフォームの外観を表示します。
  3. フォームのフィールドに値を入力して「送信」をタップします。フォームが送信され、デフォルトの「ありがとうございます」ページにリダイレクトされます。カスタムの「ありがとうございます」ページを指定することもできます。詳しくは、「リダイレクトページの設定」を参照してください。

これで、住所を追加するためのアダプティブフォームの準備が完了しました。チュートリアルに記載されている名前を使用し、AEM Formsサーバーを実行しているマシン上のフォームにアクセスした場合、フォームはhttp://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.htmlで利用できます。

このページ