如何建立訂閱表格?
訂閱表格
更新日期 23 四月, 2021
在網站或社群媒體平台使用訂閱表格是收集訂閱用戶的一個好方法。您可以在 Benchmark Email 帳戶建立不同訂閱表格,本文將帶您實際操作,了解如合建立每一種訂閱表格。
點擊下方選項,了解您要建立的訂閱表格。
開始前,請注意下列事項:
- 免費帳戶每天可以收集 75 個訂閱用戶。
- 付費帳戶沒有限制訂閱用戶的數量。
- 使用舊介面的客戶無法使用內嵌式訂閱表格(進階)。
- 新介面已經用新的「內嵌式訂閱表格(進階)」取代原本的「一般式訂閱表格」,功能維持相同。
- 顧名思義,內嵌式訂閱表格就是嵌在網站裡面,跟其他內容或區塊放在網站上。
- 如果您要刪除訂閱表格的某個區塊,進到訂閱表格編輯器,將滑鼠移到區塊上方,您會看到垃圾桶圖示。點擊該圖示,刪除該區塊。
- 截至 2018 年 9 月,許多 Google 服務仍被中國封鎖。由於這些限制,如果您位於中國等受到影響的地區,reCAPTCHA 驗證碼可能無法正常運作。點擊此處,了解更多相關資訊。
- Javascript 訂閱表格(含網站追蹤):更改或更新 Javascript 訂閱表格的內容會直接顯示在您的網站。
- HTML 訂閱表格(含網站追蹤):更改或更新 HTML 訂閱表格的內容不會自動顯示在您的網站。要看到更新後內容,您需要再次儲存並發布訂閱表格,複製新的 HTML 代碼,最後貼到您的網站。
內嵌式訂閱表格(進階)
建立訂閱表格步驟如下:
- 點擊導覽列左側的「聯絡人」。
- 現在,點擊導覽列左側選單的「訂閱表格」。
- 然後,點擊頁面右上方的「新增訂閱表格」按鈕。
- 選擇「內嵌式訂閱表格(進階)」,點擊「下一步」。
- 替訂閱表格命名並選擇聯絡人名單,然後點擊「儲存及下一步」。
- 建立並編輯您的訂閱表格
- 點擊左上方的「訂閱設定」,編輯訂閱設定訊息。
- 將滑鼠移動到訂閱表格上方,點擊「刪節號」就可以變更訂閱表格外觀或新增欄位。
- 完成後,點擊「儲存並發布」。
- 接著你會看到訂閱表格代碼,選擇您要的代碼類型,像是 Javascript 或 HTML,複製並貼上到您的網站。
重要
- 如果您沒有設定像素的寬度,訂閱表格會填滿整個寬度區域。
- 訂閱表格在桌機顯示最大寬度為 999 像素,但如果在行動裝置開啟,訂閱表格會自動填滿與螢幕大小一致。
可自訂義的部份
- 雖然您可以自訂寬度,但是我們不建議您做調整。訂閱表格預設會以 100% 大小填滿整個寬度區域。
- 您可以更改訂閱表格的背景顏色、新增框線以及設定圓角。
- 點擊訂閱表格,新增圖片、文字、分隔線,自訂標題、欄位以及訂閱表格按鈕。
- 您可以在內嵌式訂閱表格(進階)加入想要的欄位數量,但我們建議保持訂閱表格精簡。
需要靈感嗎?下面是透過 Benchmark 建立的訂閱表格。

返回頁首
內嵌式訂閱表格
開始前,請注意下列事項:
- 訂閱表格寬度取決於您放在網站的位置。
- 內嵌式訂閱表格只收集電子信箱、名字以及姓氏。
建立內嵌式訂閱表格步驟如下:
- 登入您的 Benchmark 帳戶。
- 點擊左側導覽列的「連路人」。
- 現在,點擊導覽列左側選單的「訂閱表格」。
- 點擊頁面右上方的「新增訂閱表格」按鈕。
- 選擇「內嵌式訂閱表格」,點擊「下一步」。
- 替訂閱表格命名並選擇聯絡人名單。
- 點擊「儲存及下一步」。
- 建立並編輯您的訂閱表格。

