Web フォームの静的要素

フォームのページにユーザーインタラクションのない要素を含めることができます。これらは、画像、HTML コンテンツ、横棒またはハイパーリンクなどの、静的要素です。これらの要素は、静的要素を追加​メニューをクリックし、ツールバーの最初のボタンを使用して作成されます。

次のフィールドのタイプを使用できます。

  • (フォームのコンテキストで)以前提供した回答またはデータベースに基づく値。

  • ハイパーリンク、HTML、横棒。HTML コンテンツの挿入を参照してください。

  • リソースライブラリまたはユーザーがアクセスできるサーバーに保存された画像。画像の挿入を参照してください。

  • クライアント側またはサーバー側で実行されたスクリプト。クライアント側で適切に実行するには、JavaScript で記述され、ほとんどのブラウザーとの互換性が必要です。

    メモ

    サーバー側では、スクリプトは、Adobe Campaign が提供する Campaign JSAPI ドキュメントで定義された関数を使用できます。

HTML コンテンツの挿入

フォームページに、ハイパーテキストリンク、画像、書式設定された段落、ビデオまたは Flash オブジェクトなどの HTML コンテンツを含めることができます。

HTML エディターを使用すると、コンテンツを入力して、フォームページに挿入できます。エディターを開くには、静的要素/HTML に移動します。

コンテンツを直接入力および書式設定したり、ソースコードウィンドウを表示して、一部の外部コンテンツを貼り付けたりできます。「ソースコード」モードに切り替えるには、ツールバーの最初のアイコンをクリックします。

データベースフィールドを挿入するには、パーソナライゼーションボタンを使用します。

メモ

HTML エディターに入力した文字列は、「テキスト」サブタブで定義されている場合にのみ、翻訳されます。そうでない場合、収集されません。詳しくは、Web フォームの翻訳を参照してください。

次の例のように、編集ウィンドウのフィールドに入力します。

