WordPress Form Notify 表單推播外掛

歷經了一年的調整,WooCommerce 推播外掛在上個月月底總算正式推出 1.0 版,在這一年中很感謝各位大大提供了許多寶貴的建議,讓我知道該把哪些功能整合進去,也逐漸摸索出整個程式碼架構該如何規劃才能因應未來的擴充需求,這些都是在一般專案中無法得到的寶貴經驗。

1.0 版我把程式碼進行重構,主要的重點有三個:

  1. 抽象化推播方式
  2. 增加訊息參數對於第三方外掛的支援
  3. 增加觸發推播事件勾點

這一年來最常遇見的需求是支援新的推播通知管道,像是增加不同的簡訊商、LINE Notify,之前為了求快都直接將相同的程式碼複製貼上,然後修改成對應的 API,結果後來要改裡面的東西時,有幾個推播管道我就要改幾次,想當然就會發生漏改的情況。

我的作法是把推播管道相同的程式碼拉出來做成抽象類別,然後每個管道去繼承這個抽象類別來修改成他們自己的推播方式,未來要新增時就會方便許多,不用再複製貼上一大堆相似的程式碼,維護上也只要修改抽象類別就能同時對所有推播管道產生作用。

其次是訊息內文參數,隨著使用場景的增加,有客戶希望可以支援特定外掛的參數,像是金流或是物流相關的資訊,以便讓顧客收到通知時能看到物流單號或是 ATM 轉帳帳號,這部分的擴充機制也於 1.0 版完成,可以讓第三方外掛進行整合。

增加觸發推播事件是比較困難的部分,因為會關係到第三方外掛的勾點設計以及資料取得方式,目前已整合的事件有五種,除了與 WooCommerce 訂單、商品到貨通知事件外,其他是三款不同表單外掛的通知,分別是 Elementor Form、Gravity Form 以及 Fluent Form。

在客戶的實務應用中,觀察到表單送出後的通知也是有滿多的需求,常見的像是課程報名表單填寫完成後,可以讓學員透過 LINE 或是簡訊收到上課通知,或是預約某項服務時能確認服務時間,多種通知管道是這些表單外掛比較不會著重的功能。

於是某天跟一位朋友聊到,他問我說會不會出一個精簡的版本只支援表單外掛推播,這句話炸開了我的腦洞,我一直想推出免費的版本但不知道該如何切割功能,如果是拔掉 WooCommerce 只支援表單外掛並且維持其他功能,似乎就能服務到沒使用 WooCommerce 的網站,抱持著這個想法讓我決定要開始進行開發。

拜重構所賜,把原本的外掛拔掉 WooCommerce 相關功能非常容易,不到一個禮拜的時間就搞定了,我把該外掛的功能簡單介紹一下:

Form Notify 表單推播外掛

該外掛可以協助有使用表單外掛的站長,讓填表者送出資料後,能夠在 LINE 官方帳號、手機簡訊以及電子郵件中收到相關的填寫結果資訊,而管理員也能在 LINE Notify 中接收到通知,以便做後續的追蹤與管理。

目前支援的表單外掛如下:

  • Elementor Form
  • Fluent Form
  • Gravity Form

目前支援的推播管道如下:

  • LINE 推播
  • LINE Notify
  • 電子郵件
  • Every8d 簡訊
  • 三竹簡訊
  • easyGo 簡訊

為了提供 LINE 推播功能,該外掛也支援 LINE 登入以取得會員的 LINE User ID 來進行推播,以下就實際的使用場景來進行相關設定說明。情境是我們需要讓訪客在填寫表單前先登入會員,並且在送出資料後於 LINE 官方帳號內提醒他於表單內選擇的上課時間,步驟如下:

一、安裝表單推播外掛

先前往此處下載外掛主程式:https://oberonlai.blog/form-notify.zip

從後台進行上傳並點選啟用,啟用後會在後台側邊欄看到「表單推播通知」的選單:

二、設定 LINE Login 與 LINE Channel

點選表單推播通知 > 設定,點選第二個 LINE Channel 頁籤:

在這邊要在 LINE 的開發者後台取得 LINE Login 與 LINE Messaging API 的 Channel 資訊,相關設定教學可參考以下文章:

三、設計登入頁與表單欄位

新增一個頁面來加入 LINE 登入按鈕,或是你也可以在文章中的任何一處使用區塊編輯器來加入。如果是在區塊編輯器中,輸入斜線打 LINE Login,就可以找到 LINE Login Button 的小工具,或是透過左上角的加號新增,找到小工具的類別:

加入後可以透過右側的區塊設定來進行按鈕樣式的調整:

如果你用的不是區塊編輯器,也可以用短代碼的方式加入登入按鈕,使用方式如下:

短代碼名稱為 linelogin,設定參數說明如下:

text – 按鈕的文字名稱

size – 按鈕的尺寸,可選參數有 f、 l、m、s 四種尺寸,f 為滿版按鈕

