需要協助嗎?讓我們幫你一把。

知識庫首頁 aero-right 訂閱表格 aero-right 如何建立訂閱表格?

如何建立訂閱表格?

訂閱表格 更新日期 19 三月, 2021

在網站或社群媒體平台使用訂閱表格是收集訂閱用戶的一個好方法。您可以在 Benchmark Email 帳戶建立不同訂閱表格,本文將帶您實際操作,了解如合建立每一種訂閱表格。

點擊下方選項,了解您要建立的訂閱表格。

開始前,請注意下列事項:

  • 免費帳戶每天可以收集 75 個訂閱用戶。
  • 付費帳戶沒有限制訂閱用戶的數量。
  • 使用舊介面的客戶無法使用內嵌式訂閱表格(進階)。
  • 新介面已經用新的「內嵌式訂閱表格(進階)」取代原本的「一般式訂閱表格」,功能維持相同。
  • 顧名思義,內嵌式訂閱表格就是嵌在網站裡面,跟其他內容或區塊放在網站上。
  • 如果您要刪除訂閱表格的某個區塊,進到訂閱表格編輯器,將滑鼠移到區塊上方,您會看到垃圾桶圖示。點擊該圖示,刪除該區塊。
  • 截至 2018 年 9 月,許多 Google 服務仍被中國封鎖。由於這些限制,如果您位於中國等受到影響的地區,reCAPTCHA 驗證碼可能無法正常運作。點擊此處,了解更多相關資訊。
  • Javascript 訂閱表格(含網站追蹤):更改或更新 Javascript 訂閱表格的內容會直接顯示在您的網站。
  • HTML 訂閱表格(含網站追蹤):更改或更新 HTML 訂閱表格的內容不會自動顯示在您的網站。要看到更新後內容,您需要再次儲存並發布訂閱表格,複製新的 HTML 代碼,最後貼到您的網站。

 

內嵌式訂閱表格(進階)

建立訂閱表格步驟如下:

  1. 點擊導覽列左側的「聯絡人」
  2. 現在,點擊導覽列左側選單的「訂閱表格」
  3. 然後,點擊頁面右上方的「新增訂閱表格」按鈕。
  4. 選擇「內嵌式訂閱表格(進階)」,點擊「下一步」
  5. 替訂閱表格命名並選擇聯絡人名單,然後點擊「儲存及下一步」
  6. 建立並編輯您的訂閱表格
    • 點擊左上方的「訂閱設定」,編輯訂閱設定訊息。
    • 將滑鼠移動到訂閱表格上方,點擊「刪節號」就可以變更訂閱表格外觀或新增欄位。
  7. 完成後,點擊「儲存並發布」
  8. 接著你會看到訂閱表格代碼,選擇您要的代碼類型,像是 Javascript 或 HTML,複製並貼上到您的網站。

重要

  • 如果您沒有設定像素的寬度,訂閱表格會填滿整個寬度區域。
  • 訂閱表格在桌機顯示最大寬度為 999 像素,但如果在行動裝置開啟,訂閱表格會自動填滿與螢幕大小一致。

可自訂義的部份

  • 雖然您可以自訂寬度,但是我們不建議您做調整。訂閱表格預設會以 100% 大小填滿整個寬度區域。
  • 您可以更改訂閱表格的背景顏色、新增框線以及設定圓角
  • 點擊訂閱表格,新增圖片文字分隔線,自訂標題欄位以及訂閱表格按鈕
  • 您可以在內嵌式訂閱表格(進階)加入想要的欄位數量,但我們建議保持訂閱表格精簡。

需要靈感嗎?下面是透過 Benchmark 建立的訂閱表格。

返回頁首

 

內嵌式訂閱表格

開始前,請注意下列事項:

  • 訂閱表格寬度取決於您放在網站的位置。
  • 內嵌式訂閱表格只收集電子信箱、名字以及姓氏。

建立內嵌式訂閱表格步驟如下:

  1. 登入您的 Benchmark 帳戶
  2. 點擊左側導覽列的「連路人」
  3. 現在,點擊導覽列左側選單的「訂閱表格」
  4. 點擊頁面右上方的「新增訂閱表格」按鈕。
  5. 選擇「內嵌式訂閱表格」,點擊「下一步」
  6. 替訂閱表格命名並選擇聯絡人名單。
  7. 點擊「儲存及下一步」
  8. 建立並編輯您的訂閱表格。

完成後,點擊「儲存並發布」。系統會彈出訂閱表格代碼視窗,選擇 Javascript 或 HTML 代碼,複製並貼上到您的網站。

可以自訂義的設定

這款精簡的訂閱表格只有三個欄位,名字姓氏以及電子信箱,但不支援圖片。

  • 雖然您可以自訂寬度,但是我們不建議您做調整。訂閱表格預設為 100% 填滿整個區域。
  • 您可以更改背景顏色標題以及按鈕樣式

需要靈感嗎?下面是透過 Benchmark 建立的訂閱表格。

 

