訂閱電子報表單for側邊欄和頁尾

歡迎訂閱學習星系的電子報😃

訂閱《學習星系電子報》,每週收到:

  • 一篇自我學習成長文章
  • 一個學習引發思考靈感
  • 一則好書摘錄點亮生活

訂閱本報,
讓我們一起透過自學不斷疊代,
輕鬆徜徉在學習星系的知識海洋!

訂閱電子報表單for側邊欄和頁尾

歡迎訂閱學習星系的電子報😃

每週一封信
新鮮直送

讓我們一起透過自學不斷疊代,
輕鬆徜徉在學習星系的知識海洋!💖

訂閱電子報表單for側邊欄和頁尾

查看已發佈電子報

歡迎訂閱學習星系的電子報😃

每週一封信
新鮮直送

讓我們一起透過自學不斷疊代,
輕鬆徜徉在學習星系的知識海洋!💖

訂閱電子報表單for側邊欄和頁尾

查看已發佈電子報


歡迎訂閱電子報

訂閱電子報表單for側邊欄和頁尾

用《Fluent Forms外掛》製作一份全新的電子報訂閱表單。電子報教學系列第4集

前情提要

上次分享了我如何只用一年 420 元的預算搞定本站的電子報訂閱系統,接下來就要來小小教學一下設定細節。

這是電子報教學的第四集,主要針對如何在 Fluent Forms 外掛中製作一份全新的電子報訂閱表單。

選擇使用 Fluent Forms 是因為可以很直覺的串接到我們電子報的關鍵環節 FluentCRM。蒐集客戶名單的同時,就直接做好管理囉。

一起學習吧!


安裝 Fluent Forms 步驟

  1. 登入 WordPress 後台
  2. 點選外掛
  3. 點選安裝外掛
  4. 搜尋 Fluent Forms
  5. 點選立即安裝
  6. 點選啟用

製作出客戶填寫的介面

  1. 登入 WordPress 後台
  2. 點選 Fluent Forms
  3. ( 可以直接修改官方製作的電子報訂閱表單,也可以跟著我直接重新做一份 )
  4. 點選藍色 +Add New Form 按鈕

製作出 Email 欄位

fluent-forms-email-field
  1. 按黑色加號
  2. 點選 Email
  3. 在右方面板修改 Email 欄位細節設定
  4. 我是選擇 Hide Label,這樣表單就不會有標題
  5. Placeholder 中填寫框中文字,例如:填入您的 Email
  6. Required 點選 Yes
  7. Error Message 點選 Custom,輸入:必填欄位
  8. Validate Email 點選 Yes
  9. Error Message 點選 Custom,輸入:請填入正確格式

製作出送出按鈕

fluent-forms-submit-button
  1. 點選預設藍色 Submit Form 按鈕右方的鉛筆,在右方面板修改送出按鈕的細節設定
  2. Submit Button Text 中填入:免費訂閱電子報
  3. Button Style 選單中選擇 Custom,把按鈕顏色換成適合自己部落格的配色。
  4. Normal State 指的是預設樣式,依序修改背景色、框線顏色、文字顏色
  5. Hover State 指的是鼠標懸停時的樣式,一樣依序修改三種顏色
  6. 點選右上方藍色 Save Form 按鈕

設定客戶填寫完畢時顯示的訊息

  1. 點選上方 Settings & Integrations
  2. 修改 Confirmation Settings
  3. 填入想顯示的訊息,例如:謝謝您訂閱電子報!請檢查您的電子郵件(包括垃圾郵件資料夾)以確認您的訂閱。
  4. 點選右上方藍色 Save Settings 按鈕

設定 Fluent Forms 與 Fluent CRM 整合

fluent-forms-Configure-Integrations
  1. 點選 Settings & Integrations
  2. 點選 Configure Integrations
  3. 點選右上黑色 Add New Integrations 按鈕
  4. 點選 FluentCRM Integration
  5. FluentCRM List
    選單中選擇剛剛在 Fluent CRM 新增的清單,例如:從網站訂閱
  6. Email Address 選單中點選 Email
  7. 勾選 Enable Double Opt-in for new contacts,開啟兩步驟驗證訂閱
  8. 在最下方確認已勾選 Enable This feed,開啟此整合服務 ( 如果沒有打勾就會關閉整合 )
  9. 點選 Save Feed

