現在表示中:

 

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

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

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

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

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

form-preview-mobile
アダプティブフォームでの入力操作

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

  1. AEM オーサーインスタンスにログインし、Adobe Experience Managerフォームフォームとドキュメントに移動します。デフォルトの URL は、http://localhost:4502/system/console/bundles です。  

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

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

    • タイトル:このフィールドに、「Add new or update shipping address と入力します。「タイトル」フィールドに入力した値が、フォームの表示名になります。タイトルを指定すると、AEM Forms ユーザーインターフェイス内のフォームを特定しやすくなります。
    • 名前:このフィールドに、「shipping-address-add-update-form」と入力します。「名前」フィールドに入力した値が、フォームの名前になります。指定された名前のノードがリポジトリに作成されます。タイトルを入力し始めると、名前フィールドの値が自動的に生成されます。候補として入力された値は変更可能です。「ドキュメント名」フィールドには、英数字、ハイフン、アンダースコアのみを使用することができます。無効な入力はすべてハイフンに置き換えられます。
  4. 作成」をタップします。アダプティブフォームが作成され、フォームを編集用に開くためのダイアログが表示されます。「開く」をタップし、新しく作成されたフォームを新しいタブで開きます。フォームが編集モードで表示されます。新しく作成されたフォームを必要に応じてカスタマイズするためのサイドバーも表示されます。

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

    newly-created-adaptive-form

手順 2:ヘッダーとフッターを追加する

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

  1. の順にタップします。 コンポーネントブラウザーが表示されます。「ヘッダー」コンポーネントを、コンポーネントブラウザーからアダプティブフォームにドラッグアンドドロップします。   

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

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

  4. フッターコンポーネントを、 からアダプティブフォームにドラッグします。この時点で、フォームは以下のように表示されます。   

    adaptive-form-with-headers-and-footers

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

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

  1. 数値ボックスコンポーネントをアダプティブフォームにドラッグし、フッターコンポーネントの前にドロップします。コンポーネントのプロパティを表示し、コンポーネントのタイトルを「Customer ID」、要素名を「 customer_ID」にそれぞれ変更し、「必須フィールド」オプションと「HTML5 の Number 入力タイプを使用」オプションを有効にして をタップします。

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

    プロパティ テキストボックス 1
    テキストボックス 2
    テキストボックス 3
    タイトル 名前
    発送先住所 状態
    要素名 customer_Name
    customer_Shipping_Address customer_State
    必須フィールド 有効 有効 有効
    複数行を許可
    無効 有効 無効
  3. 数値ボックスコンポーネントをフッターコンポーネントの前にドラッグします。コンポーネントのプロパティを表示し、以下の表に示す値を設定して をタップします。

    プロパティ
    タイトル 郵便番号
    要素名 customer_ZIPCode
    最大桁数 6
    必須フィールド 有効
    表示パターンタイプ パターンなし
  4. 電子メールコンポーネントをフッターコンポーネントの前にドラッグします。コンポーネントのプロパティを表示し、以下の表に示す値を設定して をタップします。

    プロパティ
    タイトル 電子メール
    要素名 customer_Email
    必須フィールド 有効
  5. 添付ファイルコンポーネントをフッターコンポーネントの前にドラッグします。コンポーネントのプロパティを表示し、以下の表に示す値を設定して をタップします。

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

    adaptive-form-with-all-the-components

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

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

以下の手順により、フォームの電子メール送信アクションとデモ送信アクションを設定することができます。  

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

    /content/help/jp/experience-manager/6-4/sites/administering/using/notification.html
  2. コンテンツブラウザーで「フォームコンテナ」をタップして をタップします。画面左側にプロパティブラウザーが表示されます。  

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

    プロパティ
    送信元 donotreply@weretail.com
    宛先 ${customer_Email}
    件名 Acknowledgement: You have added shipping address on We.Retail website.
    電子メールテンプレート

    Hi ${customer_Name},

    The following address is added as the shipping address for your account:
    ${customer_Name},
    ${customer_Shipping_Address},
    ${customer_State},
    ${customer_ZIPCode}

    Regards,
    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. アイコンを使用して、各種のデバイスでフォームがどのように表示されるかを確認します。

  3. フォームのフィールドに値を入力して「送信」をタップします。フォームが送信され、デフォルトの「ありがとうございます」ページにリダイレクトされます。カスタムの「ありがとうございます」ページを指定することもできます。詳しくは、「リダイレクトページの設定」を参照してください。

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

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

リーガルノーティス   |   プライバシーポリシー