Show Menu
トピック×

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

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

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

アダプティブフォームは、動的でレスポンシブな次世代型のフォームです。アダプティブフォームを使用して、エクスペリエンスをカスタマイズすることができます。You can also integrate adaptive forms with Adobe Analytics for usage statistics and Adobe Campaign for campaign management. For more information about adaptive forms capabilities, see Introduction to authoring adaptive forms .
正しい手順を踏めば、フォームの作成と管理を簡単に行うことができます。このチュートリアルでは、以下の操作を行う方法について説明します。
このチュートリアルの最後に、以下のようなフォームにアクセスするためのリンクがあります。 form-preview-mobile.gif

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

  1. AEM オーサーインスタンスにログインし、 Adobe Experience Manager フォーム フォームとドキュメント ​に移動します。The default URL is http://localhost:4502/aem/forms.html/content/dam/formsanddocuments .
  2. 作成 」をタップして、「 アダプティブフォーム 」を選択します。テンプレートを選択するためのオプションが表示されます。 空白 ​テンプレートをタップして選択し、「 次へ 」をタップします。
  3. プロパティの追加 」オプションが表示されます。「 タイトル 」フィールドと「 名前 」フィールドは入力必須です。
    • タイトル: Add new or update shipping address タイトル ​」フィールドで指定します。 「タイトル」フィールドに入力した値が、フォームの表示名になります。The title helps you identify the form in the AEM Forms user interface.
    • 名前: shipping-address-add-update-form 名前 ​」フィールドにを指定します。 「名前」フィールドに入力した値が、フォームの名前になります。指定された名前のノードがリポジトリに作成されます。タイトルを入力し始めると、名前フィールドの値が自動的に生成されます。候補として入力された値は変更可能です。「ドキュメント名」フィールドには、英数字、ハイフン、アンダースコアのみを使用することができます。無効な入力はすべてハイフンに置き換えられます。
  4. 作成 」をタップします。アダプティブフォームが作成され、フォームを編集用に開くためのダイアログが表示されます。Tap Open to open the newly created form in a new tab. フォームが編集モードで表示されます。新しく作成されたフォームを必要に応じてカスタマイズするためのサイドバーも表示されます。
    アダプティブフォームのオーサリングインターフェースと使用可能なコンポーネントについて詳しくは、「 アダプティブフォームの作成について 」を参照してください。

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

コンポーネントは、アダプティブフォームを構成するための構築ブロックです。AEM Forms provides many components to capture and display information in an adaptive form. You can drag the components from to a form. To learn about available components and corresponding functionality, see Introduction to authoring adaptive forms .
  1. Drag the Numeric Box component to the adaptive form. フッターコンポーネントの前にドロップします。Open properties of the component, change Title of the component to Customer ID , change Element Name to customer_ID , enable the Required Field option, enable the Use HTML5 Number Input Type option, and tap .
  2. 3 つのテキストボックスコンポーネントをアダプティブフォームにドラッグし、フッターコンポーネントの前にドロップします。これらのテキストボックスについて、以下のプロパティを設定します。:
    Property テキストボックス 1 テキストボックス 2 テキストボックス 3
    タイトル 名前 発送先住所 都道府県
    要素名 customer_Name customer_Shipping_Address customer_State
    必須フィールド Enabled Enabled Enabled
    複数行を許可 無効 Enabled 無効
  3. 数値ボックス ​コンポーネントをフッターコンポーネントの前にドラッグします。Open properties of the component, set values listed in the below table, Tap .
    プロパティ
    タイトル
    郵便番号
    要素名
    customer_ZIPCode
    最大桁数
    6
    必須フィールド
    Enabled
    表示パターンタイプ
    パターンなし
  4. 電子メール ​コンポーネントをフッターコンポーネントの前にドラッグします。Open properties of the component, set values listed in the below table, and tap .
    プロパティ
    タイトル
    電子メール
    要素名
    customer_Email
    必須フィールド
    Enabled
  5. 添付ファイル ​コンポーネントをフッターコンポーネントの前にドラッグします。Open properties of the component, set values listed in the below table, and tap .
    プロパティ
    タイトル Government approved address proof
    要素名 customer_Address_Proof
    必須フィールド Enabled
  6. 送信ボタン ​コンポーネントをアダプティブフォームにドラッグし、フッターコンポーネントの前にドロップします。コンポーネントのプロパティを開き、「要素名」を「 address_addition_update_submit 」に変更し、「 」をタップします。 これでフォームのレイアウトが設定され、フォームが以下のように表示されます。

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

アダプティブフォームの「送信」ボタンをタップすると、送信アクションがトリガーされます。送信アクションを使用して、フォームデータをローカルリポジトリに保存したり、フォームデータを REST エンドポイントに送信したり、フォームデータを電子メールとして送信したりすることができます。アダプティブフォームには、そのほかにも、すぐに使用できる送信アクションがいくつか用意されています。詳しくは、「 送信アクションの設定 」を参照してください。
次の手順を使用して、フォームの電子メール送信アクションとデモの送信アクションを設定できます。
  1. 電子メールサーバーを設定します。詳しくは、「 電子メール通知の設定 」を参照してください。
  2. Tap Form Container in the Content browser and tap . プロパティブラウザが左側に開きます。
  3. 送信 送信アクション ​に移動します。「 電子メールを送信 」を選択します。次の値を指定し、「 」をタップします。
    プロパティ
    送信元
    To
    ${customer_Email}
    件名
    Acknowledgement: You have added shipping address on We.Retail website.
    電子メールテンプレート
    こんにちは ${customer_Name} 。アカウントの配送先住所として次の住所が追加されます。
    ${customer_Name} , ${customer_Shipping_Address} , ${customer_State} , ${customer_ZIPCode}
    Grazts, We.Retail
    添付ファイルを含める
    Enabled
    これでフォームが作成されました。フォームのプレビューを表示して機能をテストすることができます。If you have used the name mentioned the tutorial and accessing the form on the machine running AEM Forms server, then the form is available at http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html .

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

プレビューオプション ​を使用して、フォームの外観と動作を確認することができます。プレビューモードでフォームを送信し、フォームに適用された検証機能を確認することもできます。例えば、必須フィールドに値が入力されていな場合は、エラーメッセージが表示されます。
アダプティブフォームには、各種のデバイスでフォームの操作性をエミュレートするためのオプションも用意されています。例えば、iPhone、iPad、デスクトップパソコンなどのデバイスについて、エミュレーションを行うことができます。You can use both Preview and Emulator options in conjunction with each other to preview a form for devices of different screen sizes.
  1. フォームエディター右側の「 プレビュー 」オプションをタップします。プレビューモードでフォームが開きます。 このチュートリアルに記載されている値を使用してフォームを作成した場合、フォームのプレビュー URL は http://localhost:4502/content/dam/formsanddocuments/shipping-address-add-update-form/jcr:content?wcmmode=disabled になります。
  2. Use to view how the form looks on various devices.
  3. フォームのフィールドに値を入力して「 送信 」をタップします。フォームが送信され、デフォルトの「 ありがとうございます 」ページにリダイレクトされます。カスタムの「ありがとうございます」ページを指定することもできます。詳しくは、「 リダイレクトページの設定 」を参照してください。
これで、住所を追加するためのアダプティブフォームの準備が完了しました。If you have used the name mentioned in the tutorial and accessing the form on the machine running AEM Forms server, then the form is available at http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html .