新增額外欄位至 Responsys 註冊燈箱

重要事項：您的帳戶必須啟用此功能並且已安裝 Oracle Maxymiser，才能使用此功能。

依預設，電子郵件註冊燈箱範本只有 Emailaddress 欄位。您可以透過手動編輯燈箱程式碼的方式新增額外的欄位，如名字、姓氏或國家。

以下範例示範如何將名字和姓氏欄位加到電子郵件註冊燈箱：

  1. 在「Responsys 清單結構描述」中，檢查要加到燈箱的欄位名稱，這些欄位的名稱必須與 Oracle Maxymiser 燈箱中的欄位名稱相同。在本範例中，欄位名稱如下：

    1. FIRST_NAME

    2. LAST_NAME
  2. 建立 Oracle Responsys 註冊燈箱。
  3. 按一下程式碼編輯器。

    4. 注意：如果您先在「程式碼編輯器」中手動編輯燈箱程式碼，然後切換回「互動」面板進行變更，對 formSubmit 函數進行的手動變更將會被「互動」面板覆寫。

  4. 在 <form> 標記內：
    1. 搜尋 emailaddress 欄位的 <input> 標記：
      2. <input oninvalid="window.mm_onInvalid(event)" id="lightbox1565788422675-lightbox-email-input" name="EMAIL_ADDRESS_" type="text" style="display: block; margin: 47px auto 0px; height: 28px; width: 280px; border: none; box-shadow: rgba(0, 0, 0, 0.06) 0px 1px 2px 0px inset; background-color: rgb(248, 248, 248); color: rgba(0, 0, 0, 0.87); font-family: Helvetica; font-size: 12px; line-height: 15px;" placeholder="Email address..." title="Enter Email address." required="" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,4}">
    2. 在以上標記的後面，為名字加上一個新的 <input> 標記：
      3. <input oninvalid="window.mm_onInvalid(event)" id="lightbox1565788422675-lightbox-firstname-input" name="FIRST_NAME" type="text" style="display: block; margin: 5px auto 0px; height: 28px; width: 280px; border-radius: 2px; border: none; box-shadow: rgba(0, 0, 0, 0.06) 0px 1px 2px 0px inset; background-color: rgb(248, 248, 248); color: rgba(0, 0, 0, 0.87); font-family: Helvetica; font-size: 12px; line-height: 15px;" placeholder="First name..." title="Enter First name." required="" pattern="^[a-zA-Z]+$">
    3. 修改 <input> 屬性，如下所示：
      • ID：由燈箱 ID 和輸入欄位名稱與類型所構成的唯一 ID。例如：lightbox1565788422675-lightbox-firstname-input。

        • 注意：建立燈箱時，提供的唯一 ID 會作為燈箱外部 div 的屬性或上述電子郵件欄位 ID 屬性的一部分。

      • 名稱：步驟 1 中 Responsys 表格內的欄位名稱。
      • 預留位置：文字方塊空白時所顯示的提示文字。
      • 模式：決定可在文字方塊中輸入哪些字元的正規表示式。在本範例中，允許的字元範圍為 a-z 或 A-Z，不過也可以允許使用其他字元，例如連字號或空格。
    4. 為姓氏新增另一個 <input> 標記並加以修改：
      5. <input oninvalid="window.mm_onInvalid(event)" id="lightbox1565788422675-lightbox-lastname-input" name="LAST_NAME" type="text" style="display: block; margin: 5px auto 0px; height: 28px; width: 280px; border-radius: 2px; border: none; box-shadow: rgba(0, 0, 0, 0.06) 0px 1px 2px 0px inset; background-color: rgb(248, 248, 248); color: rgba(0, 0, 0, 0.87); font-family: Helvetica; font-size: 12px; line-height: 15px;" placeholder="Last name..." title="Enter Last name." required="" pattern="^[a-zA-Z]+$">
  5. 表單提交之後，請確定新的輸入欄位都已新增至提交 URL：
    1. 找到 window.onFormSubmit 函數，然後尋找其中下列這一行程式碼： 
      2. var emailInput = document.getElementById(id + '-lightbox-email-input');
    2. 在這一行程式碼的下方加入以下幾行，以將名字和姓氏儲存在變數中：
      3. var firstnameInput = document.getElementById(id + '-lightbox-firstname-input');
      var lastnameInput = document.getElementById(id + '-lightbox-lastname-input');

    檢查錯誤和提交表單時會用到這些變數中儲存的值。

  6. 錯誤檢查程式碼必須更新，才能夠驗證名字和姓氏欄位的內容。
    1. 就本範例而言，系統會將現有程式碼：
      2. var re = /[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,4}/;
      if (!re.test(emailInput.value)) {
      oops.style.display = 'block';
      emailInput.style.cssText = emailInput.style.cssText.replace(/border:[^;]*;/, "border: 1px solid #B71C1C;");
      emailInput.style.cssText = emailInput.style.cssText.replace(/border-radius:[^;]*;/, "border-radius: 2px;");
      return;
      }
    2. 取代為下列程式碼：
      3. var re = /[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,4}/;
      var reName = /^[a-zA-Z]+$/;
      emailInput.style.cssText = emailInput.style.cssText.replace(/border:[^;]*;/, "border: none;");
      firstnameInput.style.cssText = firstnameInput.style.cssText.replace(/border:[^;]*;/, "border: none;");
      lastnameInput.style.cssText = lastnameInput.style.cssText.replace(/border:[^;]*;/, "border: none;");
       
      if (!re.test(emailInput.value) || !reName.test(firstnameInput.value) || !reName.test(lastnameInput.value)) {
      	oops.style.display = 'block';
      	if (!re.test(emailInput.value)) {
      		emailInput.style.cssText = emailInput.style.cssText.replace(/border:[^;]*;/, "border: 1px solid #B71C1C;");
      		emailInput.style.cssText = emailInput.style.cssText.replace(/border-radius:[^;]*;/, "border-radius: 2px;");
      	}
       
      	if (!reName.test(firstnameInput.value)) {
      		firstnameInput.style.cssText = firstnameInput.style.cssText.replace(/border:[^;]*;/, "border: 1px solid #B71C1C;");
      		firstnameInput.style.cssText = firstnameInput.style.cssText.replace(/border-radius:[^;]*;/, "border-radius: 2px;");
      	}
       
      	if (!reName.test(lastnameInput.value)) {
      		lastnameInput.style.cssText = lastnameInput.style.cssText.replace(/border:[^;]*;/, "border: 1px solid #B71C1C;");
      		lastnameInput.style.cssText = lastnameInput.style.cssText.replace(/border-radius:[^;]*;/, "border-radius: 2px;");
      	}
       
      return;
      }
  7. To ensure the new values get submitted when the visitor clicks the Subscribe button, find the following code:
    8. parameters.push(encodeURIComponent('EMAIL_ADDRESS_') + '=' + encodeURIComponent(emailInput.value));
  8. 在此程式碼的後面加入以下幾行，以將名字和姓氏新增至表單提交 URL：
    9. parameters.push(encodeURIComponent('FIRST_NAME') + '=' + encodeURIComponent(firstnameInput.value));
    parameters.push(encodeURIComponent('LAST_NAME') + '=' + encodeURIComponent(lastnameInput.value));
  9. 切換至預覽面板，測試為燈箱新建立的欄位。

相關內容

設定您的 Oracle Maxymiser 整合

投放整合的 Maxymiser-Responsys 行銷活動

使用 Maxymiser 建立註冊燈箱

Oracle Responsys 整合 (Oracle Maxymiser 說明中心)

Maxymiser integration, lightbox, email signup forms, Maxymiser 整合, 燈箱, 電子郵件註冊表單