lgmode – 跳轉的模式,設定 true 時會重新導向回原頁面,設定網址時會重新導向至該網頁

align – 對齊方式,可選參數有 left、center、right

如果是在會員已登入的狀態下,前台頁面會不顯示該按鈕。

表單的部分這邊用 Elementor Form 做示範,我們先設計三個欄位:姓名、Email 以及場次的單選方塊:

四、編輯推播通知內文

進入後台表單推播通知 > 新增,輸入頁面標題,事件的地方選擇「 Elementor Form 表單送出後」,表單區塊選擇剛剛新增的表單,然後點選下方通知方式的新增按鈕:

下一步通知加入訊息內文,先選擇類型為 LINE 推播,內文的部分從右側欄「可帶入參數」複製需要的資料,然後在自訂接收推播欄位貼入 Email,程式會自動判斷如果該 Email 是經由 LINE 登入且帶有 LINE User ID 時,就會將訊息推播到他有加入的 LINE 官方帳號內:

五、測試接收通知

在前台使用 LINE 登入後填寫表單,確保 LINE 有收到相關報名資訊:

設定功能

WordPress 表單推播外掛提供以下功能:

  • LINE Login、LINE Notify 與 LINE Messaging API 的憑證設定
  • 簡訊服務的憑證設定
  • LINE 登入功能設定,包含是否在 WordPress 的登入表單中顯示 LINE 登入按鈕,以及設定登入後的重新導向網址、客戶角色與未取得電子郵件授權時的處理。
  • 查看歷史推播紀錄,可依照週、月篩選

以上是 WordPress 推播外掛的功能與操作教學,如果你有常用的表單外掛卻沒在列表中,或是你希望你的會員是可以從 Slack、Telegram 收到通知都可以跟我說,我非常樂意整合這些功能,希望這支外掛可以更實用,幫助到更多人!

目錄

8 則留言

  1. 版主您好,想請問這個外掛有機會支援Amelia這個預約外掛嗎?
    希望可以透過Amelia完成免費預約後也可以同步透過您開發的免費版通知外掛進行簡訊、及Line的推播通知🥹
    詳細場景如下:

    1.因為Amelia這個外掛可以在完成預約後,透過woocommerce進行付費預約
    所以不確定付費活動是不是可以透過您開發的付費版外掛
    讓woocommerce觸發Line的訂單通知上同步顯示預約的活動”時間與地點”
    如果可以的話,我們很樂意購買付費版外掛來進行串接☺️

    2.其次就是免付費預約的活動,是否可以透過您免費版的外掛就可以來同步觸發簡訊、及Line的推播通知🥹

  2. Hi Terry

    1. 目前該外掛尚未整合 Amelia, 有需要的話再煩請告知具體需求, 我們這邊很樂意整合!

    2.免付費預約的活動 => 指的也是透過 Amelia 進行活動預約嗎?

    1. 2.是的如上所述正是指Amelia的免費活動預約,希望有機會可以整合Amelia的預約後,讓用戶用Line快速登入同步加入官方Line接收預約通知提醒。

      以及如果使用目前支援的表單外掛來整合的話,是否可以讓用戶在使用Line登入時同步在確認畫面加入官方Line呢?

      希望可以同步觸發官方Line裡的漸進式訊息腳本,因為先前有其他站長分享此外掛登入並不等於加入官方Line,所以想確認一下是否可以透過向下列網頁中的設定方式整合讓用戶在登入時同意加入官方Line呢?

      https://nextendweb.com/nextend-social-login-docs/provider-line/#add-friend

      1. Hi Terry

        謝謝你的回饋,回覆如下:

        1.Amelia 整合收到,但這部分我們應該會先整合至 OrderNotify,待穩定後再放進 FormNotify 之中

        2.LINE 登入後出現確認加入官方 LINE 畫面 => 這在 OrderNotify 已有整合,FormNotify 的我再處理

        3.觸發漸進式腳本已安排至開發計畫之中,有進一步消息會再跟你通知!

發佈留言

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

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料

賴俊吾 / Oberon Lai
賴俊吾 / Oberon Lai

現為全職 WordPress 工程師,網站開發經歷 11 年,專攻前端工程與 WordPress 佈景主題、外掛客製化開發

訂閱電子報

Hi,我是 Oberon,我會固定在每週五早上發送接案心得以及與 WordPress 相關的電子報,同時也會分享一些實用的開發知識,讓你在 WordPress 的接案路上不孤單!

專注於分享 WordPress 開發、接案技巧、專案管理等自由工作者必備知識與心得

© 2024 想點創意科技有限公司

想點創意科技有限公司 | 統一編號 90516823
Designed by Hend Design | 隱私權政策

訂閱電子報

Hi,我是 Oberon,我會固定在每週五早上發送接案心得以及與 WordPress 相關的電子報,同時也會分享一些實用的開發知識,讓你在 WordPress 的接案路上不孤單!