チュートリアル：アダプティブフォームの作成 do-not-publish-tutorial-create-an-adaptive-form
このチュートリアルは、 最初のアダプティブフォームを作成する 系列。 チュートリアルの使用例を理解、実行、デモするために、時系列に従うことをお勧めします。
このチュートリアルについて about-the-tutorial
アダプティブフォームは、動的でレスポンシブな次世代型のフォームです。アダプティブフォームを使用して、エクスペリエンスをカスタマイズできます. また、アダプティブフォームをAdobe Analyticsと統合して使用状況の統計を確認し、Adobe Campaignをキャンペーン管理用に統合することもできます。 アダプティブフォームの機能について詳しくは、「アダプティブフォーム作成の概要」を参照してください。
正しい手順を踏めば、フォームの作成と管理を簡単に行うことができます。このチュートリアルでは、以下の操作を行う方法について説明します。
このチュートリアルの最後に、以下のようなフォームにアクセスするためのリンクがあります。
[ ](assets/form-preview-mobile.gif)
手順 1：アダプティブフォームを作成する step-create-the-adaptive-form
-
AEM オーサーインスタンスにログインし、Adobe Experience Manager／フォーム／フォームとドキュメント に移動します。デフォルトの URL は、http://localhost:4502/aem/forms.html/content/dam/formsanddocuments です。
-
「作成」をタップして、「アダプティブフォーム」を選択します。テンプレートを選択するためのオプションが表示されます。空白 テンプレートをタップして選択し、「次へ」をタップします。
-
「プロパティを追加」オプションが表示されます。「タイトル」フィールドと「名前」フィールドは入力必須です。
- タイトル：
Add new or update shipping addressを「タイトル」フィールドに指定します。「タイトル」フィールドに入力した値が、フォームの表示名になります。タイトルを指定すると、AEM Formsユーザーインターフェイス内のフォームを識別しやすくなります。 - 名前：
shipping-address-add-update-formを「名前」フィールドに指定します。「名前」フィールドで、フォームの名前を指定します。 指定された名前のノードがリポジトリーに作成されます。タイトルを入力し始めると、名前フィールドの値が自動的に生成されます。候補として入力された値は変更可能です。「ドキュメント名」フィールドには、英数字、ハイフン、アンダースコアのみを使用できます。無効な入力は、すべてハイフンに置き換えられます。
- タイトル：
-
「作成」をタップします。アダプティブフォームが作成され、フォームを編集用に開くためのダイアログが表示されます。「開く」をタップし、新しく作成されたフォームを新しいタブで開きます。フォームが編集用に開きます。 新しく作成されたフォームを必要に応じてカスタマイズするためのサイドバーも表示されます。
アダプティブフォームのオーサリングインターフェイスと使用可能なコンポーネントについて詳しくは、 アダプティブフォームのオーサリングの概要.
手順 2：ヘッダーとフッターを追加する step-add-header-and-footer
AEM Formsは、アダプティブフォームに関する情報を表示するための多くのコンポーネントを提供します。 ヘッダーおよびフッターコンポーネントを使用すると、フォームの外観を一貫させることができます。 ヘッダーには通常、会社のロゴ、フォームのタイトル、概要が含まれます。 フッターには通常、著作権に関する情報と他のページへのリンクを指定します。
-
-
タップ ロゴ. ツールバーが表示されます。 ツールバーの
-
「画像」をタップします。 ツールバーが表示されます。
ファイルがない場合は、「ファイルを取得」をタップして、この記事で使用するロゴをダウンロードできます。
-
手順 3：情報を取得して表示するためのコンポーネントを追加する step-add-components-to-capture-and-display-information
コンポーネントは、アダプティブフォームを構成するための構築ブロックです。AEM Formsは、アダプティブフォームで情報を取得して表示するための多くのコンポーネントを提供します。
- 数値ボックスコンポーネントをアダプティブフォームにドラッグします。フッターコンポーネントの前にドロップします。コンポーネントのプロパティを表示し、コンポーネントの タイトル を
Customer ID、要素名 をcustomer_IDにそれぞれ変更し、「必須フィールド」オプションと「HTML5 の数値入力タイプを使用」オプションを有効にして「 - 3 つのテキストボックスコンポーネントをアダプティブフォームにドラッグします。 フッターコンポーネントの前に配置します。 これらのテキストボックスに対して、次のプロパティを設定します。：
-
数値ボックス コンポーネントをフッターコンポーネントの前にドラッグします。コンポーネントのプロパティを開き、以下のテーブルに示す値を設定して「
table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 プロパティ 値 タイトル ZIP Code 要素名 customer_ZIPCode 最大桁数 6 必須フィールド Enabled 表示パターンの種類 パターンなし -
メール コンポーネントをフッターコンポーネントの前にドラッグします。コンポーネントのプロパティを開き、以下のテーブルに示す値を設定して「
table 0-row-2 1-row-2 2-row-2 3-row-2 プロパティ 値 タイトル メール 要素名 customer_Email 必須フィールド Enabled -
ドラッグ&ドロップ 添付ファイル フッターコンポーネントの前のコンポーネント。 コンポーネントのプロパティを開き、以下のテーブルに示す値を設定して「
-
ドラッグ 送信ボタン コンポーネントをアダプティブフォームに追加します。 フッターコンポーネントの前にドロップします。コンポーネントのプロパティを開き、「要素名」を「 address_addition_update_submit をタップします。
手順 4:アダプティブフォームの送信アクションを設定する step-configure-submit-action-for-the-adaptive-form
アダプティブフォーム上の「送信」ボタンをタップすると、送信アクションがトリガーされます。 送信アクションを使用して、フォームデータをローカルリポジトリに保存したり、フォームデータを REST エンドポイントに送信したり、フォームデータを電子メールとして送信したりできます。 アダプティブフォームには、そのまますぐに使用できる送信アクションがいくつか用意されています。 詳しくは、 送信アクションの設定.
以下の手順により、フォームのメール送信アクションとデモ送信アクションを設定することができます。
-
メールサーバーを設定します。詳しくは、「メール通知の設定」を参照してください。
/content/help/en/experience-manager/6-4/sites-administering/notification.html
-
コンテンツブラウザーで「フォームコンテナ」をタップしてから「
-
送信／送信アクション に移動します。「メールを送信」を選択します。次の値を指定し、「
table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 プロパティ 値 送信元 donotreply@weretail.comTo ${customer_Email}件名 受信確認：We.Retail Web サイトに配送先住所を追加しました。 メールテンプレート こんにちは。 ${customer_Name}様のアカウントに次のアドレスが追加されました：${customer_Name},${customer_Shipping_Address},${customer_State},${customer_ZIPCode}
今後ともよろしくお願いいたします。We.Retail添付ファイルを含める Enabled フォームの準備が整いました。 これで、フォームをプレビューして、機能をテストすることができます。 このチュートリアルに記載されている名前を使用し、AEM Formsサーバーを実行しているマシン上のフォームにアクセスした場合、フォームは次の場所で使用できます。 http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html.
手順 5：アダプティブフォームのプレビューを表示して、アダプティブフォームを送信する step-preview-and-submit-the-adaptive-form
プレビューオプション を使用して、フォームの外観と動作を確認することができます。プレビューモードでフォームを送信したり、フォームに適用されている検証機能を確認したりできます。 例えば、必須フィールドを空のままにした場合にエラーが表示される場合などです。
アダプティブフォームには、様々なデバイス向けにフォームのエクスペリエンスをエミュレートするオプションも用意されています。 例えば、iPhone、iPad、デスクトップパソコンなどのデバイスについて、エミュレーションを行うことができます。「プレビュー」と「エミュレーター
- フォームエディター右側の「プレビュー」オプションをタップします。フォームがプレビューモードで表示されます。このチュートリアルに記載されている値を使用してフォームを作成した場合、フォームのプレビュー URL は http://localhost:4502/content/dam/formsanddocuments/shipping-address-add-update-form/jcr:content?wcmmode=disabled になります。
- 「
- フォームのフィールドに入力してをタップします。 送信. フォームが送信され、デフォルトにリダイレクトされます ありがとうございます ページ。 また、カスタムの「ありがとうございます」ページを指定することもできます。 詳しくは、「リダイレクトページの設定」を参照してください。
これで、住所を追加するためのアダプティブフォームの準備が完了しました。このチュートリアルに記載されている名前を使用し、AEM Formsサーバーを実行しているマシン上のフォームにアクセスした場合、フォームは次の場所で使用できます。 http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html.