犬哥網站

希望這篇文章對你有幫助!

如果希望我協助「 網站建置、主機代管等 .. 」,歡迎 聯絡我
MailChimp for WordPress 外掛教學(MC4WP),強化訂閱表單!

如何製作電子報訂閱表單?MailChimp for WordPress 外掛教學(MC4WP)

這是一篇完整的「 MailChimp for WordPress 」外掛教學。

MailChimp 是全球知名的 電子報行銷軟體,它的 EDM 行銷功能豐富,加上完整的數據分析(像是開信率、點擊率等 ..),讓許多站長愛不釋手。可參考 MailChimp 完整教學

我許多網站都是使用 MailChimp 發送行銷信件+收集訪客電子報,而且效果很不錯!

但有個小缺點,就是如果要把 MailChimp 訂閱表單,嵌入到 WordPress 網站,對於不太了解程式碼的站長,可能會有點頭疼(因為需要找到地方,把英文改為中文)。

所以這篇文章,我會教大家使用 MailChimp for WordPress(MC4WP)外掛,簡單彌補這些缺點。

並使用這款外掛,簡單製作電子報訂閱表單,放到網站上讓訪客留下 Email:)

如果使用的是 Divi 主題,可以參考 Divi Bloom 外掛教學,製作精美電子報訂閱表單。


1. MC4WP 是什麼?

WordPress 外掛推薦 :Mailchimp for WordPress 電子報外掛
MC4WPMailchimp for WordPress 電子報外掛

MailChimp 是全球知名的電子報行銷平台,擁有強大的電子報行銷功能,還有多種漂亮的 EDM 模板能套用,能幫你把訂閱者妥善的整理+歸類。可參考 MailChimp 完整教學

由於 MailChimp 使用者眾多,相關領域的開發者,當然不會放過這個好機會,於是有一款很棒的擴充外掛 Mailchimp for WordPress(MC4WP)就誕生啦!

完整教學,可參考 MC4WP 外掛教學,或是下面完整影片。

它能讓你簡單的在 WordPress 嵌入訂閱表單,並開始收集訪客信箱(還有一些附加功能)。

關於 MC4WP 外掛,可參考下面影片幫助你了解更多。

如果有電子報行銷相關需求,MailChimp+MC4WP 的外掛組合,會是一個很棒的選擇!


2. 安裝 MC4WP+激活 API key

前往 WordPress 外掛 > 安裝外掛,安裝+啟用 MC4WP 外掛。

MailChimp for WordPress 電子報外掛:安裝+啟用外掛
MC4WP 電子報外掛:安裝+啟用外掛

啟用後,在 WordPress 後台側邊欄,應該會看到 MC4WP 功能,點擊前往。

點擊 Get your API key here,前往 MailChimp 生成 API Key。

MailChimp for WordPress 電子報外掛:前往 MailChimp,生成 API Key
前往 MailChimp,生成 API Key

找到 API keys,點擊 Create A Key 生成憑證+複製憑證。

MailChimp for WordPress 電子報外掛:生成+複製 API Key
生成+複製 API Key

回到 WordPress 後台,輸入 API Key,確認後送出。

此時會發現已經跟 MailChimp 進行串接溜,會看到訂閱者數量出現(想讀取最新狀態,可點 Renew MailChimp lists)。

MC4WP 電子報外掛:輸入 API Key,確認送出
MC4WP 電子報外掛:輸入 API Key,確認送出

這樣就完成 MC4WP 外掛的憑證激活了。


3. 一般功能設定

設計訂閱表單之前,先來做一些設定,方便後續流程。

前往到 Settings 分頁,可以先幫表單取個名稱,然後把 Lists this form subscribes to 打勾(訂閱者會整合到此列表)。

在 Subscriber tags 訂閱者標籤,可以輸入想設定的標籤名稱(訪客訂閱電子報,就會匯入到此標籤下,在 MailChimp 需有此標籤的存在,需使用英文命名)。

如果有多個標籤的話,可以用「 , 」進行分割。

