チュートリアル：アダプティブフォームの作成 do-not-publish-tutorial-create-an-adaptive-form

Last update: Wed Mar 20 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

トピック：
Adaptive Forms

02-create-adaptive-form-main-image

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

チュートリアルについて about-the-tutorial

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

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

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

手順 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 には、アダプティブフォーム上で情報を表示するための様々なコンポーネントが用意されています。ヘッダーコンポーネントおよびフッターコンポーネントを使用すると、フォームのルックアンドフィールを統一できます。ヘッダーには通常、会社のロゴ、フォームのタイトル、概要が含まれます。フッターには通常、著作権に関する情報と他のページへのリンクを指定します。

／を選択します。コンポーネントブラウザーが表示されます。コンポーネントブラウザーから ヘッダー コンポーネントをアダプティブフォームにドラッグ＆ドロップします。
ロゴを選択します。ツールバーが表示されます。ツールバーので We.Retail を選択し、を選択します。
画像を選択します。ツールバーが表示されます。を選択します。画面の左側にプロパティブラウザーが表示されます。「参照」をタップして、ロゴ画像をアップロードします。を選択します。画像がヘッダーに表示されます。

この記事に使用するロゴがない場合は、「ファイルを取得」を選択して、そのロゴをダウンロードできます。

ファイルを入手

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

手順 3：情報を取得して表示するためのコンポーネントを追加する step-add-components-to-capture-and-display-information

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

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

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

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

数値ボックス コンポーネントをフッターコンポーネントの前にドラッグします。コンポーネントのプロパティを開き、以下のテーブルに示す値を設定して「」を選択します。

table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2
プロパティ	値
タイトル	郵便番号
要素名	customer_ZIPCode
最大桁数	6
必須フィールド	Enabled
表示パターンのタイプ	パターンなし

メール コンポーネントをフッターコンポーネントの前にドラッグします。コンポーネントのプロパティを開き、以下のテーブルに示す値を設定して「」を選択します。

table 0-row-2 1-row-2 2-row-2 3-row-2
プロパティ	値
タイトル	メール
要素名	customer_Email
必須フィールド	Enabled

添付ファイル コンポーネントをフッターコンポーネントの前にドラッグします。コンポーネントのプロパティを開き、以下のテーブルに示す値を設定して「」を選択します。

table 0-row-2 1-row-2 2-row-2 3-row-2 html-authored no-header
プロパティ	値
タイトル	政府が承認した住所の証明
要素名	customer_Address_Proof
必須フィールド	Enabled

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

手順 4：アダプティブフォームの送信アクションを設定 step-configure-submit-action-for-the-adaptive-form

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

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

メールサーバーを設定します。詳しくは、「メール通知の設定」を参照してください。
コンテンツブラウザーで「フォームコンテナ」を選択してから「」を選択します。画面左側にプロパティブラウザーが表示されます。

送信／送信アクション に移動します。「メールを送信」を選択します。次の値を指定し、「」を選択します。

table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2
プロパティ	値
送信元	`donotreply@weretail.com`
To	`${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 になります。
「」を使用して、各種のデバイスでフォームがどのように表示されるかを確認します。
フォームのフィールドに入力して「送信」を選択します。フォームが送信され、デフォルトで「ありがとうございます」ページにリダイレクトされます。また、カスタムの「Thank You」ページを指定することもできます。詳しくは、「リダイレクトページの設定」を参照してください。

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

recommendation-more-help

19ffd973-7af2-44d0-84b5-d547b0dffee2