ハイパーリンクを追加するには、静的要素/リンク​に移動します。

  • ラベル」は、フォームページに表示されるハイパーリンクのコンテンツです。

  • URL」は、目的のアドレス(例:Web サイトの場合は https://www.adobe.com、メッセージを送信したい場合には info@adobe.com)です。

  • ウィンドウ」フィールドを使用すると、サイトの場合のリンクの表示モードを選択できます。リンクを新しいウィンドウで開いたり、現在のウィンドウで開いたり、別のウィンドウで開いたりできます。

  • 次に示すように、ツールチップを追加できます。

  • リンクをボタンとして表示するか、画像として表示するかを選択できます。これをおこなうには、「タイプ」フィールドで表示のタイプを選択します。

デフォルトでは、リンクは、リンク先アドレスが「URL」フィールドに入力できるように、URL タイプのアクションに関連付けられています。

ユーザーがリンクをクリックして次のアクションをおこなえるように、リンクに別のアクションを定義できます。

  • ページの更新

    これをおこなうには、「アクション」フィールドのドロップダウンボックスで、「ページを更新」オプションを選択します。

  • 次/前のページの表示

    これをおこなうには、「アクション」フィールドのドロップダウンボックスで、「次のページ」または「前のページ」オプションを選択します。

    リンクで置き換える場合は、「次へ」および「戻る」ボタンを非表示することができます。このページを参照してください。

    リンクは、デフォルトで使用される「次へ」ボタンを置き換えます。

  • 別のページの表示

    トランジションを有効にする」オプションを使用すると、「トランジション」フィールドで選択されたアウトバウンドトランジションに関連付けられた特定のページを表示できます。

    デフォルトでは、ページには 1 つのアウトバウンドトランジションのみがあります。新しいトランジションを作成するには、ページを選択して、次に示すように、「アウトバウンドトランジション」セクションの​追加​ボタンをクリックします。

    ダイアグラムでは、この追加は次のように表示されます。

    メモ

    Web フォームのページの順番について詳しくは、Web フォームページの順番の定義を参照してください。

  • Facebook プロファイルから取得したデータによるフォームのフィールドのプリロード

    注意

    この機能は、Social Marketing アプリケーションがインストールされている場合にのみ使用できます。このオプションを使用するには、Facebook Connect タイプの外部アカウントと連動する Facebook アプリケーションを作成する必要があります。詳しくは、このページを参照してください。

    Facebook による事前ロードをおこなう」オプションを使用すると、フォームにボタンを挿入して、Facebook プロファイル情報を使用してフィールドをプリロードできます。

    ユーザーが​自動入力​ボタンをクリックすると、Facebook のアプリの許可ウィンドウが開きます。

    メモ

    外部アカウントの設定時に拡張された権限のリストを変更できます。拡張された権限を入力しない場合、Facebook は、デフォルトでは、基本プロファイル情報を転送します。
    拡張権限のリストとその構文を表示するには、https://developers.facebook.com/docs/reference/api/permissions/ をクリックします。

    ユーザーが情報の共有に同意すれば、フォームのフィールドにプリロードされます。

この事例では、次の要素で構成された Web アプリケーションを作成しました。

  • フォームを含むページ
  • レコード​アクティビティ
  • 終了​アクティビティ

プリロードボタンを追加するには、次の手順に従います。

  1. フォームを作成します。

  2. フォームのフィールドと同じレベルに移動し、リンクを追加します。

  3. ラベルを入力し、ボタン​タイプを選択します。

  4. アクション」フィールドに移動して、「Facebook による事前ロードをおこなう」を選択します。

  5. アプリケーション」フィールドに移動して、以前作成した Facebook Connect タイプの外部アカウントを選択します。詳しくは、このページを参照してください。

HTML コンテンツのパーソナライゼーション

フォームページの HTML コンテンツを前のページで記録したデータでパーソナライズできます。例えば、自動車保険の Web フォームを作成して、最初のページで連絡先情報および自動車のブランドを提供できます。

パーソナライゼーションフィールドを使用して、ユーザー名と選択したブランドを次のページに再挿入できます。使用する構文は、情報ストレージモードによって異なります。詳しくは、収集された情報の使用を参照してください。

メモ

セキュリティ上の理由により、<%= 式に入力された値は、エスケープ文字に置き換えられます。これを回避するには、必要な場合に限り、構文 <%= を使用します。

この例では、受信者の姓と名がデータベースのフィールドに格納され、自動車のブランドが変数に格納されます。ページ 2 でパーソナライズされたメッセージの構文は、次のようになります。

<P>Welcome <%= ctx.recipient.@firstName %> <%= ctx.recipient.@lastName %>,</P>
<P>To start your customized study, please select your car <%=ctx.vars.marque%> and its year of purchase.</P>

これにより、次のような結果が導かれます。

テキスト変数の使用

テキスト」タブでは、HTML の <%= 文字と %> 文字の間で使用できる変数フィールドを構文 $(IDENTIFIER).を使用して作成できます。

この方法を使用すると、文字列を容易にローカライズできます。Web フォームの翻訳を参照してください。

例えば、「最終コンタクト日:」という文字列を HTML コンテンツに表示できる、Contact フィールドを作成できます。これをおこなうには、以下の手順に従います。

  1. HTML テキストの「テキスト」タブをクリックします。

  2. 追加」アイコンをクリックします。

  3. 識別子​列に、変数名を入力します。

  4. テキスト​列に、デフォルト値を入力します。

  5. HTML コンテンツでは、<%= $(Contact) %> 構文を使用してこのテキスト変数を挿入できます。

    注意

    HTML エディターにこれらの文字を入力する場合、< および > フィールドは、エスケープ文字で置き換えられます。この場合、HTML テキストエディターの​ソースコードを表示​アイコンをクリックして、ソースコードを修正する必要があります。

  6. フォームの​プレビュー​ラベルを開いて、HTML に入力した値を表示します。

この操作モードを使用すると、Web フォームのテキストを分解し、統合された翻訳ツールを使用して翻訳を管理できます。詳しくは、Web フォームの翻訳を参照してください。

画像の挿入

画像をフォームに含める場合、外部からアクセス可能なサーバーに保存されている必要があります。

静的要素/画像​メニューを選択します。

挿入する画像のソースを選択します。パブリックリソースライブラリから取得したり、外部からアクセス可能なサーバーに保存したりできます。

ライブラリからの画像の場合、フィールドのコンボボックスで選択します。外部ファイルにある場合、アクセスパスを入力します。ラベルは、画像にマウスポインターを重ねるか、画像が表示されない場合に表示されます(HTML の ALT フィールドと同じ)。

画像は、エディター中央のセクションに表示できます。

このページ