MailChimp for WordPress 電子報外掛:一般功能設定
一般功能設定
  • Use double opt-in:訪客除了在網站訂閱電子報,也需到自己信箱點選確認信。這會建議開啟,因為安全性比較高。
  • Update existing subscribers:如果是存在的訂閱者,再度提交表單會更新原來的個人資料。這個我沒有開。

下面我是用預設值,完成後儲存。

MC4WP 電子報外掛:一般功能設定
MC4WP 電子報外掛:一般功能設定
  • Hide form after a successful sign-up:成功訂閱後,隱藏訂閱表單。
  • Redirect to URL after successful sign-ups:成功訂閱後,導向到指定頁面。

好囉,這樣一般設定就搞定哩。


4. 訂閱表單設計

前往 Fields,開始訂閱表單設計溜。

剛 API Key 憑證激活完,應該會看到 List fields 可用的功能變多了,除了 Email address(電子信箱,這是必選的項目)、First / Last Name(姓名)、Phone Number(手機號碼) ..。

MC4WP 電子報外掛:訂閱表單設計
MC4WP 電子報外掛:訂閱表單設計

小提醒:上面我有更改一下程式碼內的文字。

1. Email Address 改為中文「 電子信箱 」。

2. 把 placeholder 內的英文改為「 請輸入您的 Email 」。

3. input 標籤內的 value,改為中文字「 送出 」。

只要選擇你要的欄位,就會自動用程式碼套用到 Form code,如果有些文字是顯示英文,可改為中文,比較符合閱讀習慣。

Form Preview 也能看到表單呈現的樣式,預設是繼承你用的佈景主題樣式。

最後都設計完成,記得要儲存唷:)


5. 翻譯提示訊息

前往 Messages,這裡是系統的提示訊息,預設是英文,就都改成自己的語言即可。

完成後記得儲存唷。

MailChimp for WordPress 電子報外掛:翻譯文字
翻譯文字

翻譯除了常用的 Google 翻譯,也有一款滿強的就是 DeepL,這是國外知名的翻譯軟體(公司),許多知名的公司都是它的愛用者。

因為大家知道 Google 翻譯,恩 … 有時翻譯的很古怪,上面提到的這款 DeepL 也可以玩玩看,看是否翻譯得更正確:)


6. 嵌入到 WordPress 網站

好溜,最後就是把訂閱表單嵌入到 WordPress 網站了,這步驟一樣很容易示範給大家看。

前往任一個分頁,Mailchimp for WordPress 頂端會看到表單短代碼,這個先複製起來。

MC4WP 電子報外掛:複製表單短代碼
MC4WP 電子報外掛:複製表單短代碼

前往 WordPress 外觀 > 小工具,找到文字工具,貼上剛複製的短代碼,進行儲存。

WordPress 5.8 版本以後,進化為全站式小工具,可參考 WordPress 新版小工具 繼續學習,如果想還原到舊版小工具介面,可安裝 Classic Widgets 外掛處理。

下圖是用舊版小工具的介面,做為示範教學。

MC4WP 電子報外掛:新增小工具+填入短代碼
MC4WP 電子報外掛:新增小工具+填入短代碼

最後到網站前台,看一下顯示成果啦!

MC4WP 電子報外掛:訂閱表單出現啦~
MC4WP 電子報外掛:訂閱表單出現啦~

小提醒:如果不想要有「 電子信箱 」的字,或是哪邊製作覺得不夠好,都可以再回到 Mailchimp 調整:)

接著,可以在訂閱表單輸入其他 Email 進行訂閱測試,送出後再到此信箱收一下確認信。

打開認證信件,點擊一下確認即可。

MC4WP 電子報外掛:進行信件確認
MC4WP 電子報外掛:進行信件確認

最後再前往 MailChimp 後台,看一下是否有進入到訂閱者列表,就大功告成囉!

MC4WP 電子報外掛:MailChimp 訂閱列表顯示
MC4WP 電子報外掛:MailChimp 訂閱列表顯示

以上就是在 WordPress 嵌入訂閱表單分享,不知道大家操作的是否順利呢:)


常見問題

MailChimp for WordPress 是什麼?