完成後,點擊「儲存並發布」。系統會彈出訂閱表格代碼視窗,選擇 Javascript 或 HTML 代碼,複製並貼上到您的網站。
可以自訂義的設定
這款精簡的訂閱表格只有三個欄位,名字、姓氏以及電子信箱,但不支援圖片。
- 雖然您可以自訂寬度,但是我們不建議您做調整。訂閱表格預設為 100% 填滿整個區域。
- 您可以更改背景顏色、標題以及按鈕樣式。
需要靈感嗎?下面是透過 Benchmark 建立的訂閱表格。

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

參考下列步驟,設定水平排列的內嵌式訂閱表格。
從訂閱表格工具內設定
要建立水平排列的訂閱表格,您需要有一個已建立的內嵌式訂閱表格。
- 完成訂閱表格後,點擊「儲存並發布」。

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

- 關閉彈出式視窗,點擊左上角 Benchmark 商標,返回 Benchmark 首頁。
接下來在代碼編輯器繼續操作,這部份非強制性,您也可以使用文字檔案。
- 現在,進到「電子郵件」導覽列。
- 點擊「建立新電子郵件」按鈕,然後選擇「一般電子報」。
- 點擊「建立新電子郵件」按鈕,然後選擇「一般電子報」。

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

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

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

- 現在,使用鍵盤搜尋欄位。如果您用 Mac,按下 cmd+f ,使用 Windows 系統,按下 ctrl+f。
這是我們實際搜尋操作的範例:

- 在搜尋欄位輸入 fieldset 或欄位名稱(舉例:名字)。如果搜尋 fieldset,您會找到多筆 fieldset,但我們要找的是這個:
<fieldset class=”formbox-field
第一個 fieldset 且後面接著 class=
因為有欄位名稱,所以您可以辨識出來。查看上面圖片,欄位名稱用藍色標注。
- 現在我們可以編輯。在 <fieldset> 標籤前面,您可以加入下列標籤(可以複製貼上):
<table><tr><td>
- 完成後,您必須在欄位結尾處新增關閉標籤:
</td>
找到結尾標籤為 </fieldset> 的欄位。
- 前往下一個欄位,新增下列標籤:
<td>
- 如果您還有一組欄位(姓氏欄位),在開頭新增 <td> 標籤,結尾新增 </td> 標籤。
- 在最後一個欄位結尾新增:
</td></tr></table>
- 您會看到訂閱表格水平排列,最後要刪除寬度。
- 再次打開搜尋欄,尋找寬度,我們要找的是這個:
width: 320px;
找到後,將它從代碼中刪除,不要刪除其他內容。
代碼最後呈現的樣子如下:

注意,我們用藍色標示新增的標籤。此外,寬度已經移除,所以您可以看到水平排列的訂閱表格。
- 訂閱表格設定完成!複製整個代碼,貼到您的網站。
如果您需要影片協助,請依照下面影片裡的代碼編輯器步驟:
返回頁首
彈出式訂閱表格
訪客瀏覽網頁時會彈出這款訂閱表格,覆蓋在頁面上方,使網頁顏色變暗。
建立彈出式訂閱表格步驟如下:
- 點擊導覽列左側的「聯絡人」。
- 現在,點擊導覽列左側選單的「訂閱表格」。
- 然後,點擊頁面右上方的「新增訂閱表格」按鈕。
- 選擇「彈出式訂閱表格」,點擊「下一步」。
- 替訂閱表格命名並選擇聯絡人名單。