返回頁首

如何設定水平排列的內嵌式訂閱表格

內嵌式訂閱表格只有三個欄位,名字、姓氏以及電子信箱。這是為什麼我們會建議您修改內嵌式訂閱表格的原因,並且維持至少兩個欄位。如果需要姓氏欄位,而且網站設計能夠兼容,您可以啟用這組欄位。

參考下列步驟,設定水平排列的內嵌式訂閱表格

從訂閱表格工具內設定

要建立水平排列的訂閱表格,您需要有一個已建立的內嵌式訂閱表格。

  1. 完成訂閱表格後,點擊「儲存並發布」

  1. 點擊彈出式視窗的「確認」變更,點擊下拉式視窗,選擇 HTML 代碼
  2. 點擊「複製」選項。複製選項會選取整個代碼。

  1. 關閉彈出式視窗,點擊左上角 Benchmark 商標,返回 Benchmark 首頁。

接下來在代碼編輯器繼續操作,這部份非強制性,您也可以使用文字檔案。

  1. 現在,進到「電子郵件」導覽列。
  2. 點擊「建立新電子郵件」按鈕,然後選擇「一般電子報」
  3. 點擊「建立新電子郵件」按鈕,然後選擇「一般電子報」

  1. 命名郵件。這封郵件只是用來測試,不是真的要發送。編輯完後,我們建議您刪除郵件或是不要動它,因為代碼可能會變動。
  2. 不用完成檢查列表的內容,直接進入「郵件設計」選項

  1. 使用先前在內嵌式訂閱表格複製的 HTML 代碼,替換在左邊代碼編輯器現有的文字。您可以在右邊看到您的訂閱表格。

不用擔心現在看到的郵件頁尾。最後複製代碼的時候就不會顯示了。

  1. 現在,使用鍵盤搜尋欄位。如果您用 Mac,按下 cmd+f ,使用 Windows  系統,按下 ctrl+f

這是我們實際搜尋操作的範例:

  1. 在搜尋欄位輸入 fieldset 或欄位名稱(舉例:名字)。如果搜尋 fieldset,您會找到多筆 fieldset,但我們要找的是這個:

<fieldset class=”formbox-field 

第一個 fieldset 且後面接著 class=  

因為有欄位名稱,所以您可以辨識出來。查看上面圖片,欄位名稱用藍色標注。

  1. 現在我們可以編輯。<fieldset> 標籤前面,您可以加入下列標籤(可以複製貼上):

<table><tr><td>

  1. 完成後,您必須在欄位結尾處新增關閉標籤:

</td>

找到結尾標籤為 </fieldset> 的欄位。

  1. 前往下一個欄位,新增下列標籤:

 <td> 

  1. 如果您還有一組欄位(姓氏欄位),在開頭新增 <td> 標籤,結尾新增 </td> 標籤。
  2. 在最後一個欄位結尾新增:

 </td></tr></table>

  1. 您會看到訂閱表格水平排列,最後要刪除寬度
  2. 再次打開搜尋欄,尋找寬度,我們要找的是這個:

width: 320px

找到後,將它從代碼中刪除不要刪除其他內容

代碼最後呈現的樣子如下:

注意,我們用藍色標示新增的標籤。此外,寬度已經移除,所以您可以看到水平排列的訂閱表格。

  1. 訂閱表格設定完成!複製整個代碼,貼到您的網站。

如果您需要影片協助,請依照下面影片裡的代碼編輯器步驟:

 

 

返回頁首

彈出式訂閱表格

訪客瀏覽網頁時會彈出這款訂閱表格,覆蓋在頁面上方,使網頁顏色變暗。

建立彈出式訂閱表格步驟如下:

  1. 點擊導覽列左側的「聯絡人」
  2. 現在,點擊導覽列左側選單的「訂閱表格」
  3. 然後,點擊頁面右上方的「新增訂閱表格」按鈕。
  4. 選擇「彈出式訂閱表格」,點擊「下一步」
  5. 替訂閱表格命名並選擇聯絡人名單。
  6. 點擊「儲存及下一步」
  7. 建立並編輯您的訂閱表格。
      • 點擊左上方的「訂閱設定」,編輯訂閱設定訊息。
      • 點擊「全局設定」,編輯彈出式表格設定。
  8. 完成後,點擊「儲存並發布」

請注意下列事項:

  • 彈出式訂閱表格寬度預設為 400 像素,左右兩邊的間距是 40 像素。圖片最大寬度為 320 像素。如果圖片佔滿整個頁面寬度,您可以根據需求修改圖片。

可以自訂義的設定

除了彈出式訂閱表格本身,您還可以自訂其他內容,像是「訂閱成功」訊息。記住,彈出式訂閱表格是訪客瀏覽網頁才彈出來,雖然您可以新增多組欄位,但我們建議您欄位保持精簡才能快速收集更多訂閱用戶。

  • 您可以選擇「彈窗位置」,也就是表格在頁面出現的地方:「置中」為常見選項。
  • 您可以設定新的寬度
  • 您可以新增「動畫」!訂閱表格可以選擇從向左或向右滑動、上升或下降,展開或淡入。
  • 「延遲」表示訂閱表格出現的時間,可以選擇 0 到 60 秒。
  • 類似其他訂閱表格,您也可以自訂顏色、框線、圓角,也可以增加陰影、選擇不透明度陰影大小
  • 訪客如果不想訂閱可以關閉訂閱表格。您還可以自訂「關閉」圖示的位置、顏色、圖示類型、背景及框線等等。
  • 「覆蓋」預設為不透明度 70% 的黑色,它是訂閱表格顯示時的背景,您可以自訂顏色、不透明度,如果不需要還可以取消套用。我們建議您保留覆蓋設定,增加訂閱表格的視覺效果。
  • 點擊訂閱表格,新增圖片文字分隔線,自訂標題欄位以及訂閱表格按鈕
  • 點擊「訂閱成功」,自訂義訊息內容。您也可以更改字型、顏色樣式、文字以及背景。

需要靈感嗎?下面是透過 Benchmark 建立的訂閱表格。

返回頁首

 

已訂閱用戶還會看到彈出式訂閱表格嗎?

彈出式訂閱表格預設只會針對未訂閱用戶顯示一次。一旦訪客訂閱後,頁面就不會再彈出訂閱表格。如果回流訪客清除瀏覽器快取資料、使用無痕模式或使用其他瀏覽器,彈出式訂閱表格就會再出現。

如何讓彈出式訂閱表格只彈出一次?

  1. 設計步驟,點擊「全局設定」
  2. 然後,點擊「關閉」選項。
  3. 現在,選擇「訪客只會看到一次彈出式視窗」選項。
  4. 最後,點擊「儲存並發布」

如果訂閱表格安裝在許多頁面上,訂閱表格一樣只會彈出一次。

 

返回頁首

 

 

一般式訂閱表格

請注意下列事項:

  • 一般式訂閱表格格式比較舊,類似內嵌式,但一般式訂閱表格格式已經過時。  
  • 我們已經用「內嵌式訂閱表格」取代「一般式訂閱表格」。
  • 您可以複製一般式訂閱表格,但無法建立全新的一般式訂閱表格。
  • 只有使用舊介面的用戶可以使用「一般式訂閱表格」。

返回頁首

 

如何建立符合 GDPR 規定的訂閱表格

新增符合 GDPR 規定的核取方塊總共有兩個步驟,請參考下列說明。

  • 編輯聯絡人名單的自訂欄位。
  • 在訂閱表格新增核取方塊。

聯絡人名單的自訂欄位

  1. 建立一組聯絡人名單,連動到訂閱表格
  2. 建立名單後,點擊編輯
  3. 您會看到名單內的所有欄位,將橫軸移動到「自訂欄位」,選擇一組欄位進行編輯。您可以將欄位重新命名,像是「隱私權政策」。
  4. 更改欄位類型為是/否,目的是紀錄訪客填寫訂閱表格的答案。

 

欄位編輯完成後,我們需要建立符合 GDPR 規定的訂閱表格。

在訂閱比格新增核取方塊

您可以在「內嵌式訂閱表格」「彈出式訂閱表格」使用核取方塊。

  1. 建立一組訂閱表格(也可以使用已建立的表格)。
  2. 接著,選擇先前編輯過欄位的聯絡人名單。在建立訂閱表格的步驟 2 新增前一個步驟編輯過的欄位。
  3. 滑鼠移動到名字和電子信箱的中間,點擊刪除號並新增您要的欄位。
  4. 然後「選擇欄位」,勾選您建立的自訂欄位。
  5. 現在,點擊返回箭頭,您會看到剛才選擇的欄位。
  6. 點擊該欄位。
  7. 替欄位命名,像是改成「隱私權政策」。(非強制,因為您已經在聯絡人名單內修改過欄位名稱)。
  8. 更改類型為「核取方塊」。
  9. 勾選「必填」方塊。
  10. 在答案欄位,新增下列代碼<a target=”blank” href=”https://www.yourdomain.com“><u>隱私權政策</u></a> 注意:將 https://www.yourdomain.com 替換成貴公司網站的隱私權政策頁面。

繼續編輯訂閱表格,或是完成後,點擊「儲存並發布」。

重要

  • 上面第 10 點提到的超連結必須連結到您網站的隱私權政策。
  • 內嵌式訂閱表格不支援核取方塊,所以無法建立訂閱表格。

您也可以參考下面影片,了解更多資訊:

  • 內嵌式訂閱表格(進階):僅限新介面才能使用

 

返回頁首

重要

如果熟悉 CSS,您可以加入代碼,幫訂閱表格增添額外的風格。

如果您有其他問題,請隨時透過電子郵件線上客服或電話與我們的支援團隊聯絡。


有回答到您的問題嗎?
You already voted!

找不到您要的答案嗎?

提交工單