在瀏覽網頁時,你應該常常會在閱讀一段時間後或是即將跳出頁面之際,突然看見一個彈跳視窗蹦出來希望你留下資料,這類型的表單型態又稱為 pop-up。
這篇中,我將會介紹如何使用 MailerLite 製作一個 pop-up 彈跳視窗。
Kevin 推薦 MailerLite 原因:
- 介面人性化、適合新手學習
- 唯一提供免費自動化電郵行銷的行銷供應商
- 有 7/24 線上客服人員可以諮詢
- 使用我的連結註冊即可享 30 天免費 Pro 版試用

Pop-up 彈跳視窗代表進入網站或者離開網站時,彈出一個表單讓網頁瀏覽者留下 Email 資料,藉以收集更多名單、培養未來的潛在客戶。
為了要吸引更多人留下名單,pop-up 的設計要能吸引人,常見的型態有小測驗、提供免費資源、下載電子書、折價優惠、線上研討會報名等等。
MailerLite 製作 pop-up 彈跳視窗教學
Step 1:創建訂閱名單
在創建 pop-up 彈跳視窗之前,首先你必須要先創立一個訂閱名單,提供給 pop-up 蒐集名單用。這樣當別人在你的 pop-up 留下資料,就會直接紀錄到這個名單中。
登入 MailerLite 後台,看到最上排的功能列,點選 Subscriber 並選擇 Groups。
這時你會看見右上方出現 Create group 的橘色按鈕,點選並自訂你想要記錄到的名單名稱。
Step 2:建立一個新的 pop-up
接著看回最上排的功能列,點選 Forms 進入表單製作。
這時你會看到右上方 Create pop-up 的橘色按鈕,點擊並自訂你想要的彈跳視窗名稱(給自己看的)。
命名完成後需要選擇前面建立好的名單,用來蒐集未來填寫 pop-up 彈出視窗表單的網頁瀏覽者名單。
Step 3:選擇模板使用
Pop-up 名稱和紀錄名單都設定完成後,就能開始設計自己的彈跳視窗表單啦!這裡 MailerLite 提供了 4 種類型的彈跳視窗模板,目前每種類型都提供 4 個模板:
♦ Feature pop-up (一般在正中間的)
♦ Full-screen(全螢幕)
♦ Slidebox pop-up(滾動式)
♦ Half-screen pop-up(半螢幕)
Feature pop-up
Full-screen
Slidebox pop-up
Half-screen
Step 4:開始製作你的 pop-up
選定模板後,你就可以進去客製化自己的 pop-up。MailerLite 的表單製作使用的是拖拉式(如下圖),因此要多一張圖就拉 Image,要新增文字就拉 Text,非常容易操作。
下方是我使用 MailerLite 製作出來的 pop-up 表單,供參考。
表單製作完別忘了還有填寫成功訊息要製作,點選上方的 Success 頁面繼續製作。
Step 5:設定 pop-up 出現時機和出現頁面
Pop-up 彈出視窗表單製作完成後,就要來設定出現頁面和時機。彈跳時機設定(Mode)依序為:
1. 在頁面待多久彈跳出來
2. 頁面瀏覽到幾%跳出來
3. 要跳出頁面時跳出來
Frequency 的地方可以設定如果一位使用者看見彈跳視窗沒有填入資料,他下一次要隔多久,回來網頁造訪才能再次看到 pop-up 彈跳視窗。
Visibility 的地方可以設定哪個頁面要放彈出視窗,以及是否要在不同裝置(桌機、手機、平板)上彈出。
Step 6:啟用 pop-up 彈跳視窗表單
出現頁面及時機設定完成後,會跳到確認頁。這裡有一個雙重驗證(Double opt in)的選項,代表是否要在別人填入資料後再寄一封信給他驗證(建議開啟)。
如果你不需要驗證資料,可以直接將狀態(Status)開啟,然後跳到下一步;如果需要雙重驗證,就要去設計雙重驗證的 Email。
看到上方列有 Double Opt-in Email 以及 Double Opt-in Thank You page,雙重驗證的 Email 要從這裡去編輯。
Step 7:將 pop-up 放到網站中
回到 Overview,確認自己的狀態是啟用的(Active)。拉到最下方你會見 Javascript code,將那一長串複製起來,後面需要將它放到網站中。
來到 WordPress 後台,選擇外觀➞佈景主題編輯器。
點選 header.php,將前面複製的 Javascript code 貼到 </head> 前面,這樣 pop-up 彈出視窗就完成囉!
結論
在製作 pop-up 時所提供的內容必須跟網站一致,才能獲得最精準的客群。別人是帶著困擾到你的網站,因此在製作彈跳視窗時要去思考如何提供一些附加價值,方能吸引客戶留下資料。
以上是使用 MailerLite 製作 pop-up 彈跳視窗的教學,如果有任何問題也歡迎在下方留言跟我討論喔!
還沒有 MailerLite 帳號的人,可以用下面的連結註冊。這邊 Kevin 有跟 MailerLite 官方爭取到付費版 30 天的免費試用,希望大家能透過 MailerLite 輕鬆學習電郵行銷知識。
如果這篇文章對你有幫助,可以幫我按 Like 當作回饋,支持我繼續寫出更多好文章!
Kevin 推薦 MailerLite 原因:
- 介面人性化、適合新手學習
- 唯一提供免費自動化電郵行銷的行銷供應商
- 有 7/24 線上客服人員可以諮詢
- 使用我的連結註冊即可享 30 天免費 Pro 版試用
更多 Email 行銷相關文章
電郵行銷工具教學
最適合新手:【如何使用 MailerLite 製作電子報】
部落客專用:【ConvertKit 自動化電子報教學】
網路行銷私藏工具
選擇好的網路行銷工具,能夠讓你事半功倍。這裡有 Kevin 私藏的網路行銷工具,想要學習網路行銷一定不能錯過。
更多網路行銷工具請看:Kevin 私藏網路行銷工具
電郵行銷學習必看書籍:網路行銷究極攻略
歡迎按讚我的粉絲專頁,會有最新文章、Email 行銷知識、網路行銷工具優惠、網路學習資源的訊息。
如果我的文章對你有幫助,歡迎贊助我一杯咖啡!
你可能會想看
Email 行銷 – MailerLite 教學
Email 行銷 – ConvertKit 教學
Email 行銷 – Getresponse 教學
Email 行銷知識