MailChimp 是全球知名的電子報行銷平台,擁有強大的電子報行銷功能,還有多種漂亮的 EDM 模板能套用,能幫你把訂閱者妥善的整理+歸類。可參考 MailChimp 完整教學

由於 MailChimp 使用者眾多,相關領域的開發者,當然不會放過這個好機會,於是有一款很棒的擴充外掛 Mailchimp for WordPress(MC4WP)就誕生啦!

它能讓你簡單的在 WordPress 嵌入訂閱表單,並開始收集訪客信箱(還有一些附加功能)。

MailChimp for WordPress 外掛,為什麼安裝次數這麼多?

因為 MailChimp 是全球知名的電子報行銷平台,擁有非常大量的使用者。

剛好有開發者製作這一款訂閱表單外掛,方便 WordPress+MailChimp 快速串接。

WordPress 電子報行銷軟體,最推薦哪一款呢?

MailChimp 是最推薦的一款,因為 EDM 行銷功能非常強大。

加上都是使用 MailChimp 平台的寄信服務(和主機資源),寄件成功率非常高,比較少被丟到垃圾信箱。

MailChimp for WordPress 的進階版,有什麼功能呢?

有提供更大幅度的表單樣式修改、創造多個訂閱表單、E-commerce 整合功能、數據分析等 ..。可參考 MailChimp for WordPress Pro


WordPress 學習資源

學習 WordPress 網站架設流程中,或許會遇到一些解決不了問題,可以在下方留言給我,我會盡力協助解答。

如果你沒有時間自己架站,或是想委託專人服務,那可以參考我們的 網站建置服務

我最近也開啟了 YouTube 頻道,裡面有些影片教學,你也能搭配 Blog 一起學習,應該會來的更加順手(歡迎訂閱我+開啟小鈴鐺,可收到第一手影片教學通知)。

當然,如果怕問題描述不清楚,也可以加入 WordPress 教學時光屋 – 犬哥網站 ,我同步也會在社團中幫忙解惑。

希望這些對你有所幫助,祝架站順利啦。

犬哥網站:wordpress教學社團

11 thoughts on “如何製作電子報訂閱表單?MailChimp for WordPress 外掛教學(MC4WP)”

  1. 您好,有個問題想請問您:
    目前按造您文章操作後,目前訂閱者收到的第一封確認信,裡面是英文內容,請問要如何中文化 謝謝!

  2. 您好,想詢問您,已建立完電子報訂閱的流程,也加入頁面要測試訂閱,卻一直跳出「錯誤訊息」的提醒,到後台查詢錯誤來源:
    「錯誤: 表格 1355 > Mailchimp API 錯誤:400 錯誤請求。無效資源。alic***********@gm***.om 看起來是假的或無效的,請輸入真實的電子郵件地址。」

    請問這樣的狀況要如何處理,謝謝!! (確認電子郵件是填寫無誤的…)

  3. 您好,我剛剛試訂閱自己的網站,但還沒有在mailchimp看到自己的信箱,請問大概多久會更新呢?

    1. 小犬網站 - Luna

      嗨,Mia,建議你先等候一下,看看有沒有新增,沒有的話再手動新增看看能不能顯示自己的郵箱。
      MailChimp 可能有內建的安全設置,所以自動輸入 Mail 的動作盡量不要太頻繁會比較好唷。

  4. 想請問~我目前也遇到填寫電子郵件卻無法成功的問題,
    已建立完電子報訂閱的流程,進行測試訂閱,卻一直跳出「錯誤訊息」的提醒,到後台查詢錯誤來源:一直出現 400 錯誤請求
    信箱也都是沒註冊過的,該怎麼解決這問題呢?

    1. 犬哥網站 - Luna

      嗨,Judy,

      可以先將電子郵件手動添加到你的 MailChimp.com 帳戶,然後啟用「 更新現有用戶 」選項後,再測試一次表單看看,

      因為 MailChimp 有安全性設置,建議不要太頻繁輸入同一個電子郵件,以免電子郵件被封鎖哦。

Leave a Comment

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

回到頂端