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


聯絡犬哥網站

在網站架設+網路行銷的過程中,或許會遇到一些解決不了問題,可以在下方留言給我,我會盡力協助解答!

接下來,額外分享 2 個實用資源,可有效幫助大家解決問題。

資源一:犬哥網站(專業 WordPress 網頁設計&數位行銷公司)

如果你沒時間自己架站,或是遇到網站沒有流量、Google 網站排名不理想。歡迎洽詢 犬哥網站(WordPress 網頁設計&數位行銷公司),請專家協助你會更容易!

我們有多年網頁設計、SEO 關鍵字行銷、Google 廣告投放經驗,加上上百個實戰案例,絕對能滿足您的需求!

犬哥網站|網頁設計&數位行銷公司
犬哥網站|網頁設計&數位行銷公司

資源二:WordPress 高手架站課+SEO 排名飆升課(線上課程)

如果想學習更深入的 WordPress 架站技巧,或是想透過 SEO 關鍵字提升網站流量?

可以參考犬哥近期推出的這兩門課程,課程非常的扎實,都是犬哥自己實戰出來的經驗分享,不打高空只教你做出成績!

WordPress 高手架站課&SEO 排名飆升課
WordPress 高手架站課&SEO 排名飆升課
  • WordPress 高手架站課
    從網頁設計觀念、WordPress / WooCommerce 後台操作、熱門主題.外掛教學、品牌網站 / 部落格 / 電商網站,3 大類型網站建置方法等豐富內容,一次教會你。
    課程內容非常的紮實(長度超過 20 小時)。如果你剛學習自架網站,這門課程可以讓你用最快的速度,就學會這項技能!
  • SEO 排名飆升課
    教你掌握關鍵字策略、SEO 文章撰寫、多種實戰 SEO 技巧、透視對手 SEO 策略、SEO 必備軟體教學、最新 AI SEO 應用等,大幅提升行銷能力。
    帶你衝上 Google 排名第一頁,大量提升網站營收和訂單!

關於作者

犬哥網站:網頁設計 x 網路行銷教學平台

犬哥網站

我們分享 WordPress 架站 x 網路行銷知識,不需會任何程式技術,就能自己建立各種網站。 搭配豐富的網路行銷教學,幫助你被更多人看到。 趕快跟著我們的腳步,開始學習吧:)

在〈如何製作電子報訂閱表單?MailChimp for WordPress 外掛教學(MC4WP)〉中有 19 則留言

  1. Lyida yeh

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

  2. Alice

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

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

    1. Judy

      請問解決方法是甚麼呢?
      我現在也面臨到一樣的問題…

      1. 犬哥網站

        嗨,Judy,

        我已經在下面的留言回覆你囉,希望能幫助到你。

        也可以參考看看下面這篇官方討論串文章:

        400 錯誤問題討論

  3. Alice

    已找出問題了,謝謝站長!!

    1. 嗨,好的,恭喜你順利解決唷:)

  4. Mia

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

    1. 犬哥網站

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

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

    1. 犬哥網站

      嗨,Judy,

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

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

  6. ray

    嗨!你好 想知道訂閱後 會收到一封確認信,也就是你的這個步驟(送出後再到此信箱收一下確認信。

    打開認證信件,點擊一下確認即可。)。收到的信是英文的!我可以去哪邊設定成中文呢?

  7. Alice

    我按照上面流程,結果出現訂閱成功的文字,但是實際上卻沒有收到信件,在mailchimp也沒有看到訂閱記錄,換了不同Email試過,確實沒有成功,請問如何解決?

    1. 犬哥團隊

      嗨,Alice

      可以先將電子郵件手動添加到你的 MailChimp.com 帳戶,看看是否能夠新增訂閱戶

      接著檢查是否有啟用「 更新現有用戶 」選項後,再測試一次表單看看,

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

  8. Kelsey

    請問確認訂閱後,訂閱者會看到註冊登入的住址,這部分可以隱藏嗎? 謝謝

    1. 犬哥網站

      嗨,

      抱歉,單獨閱讀文字不太理解你的疑問,建議你可到 犬哥 FB 社團 貼上截圖,讓我們和廣大網友更好幫助你判斷問題點唷!

  9. 王昱傑

    您好,上述有提到一點有關mailchimp 自動推播部落格更新文章,想請問要如何設定自動推播?謝謝您
    因為mailchimp似乎沒有share blog update等選項了

發佈留言

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

返回頂端