# Newsleopard 教學：使用客製化訂閱表單搜集名單

> 



建立訂閱表單的步驟：





 1. 在後台的「訂閱表單」單元建立一個新的表單
 2. 設定完成後「建立原始碼」，將原始碼貼在自己的網站 HTML 裡
 3. 確認網頁上的表單正確顯示






使用者訂閱表單步驟：





 1. 在網站上填寫姓名與 Email 送出
 2. 到信箱裡點選「確認訂閱」連結
 3. 訂閱成功！






步驟一：新增表單設定





1.1 新增表單









1.2 填寫表單名稱、蒐集到的名單欲加入的群組，確認信件主旨、寄件人。、





訂閱成功的畫面若沒有設定的話，會導向電子豹預設的畫面。









1.3 點選「表單內容」設定









可以調整「程式碼」最下方的 <style> 來符合網站的顏色風格。





也可以調整訂閱表單的文字，預設為：





 1. 訂閱我們的電子報
 2. 您可以從電子郵件中得到我們最新的消息與資訊
 3. 輸入姓名
 4. 輸入 Email
 5. 訂閱服務確認
 6. 已發送 Email 驗證信給你，請點擊信件連結以完成訂閱程序
 7. 訂閱失敗
 8. 暫時無

**分類：** Newsleopard 後台教學  
**作者：** Bao  
**發布日期：** 2022-08-15T23:06:30.000+08:00


### **建立訂閱表單的步驟：**

1.  在後台的「訂閱表單」單元建立一個新的表單
2.  設定完成後「建立原始碼」，將原始碼貼在自己的網站 HTML 裡
3.  確認網頁上的表單正確顯示

### **使用者訂閱表單步驟：**

1.  在網站上填寫姓名與 Email 送出
2.  到信箱裡點選「確認訂閱」連結
3.  訂閱成功！

## 步驟一：新增表單設定

1.1 新增表單

![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2022/08/01.jpeg)

1.2 填寫表單名稱、蒐集到的名單欲加入的群組，確認信件主旨、寄件人。、

訂閱成功的畫面若沒有設定的話，會導向電子豹預設的畫面。

![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2022/08/03-1.jpeg)

1.3 點選「表單內容」設定

![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2022/08/04-1.jpeg)

可以調整「程式碼」最下方的 `<style>` 來符合網站的顏色風格。

也可以調整訂閱表單的文字，預設為：

1.  訂閱我們的電子報
2.  您可以從電子郵件中得到我們最新的消息與資訊
3.  輸入姓名
4.  輸入 Email
5.  訂閱服務確認
6.  已發送 Email 驗證信給你，請點擊信件連結以完成訂閱程序
7.  訂閱失敗
8.  暫時無法接受訂閱，請稍候重新嘗試

![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2022/08/02-ch-2.jpeg)

訂閱表單不同狀態預設的文案：

![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2022/08/subscribe-status-2000x1404.jpg)

1.4 點選「確認信件內容」設定

![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2022/08/04-1.jpeg)

這是使用者點選「確認訂閱」後會收到的信件，調整所需要的文字，點選完成。

![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2022/08/05-1.jpeg)

1.5 建立原始碼

![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2022/08/06-1.jpeg)

## 步驟二：貼上原始碼

2.1 將原始碼貼上網站的 HTML 中，測試網頁是否正常顯示。

![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2022/08/form.jpg)

## 使用客製化訂閱表單製作英文表單

![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2022/08/10-en-1.jpeg)

將表單中的文字改成所需要的語系，如下圖，有八處需要修改：

1.  標題
2.  副標題
3.  文字輸入框 Name
4.  文字輸入框 Email
5.  按鈕：確認
6.  送出成功
7.  送出失敗
8.  按鈕：重試

![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2022/08/08-en-1.jpeg)

![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2022/08/07-en-1.jpeg)

![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2022/08/form-en-2000x756.jpg)

信件中的文字改成英文：

![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2022/08/09-en-1.jpeg)

「訂閱成功設定」也要改成自製的英文頁面：

![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2022/08/success.png)

## 使用客製化確認信件內容，製作專屬品牌訂閱及下載文件行銷宣傳

在「確認信件內容」客製化自己想要的文字，你可以加上自己品牌的 logo、品牌顏色，並且可以搭配不同的宣傳活動使用喔！

![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2022/08/11-email-cust-1.jpeg)

使用者成功訂閱的話，名單會進到設定的群組，列表頁面「訂閱數」會增加。

![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2022/08/list.png)

延伸閱讀：

> [4 個步驟打造訂閱表單，取得訂閱者信任](https://blog.newsleopard.com/4%e5%80%8b%e6%ad%a5%e9%a9%9f%e6%89%93%e9%80%a0%e8%a8%82%e9%96%b1%e8%a1%a8%e5%96%ae%ef%bc%8c%e5%8f%96%e5%be%97%e8%a8%82%e9%96%b1%e8%80%85%e4%bf%a1%e4%bb%bb/?ref=cms.newsleopard.com)

> [Email 名單暴增 6 倍的秘訣！優化訂閱視窗的 6 大技巧](https://blog.newsleopard.com/email-marketing-grow-email-subscriber/?ref=cms.newsleopard.com)