網路表單中的靜態元素

在表單頁面中,您可以加入使用者沒有互動的元素;這些是靜態元素,例如影像、HTML內容、水準列或超文字連結。 這些元素是透過工具列中的第一個按鈕建立,方法是選取​Static elements

可用欄位類型如下:

  • 值基於先前提供的答案(在表單上)或資料庫。

  • 超文字連結、HTML、水準列。 請參閱插入HTML內容

  • 儲存在資源庫或使用者可存取之伺服器上的影像。 請參閱插入影像

  • 在用戶端和/或伺服器端執行的指令碼。 它必須以JavaScript編寫,並且與大部分的瀏覽器相容,以確保在用戶端執行正確。

    注意

    在伺服器端,指令碼可使用Campaign JSAPI檔案中定義的函式。

插入HTML內容

您可以在表單頁面中加入HTML內容:超文字連結、影像、格式化段落、影片等。

HTML編輯器可讓您輸入要插入表單頁面的內容。 要開啟編輯器,請按一下​Static elements > HTML

您可以直接輸入內容並設定其格式,或顯示原始碼視窗以貼入某些外部內容。 若要切換至「原始碼」模式,請按一下工具列中的第一個圖示:

要插入資料庫欄位,請使用個性化按鈕。

注意

只有在​Texts​子標籤中定義了HTML編輯器中輸入的字串時,才會進行翻譯。 否則將不會收集這些資料。 有關詳細資訊,請參閱轉換Web表單

填寫編輯視窗中的欄位,如下列範例所示:

要添加超文本連結,請轉至​Static elements > Link

  • Label​是超文本連結的內容,它將顯示在表單頁面上。

  • URL​是所需的地址,例如:https://www.adobe.com代表網站,或info@adobe.com代表傳送訊息。

  • Window​欄位可讓您在網站的情況下,選取連結的顯示模式。 您可以決定在新視窗、目前視窗或其他視窗中開啟連結。

  • 您可以新增工具提示,如下所示:

  • 您可以選擇將連結顯示為按鈕或影像。 若要這麼做,請在​Type​欄位中選取顯示類型。

依預設,連結會與URL類型動作相關聯,以便在URL欄位中輸入連結目標位址。

您可以定義連結的其他動作,讓使用者按一下連結即可執行下列動作:

  • 重新整理頁面

    若要這麼做,請在​Action​欄位的下拉式方塊中選取​Refresh page​選項。

  • 顯示下一頁/上一頁

    若要這麼做,請在​Action​欄位的下拉式方塊中選取​Next page​或​Previous page​選項。

    如果​Next​和/或​Back​按鈕要被連結替換,則可以隱藏這些按鈕。 請參閱此

    該連結將替換預設使用的​Next​按鈕。

  • 顯示另一頁

    Enable a transition​選項可讓您顯示與​Transition​欄位中選取的傳出轉場相關聯的特定頁面。

    依預設,頁面只有一個輸出轉場。 若要建立新的轉場效果,請選取頁面,然後按一下​Output transitions​區段中的​Add​按鈕,如下所示:

    在圖中,此添加項的外觀如下:

    注意

    有關Web表單中頁面排序的詳細資訊,請參閱定義Web表單頁面排序

  • 使用從Facebook設定檔取得的資料預先載入表單欄位

    注意

    只有在安裝了​Social Marketing​應用程式時,此函式才可用。 若要使用此選項,您必須建立Facebook應用程式以及​Facebook Connect​類型的外部帳戶。 有關詳細資訊,請參見此頁面

    Preload with Facebook​選項可讓您在表單中插入按鈕,以使用Facebook設定檔資訊預先載入欄位。

    當使用者按一下​Fill in automatically​按鈕時,Facebook會開啟權限要求視窗。

    注意

    在設定外部帳戶時,可變更延伸權限清單。 如果您未輸入任何延伸權限,Facebook會依預設轉送基本設定檔資訊。
    若要檢視擴充權限的清單及其語法,請按一下這裡:https://developers.facebook.com/docs/reference/api/permissions/

    如果使用者同意分享其資訊,表單的欄位會預先載入。

針對此使用案例,我們建立了由下列元素組成的Web應用程式:

  • 包含表單的頁面
  • Record 活動
  • End​活動

若要新增預先載入按鈕,請套用下列步驟:

  1. 建立表格。

  2. 移至表單中欄位的相同層級,並新增連結。

  3. 輸入標籤並選擇​Button​類型。

  4. 轉至​Action​欄位並選取​Preload with Facebook

  5. 前往​Application​欄位,並選取​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>

這會產生下列結果:

使用文字變數

Text​標籤可讓您建立變數欄位,這些欄位可用於HTML中<%=和%>字元之間的變數欄位,其語法如下:$(識別碼)

使用此方法可輕鬆將字串本地化。 請參閱轉換Web表單

例如,您可以建立​Contact​欄位,讓您在HTML內容中顯示「上次連絡日期:」字串。 要執行此操作,請遵循下列步驟:

  1. 按一下HTML文本的​Text​頁籤。

  2. 按一下​Add​表徵圖。

  3. 在​Identifier​欄中,輸入變數的名稱

  4. 在​Text​欄中,輸入預設值。

  5. 在HTML內容中,透過​<%= $(連絡人)%>​語法插入此文字變數。

    注意

    如果在HTML編輯器中輸入這些字元,​和​**​**​欄位將替換為其逸出字元。 在這種情況下,您需要按一下HTML文字編輯器的​Display source code​圖示來更正原始碼。

  6. 開啟表單的​Preview​標籤,以檢視在HTML中輸入的值:

此作業模式可讓您只定義Web表單的文字一次,並使用整合的翻譯工具來管理翻譯。 有關詳細資訊,請參閱轉換Web表單

插入影像

若要將影像包含在表單中,必須將其儲存在可從外部存取的伺服器上。

選擇​Static elements > Image​菜單。

選擇要插入的影像源:它可以來自公共資源庫,也可以儲存在外部可訪問的外部伺服器上。

如果這是圖庫中的影像,請在欄位的組合方塊中選取;如果它位於外部檔案中,請輸入訪問路徑。 標籤將通過將游標傳遞到影像上(與HTML中的ALT欄位一致)或影像未顯示時顯示。

您可在編輯器的中央區段檢視影像。

本頁內容

Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now