iT邦幫忙

2023 iThome 鐵人賽

DAY 14
0
WordPress

關於WordPress的二三事系列 第 14

[Day 14] 製作訂閱表單

  • 分享至 

  • xImage
  •  

前言:

因為我鎖定的主題是部落格,部落格相當重要的一部分是分享和互動的過程,所以我選擇多分享一些可以增加互動的設計功能來介紹。/images/emoticon/emoticon37.gif

今天來分享如何製作一個訂閱的電子表單,如果瀏覽者喜歡你的網站資訊的話,就可以透過這個電子表單輸入Email,來獲得你的網站的最新資訊囉!


我們是透過 Brevo 來製作電子訂閱表單,Brevo 以前稱為 Sendinblue,是一個電子郵件營銷、短信和營銷自動化平台。,Brevo的免費版就已經提供了很多的雲端整合功能,製作表單設計也很簡單,不需要寫程式碼,可以輕鬆的用拖拉的方式設計表單。
Brevo網頁連結

  • 點開Brevo連結後,點選 Sign Up Free 後註冊帳號和設定密碼。
    https://ithelp.ithome.com.tw/upload/images/20230924/201628522aWja3BkmI.png
    https://ithelp.ithome.com.tw/upload/images/20230924/20162852VlAtXc8zU9.png

  • 之後Brevo會先傳認證連結到信箱,到信箱驗證完後會到這一步驟繼續填寫基本資料。
    https://ithelp.ithome.com.tw/upload/images/20230924/20162852eNv3ggRzyY.png
    https://ithelp.ithome.com.tw/upload/images/20230924/20162852PGFPgx50VM.png

  • Brevo也有提供付費的版本,當然我們先選擇免費版的即可!
    https://ithelp.ithome.com.tw/upload/images/20230924/20162852G0pEIFrMoj.png

  • 登入後,我們先到 「Contacts 的 「Lists 裡建立一個新的List
    https://ithelp.ithome.com.tw/upload/images/20230924/20162852TebaMTPOP9.png
    https://ithelp.ithome.com.tw/upload/images/20230924/20162852SSP6w2BJJM.png

  • 取名為訂閱電子報名單,之後可以在這裡看到所有訂閱電子報的成員名單。
    https://ithelp.ithome.com.tw/upload/images/20230924/20162852LT4vIeJAnf.png

  • 再到 Contact 的 Form 裡建立一個新的表單
    https://ithelp.ithome.com.tw/upload/images/20230924/20162852SA9o6rTdxx.png

  • 點選Create a subscription form 建立表單並取名為訂閱電子報表單。
    https://ithelp.ithome.com.tw/upload/images/20230924/20162852BPsq1eXL1F.png
    https://ithelp.ithome.com.tw/upload/images/20230924/20162852QLjOCRHQ79.png

  • 進入後頁面就會長這樣啦!
    https://ithelp.ithome.com.tw/upload/images/20230924/201628529yoSncR1nv.png

  • 一樣可以透過拖拉的方法來設計表單。
    https://ithelp.ithome.com.tw/upload/images/20230924/20162852Zhb5pdWLee.png

  • 直接點擊文字框就可以修改文字,初步設計完的表單就差不多長這樣啦!
    https://ithelp.ithome.com.tw/upload/images/20230924/20162852T1OMhDsprK.png

  • 這一步驟是選擇要將訂閱人員匯入到哪一個名單裡,我們選擇剛剛建立的訂閱電子報名單。
    https://ithelp.ithome.com.tw/upload/images/20230924/201628522JSjtNGeQq.png

  • 在這裡可以讓你選擇如果有人訂閱時是否需要通知你。我選擇不用通知。
    https://ithelp.ithome.com.tw/upload/images/20230924/20162852oTgIO5pPCn.png

  • 這個地方可以填寫訂閱成功時或輸入錯誤訊息時會跳出的提醒,我就把原本的英文版全部改為中文的提醒標語。
    https://ithelp.ithome.com.tw/upload/images/20230924/20162852BwDKRS7ZNM.png

  • 最下面會有提供你這個表單的網址連結,別人可以透過這個連結直接跳到你的訂閱電子報的表單啦!
    https://ithelp.ithome.com.tw/upload/images/20230924/20162852Sdl4sT869t.png

  • 我們可以利用這個連結來確認一下最後的表單的畫面樣式如何。這樣我們利用Brevo設計的表單就完成啦!
    https://ithelp.ithome.com.tw/upload/images/20230924/20162852zz9ZRycwbs.png

  • 明天就來分享如何把訂閱電子報的表單匯入到 WordPress 裡,然後再呈現到我們的網站上囉!


謝謝大家看到這邊/images/emoticon/emoticon07.gif
明天繼續囉!
倒數16天


上一篇
[Day 13] 優化 WordPress SEO
下一篇
[Day 15] 將訂閱表單匯入WordPress
系列文
關於WordPress的二三事30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言