- 點擊「儲存及下一步」。
- 建立並編輯您的訂閱表格。
-
- 點擊左上方的「訂閱設定」,編輯訂閱設定訊息。
- 點擊「全局設定」,編輯彈出式表格設定。
- 完成後,點擊「儲存並發布」。
請注意下列事項:
- 彈出式訂閱表格寬度預設為 400 像素,左右兩邊的間距是 40 像素。圖片最大寬度為 320 像素。如果圖片佔滿整個頁面寬度,您可以根據需求修改圖片。
可以自訂義的設定
除了彈出式訂閱表格本身,您還可以自訂其他內容,像是「訂閱成功」訊息。記住,彈出式訂閱表格是訪客瀏覽網頁才彈出來,雖然您可以新增多組欄位,但我們建議您欄位保持精簡才能快速收集更多訂閱用戶。
- 您可以選擇「彈窗位置」,也就是表格在頁面出現的地方:「置中」為常見選項。
- 您可以設定新的寬度。
- 您可以新增「動畫」!訂閱表格可以選擇從向左或向右滑動、上升或下降,展開或淡入。
- 「延遲」表示訂閱表格出現的時間,可以選擇 0 到 60 秒。
- 類似其他訂閱表格,您也可以自訂顏色、框線、圓角,也可以增加陰影、選擇不透明度及陰影大小。
- 訪客如果不想訂閱可以關閉訂閱表格。您還可以自訂「關閉」圖示的位置、顏色、圖示類型、背景及框線等等。
- 「覆蓋」預設為不透明度 70% 的黑色,它是訂閱表格顯示時的背景,您可以自訂顏色、不透明度,如果不需要還可以取消套用。我們建議您保留覆蓋設定,增加訂閱表格的視覺效果。
- 點擊訂閱表格,新增圖片、文字、分隔線,自訂標題、欄位以及訂閱表格按鈕。
- 點擊「訂閱成功」,自訂義訊息內容。您也可以更改字型、顏色樣式、文字以及背景。
需要靈感嗎?下面是透過 Benchmark 建立的訂閱表格。

返回頁首
已訂閱用戶還會看到彈出式訂閱表格嗎?
彈出式訂閱表格預設只會針對未訂閱用戶顯示一次。一旦訪客訂閱後,頁面就不會再彈出訂閱表格。如果回流訪客清除瀏覽器快取資料、使用無痕模式或使用其他瀏覽器,彈出式訂閱表格就會再出現。
如何讓彈出式訂閱表格只彈出一次?
- 在設計步驟,點擊「全局設定」。
- 然後,點擊「關閉」選項。
- 現在,選擇「訪客只會看到一次彈出式視窗」選項。
- 最後,點擊「儲存並發布」。
如果訂閱表格安裝在許多頁面上,訂閱表格一樣只會彈出一次。
返回頁首
一般式訂閱表格
請注意下列事項:
- 一般式訂閱表格格式比較舊,類似內嵌式,但一般式訂閱表格格式已經過時。
- 我們已經用「內嵌式訂閱表格」取代「一般式訂閱表格」。
- 您可以複製一般式訂閱表格,但無法建立全新的一般式訂閱表格。
- 只有使用舊介面的用戶可以使用「一般式訂閱表格」。
返回頁首
如何建立符合 GDPR 規定的訂閱表格
新增符合 GDPR 規定的核取方塊總共有兩個步驟,請參考下列說明。
- 編輯聯絡人名單的自訂欄位。
- 在訂閱表格新增核取方塊。
聯絡人名單的自訂欄位
- 建立一組聯絡人名單,連動到訂閱表格。
- 建立名單後,點擊編輯。
- 您會看到名單內的所有欄位,將橫軸移動到「自訂欄位」,選擇一組欄位進行編輯。您可以將欄位重新命名,像是「隱私權政策」。
- 更改欄位類型為是/否,目的是紀錄訪客填寫訂閱表格的答案。

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

繼續編輯訂閱表格,或是完成後,點擊「儲存並發布」。
重要
- 上面第 10 點提到的超連結必須連結到您網站的隱私權政策。
- 內嵌式訂閱表格不支援核取方塊,所以無法建立訂閱表格。
您也可以參考下面影片,了解更多資訊:
返回頁首
重要
如果熟悉 CSS,您可以加入代碼,幫訂閱表格增添額外的風格。
如果您有其他問題,請隨時透過電子郵件、線上客服或電話與我們的支援團隊聯絡。
有回答到您的問題嗎?
You already voted!