開啟訂閱電子報通知 ( 可跳過 )

  1. 點選 Settings & Integrations
  2. 點選 Email Notifications
  3. 預設已經有一個 Admin Notification Email,點選右方綠色齒輪按鈕修改
  4. 清空 Subject 欄位選項後,點選右方的三個點選單
  5. 點選 Email 並輸入「訂閱電子報」
    1. 完成後會長這樣:{inputs.email} 訂閱電子報
    2. 收到的通知範例:user@example.com 訂閱電子報
  6. Email Body 則可以不做調整,預設的狀態就會呈現訂閱者的 Email 和從哪個網址訂閱的
  7. 點選下方藍色 Save Notification 按鈕
  8. 自動跳轉回到 Email Notifications 頁面後,Status 改成 Enabled

插入頁尾小工具區域

  1. 點選外觀
  2. 點選小工具
  3. 點選頁尾小工具
  4. 點選加號
  5. 點選 Fluent Forms
  6. 點選剛剛製作好的表單
  7. ( 請自行確認有在佈景主題中打開這個頁尾小工具 )

測試客戶訂閱的整體流程

終於來到正式使用環節了!這時我們可以去前台 ( 也就是部落格 ) ,自己當第一個訂閱客戶來測試所有流程。

  1. 在頁尾找到訂閱電子報表單小工具,檢查外觀整體有無符合預期,如果寬度方面想要修改,則要去自己的佈景主題中做調整
  2. 輸入自己常用的信箱
  3. 點選按鈕時,確認顏色顯示是否符合預期
  4. 確認點擊訂閱後顯示的文字是否符合預期

測試收兩步驟驗證的信

  1. 在自己的常用信箱中收信
  2. 檢查是不是已經沒有掉入垃圾郵件了。
    1. 老實說如果都已經設定 SMTP、DKIM、DMARC、揭露完整地址,如果還是在垃圾郵件區,我也不確定要怎麼辦呢。可能要檢查自己購買的網域是不是曾經有別人租用過且亂搞,網域已經被各大信箱服務設為黑名單(可以在這裡輸入網域查詢),或是詢問更專業的人士了。
    2. 如果已經在主要郵箱中收到,恭喜!我們已經接近完成囉!

確認網站管理員信箱有沒有收到訂閱通知 ( 可跳過 )

剛剛有啟用訂閱電子報通知的話才會收到喔!

  • 檢查標題設定有沒有符合預期
  • 檢查信件內容的設定是否符合預期
  • 不符合預期的部分,回到表單中的 Settings & Integrations → Email Notifications 做修改

查看表單的所有填寫記錄

這個功能在常見的 WPForms 是付費版才有的喔!非常方便直覺。

  1. 登入 WordPress 後台
  2. 點選 Fluent Forms
  3. 點選上方 Entries

加碼提供一個靈感

可以在後台設置多個同樣設計的訂閱電子報表單,放在不同的位置像是網站、IG、FB,客戶填寫訂閱的表單不同就會進入不同的清單被管理喔。

操作的模式可說是千變萬化呢!


結語

可以自動串接 FluentCRM 真的是太方便了。其他部分就顯得中規中矩,主要是能夠使用同一品牌系列而勝出。

接下來可以看看其他電子報系列教學來完成所有設定喔。


您可能也會有興趣的文章

您喜歡這篇文章嗎?

加入訂閱免費自學電子報,透過自主學習實現理想的自己。
訂閱《學習星系電子報》,每週收到:

學習星系電子報
  • 1 篇自我學習成長文章
  • 1 個學習引發靈感思考
  • 1 則好書摘錄點亮生活

訂閱電子報表單for文章結束CTA

查看已發佈的電子報

安寶寶Anbobo

安寶寶Anbobo

嗨,我是站長安寶寶。
1995 年生。有 3 年藥師工作經驗。
目前是全職媽媽,過著左手扛小孩、右手寫文章的豐富生活。
在《學習星系》這裡分享書籍閱讀、線上課程、工具使用的學習筆記和心得。
歡迎「訂閱免費電子報」支持我。
聯絡我請至「聯絡表單」。

工商時間

筆記軟體推廣 Heptabase

  • 文章是用台灣人打造的 Heptabase 筆記軟體編輯、撰寫,免費試用 7 天,和我一起用新工具快樂學習!
  • 使用我的連結註冊,價格會跟官網註冊一模一樣;若您感覺滿意且付費使用,本站能夠收到一點點紅利繼續營運😀謝謝您的支持

其他優惠折扣碼

全站最新留言

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *