iT邦幫忙

2023 iThome 鐵人賽

DAY 15
0
WordPress

關於WordPress的二三事系列 第 15

[Day 15] 將訂閱表單匯入WordPress

  • 分享至 

  • xImage
  •  

延續昨天製作完的訂閱電子報表單,我們今天要學習如何將它匯入進WordPress裡,讓他呈現在我們的頁面中。
廢話不多說,我們馬上開始吧!/images/emoticon/emoticon08.gif


1.要將表單匯入的話我們需要先新增一個頁面放置表單。
https://ithelp.ithome.com.tw/upload/images/20230924/20162852LlFkpcRLZK.png

2.在頁面裡插入新增html的格式,等等會把在Brevo的程式碼複製到這裡。
https://ithelp.ithome.com.tw/upload/images/20230924/20162852SHiwUXfzAW.png

3.回到Brevo裡,找到下面html的程式碼並把他複製到WordPress裡。
https://ithelp.ithome.com.tw/upload/images/20230924/20162852Dw7anp79ZD.png

4.複製過來後,我們可以點選預覽一下,整個表單就搬過來啦!但是表單的底色和網站的背景不一樣,這樣看起來是有些 許突兀,所以我們再來改動一下把表單的底色改成跟背景同色。
https://ithelp.ithome.com.tw/upload/images/20230924/20162852SnLyVltu4T.png

5.在自訂項目〉全域〉色彩中找到背景顏色。
https://ithelp.ithome.com.tw/upload/images/20230925/20162852Yy8UYLPRRg.png

6.找到背景顏色後,把背景顏色的色彩代碼複製下來。
https://ithelp.ithome.com.tw/upload/images/20230925/20162852urBTebEUks.png

7.回到Brevo〉Form Design〉BackGround哩,把網站背景色的代碼貼到這裡。因為顏色改動後,html的程式碼也會不 一樣,所以我們需要再把新的html複製一次到WordPress裡。
https://ithelp.ithome.com.tw/upload/images/20230925/20162852z9tH6yoJf4.png
https://ithelp.ithome.com.tw/upload/images/20230925/20162852HdSCXUgps5.png

8.完成後我們就可以發佈並檢視一下頁面囉!
https://ithelp.ithome.com.tw/upload/images/20230925/20162852Gip3I7gwOw.png

9.我們也可以測試一下表單是否可以正常運作,輸入一個Email來測試看看,點選訂閱後有成功彈出「已訂閱成功」的通 知。
https://ithelp.ithome.com.tw/upload/images/20230925/20162852WdCJEwfxbH.png

10.我們可以去Brevo裡的訂閱者名單裡查收看看,這裡有成功多了一個訂閱者就算完成啦!以後有最新資訊,填寫訂閱表 單的訂閱者就可以第一時間接收到你網站的資訊啦!
https://ithelp.ithome.com.tw/upload/images/20230925/20162852AxFF3SqFg0.png


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


上一篇
[Day 14] 製作訂閱表單
下一篇
[Day 16] 安裝網站分析工具 - Site Key By Google
系列文
關於WordPress的二三事30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言