2019年11月20日

擴充 Blogger 官方聯絡表單,讓任何自製版面的表格或內容都能傳送訊息

擴充 Blogger 官方聯絡表單,讓任何自製版面的表格或內容都能傳送訊息

Wayne Fu 0 A+
blogger-contact-form-customization.jpg-擴充 Blogger 官方聯絡表單,讓任何自製版面的表格或內容都能傳送訊息Blogger 官方「聯絡表單」是很棒的工具,提供了訪客傳送私密訊息的簡易管道。可惜的是制式版面只有三個欄位可以填寫(稱呼、郵件、訊息),當然這已能滿足多數用途,但要客製就相當不容易。

過去寫了這篇「使用 Google 表單(自訂樣式) 取代 Blogger 聯絡表單」,結合 Google 試算表與後端 Google Apps Script(簡稱 GAS),利用後端寄出郵件給自己,流程相對複雜,比較適合前端工程師實作。

前陣子有留言表示這個方案失效,但如果是熟悉 GAS 的工程師,我相信還是有辦法可以實現這個流程,瞭解原理就寫得出來。不過本篇要展示的方案,倒是與 Google 試算表或 GAS 都無關。

(圖片出處: pexels.com)


一、純前端擴充官方聯絡表單


要動到後端總是繁雜一些,如果能直接用官方聯絡表單來處理複雜表單、表格,就再好不過了。

前陣子處理一個購物車網站時,遇到這兩種需求:

  • 聯絡表單需要加入「電話」欄位
  • 購物車訂單內容需要傳送郵件通知站長

於是開始研究如何擴充官方聯絡表單,而想通原理後也不算困難,只要把自製表單的內容塞到官方聯絡表單,再進行傳送就完成了。



二、新增電話欄位


blogger-contact-form-customization-1.png-擴充 Blogger 官方聯絡表單,讓任何自製版面的表格或內容都能傳送訊息

上圖範例直接修改 Blogger 官方聯絡表單的 HTML/CSS,除了新增一行「電話」欄位,也美化了整個表單。

來看看傳送表單之後,接收到的郵件:

blogger-contact-form-customization-2.jpg-擴充 Blogger 官方聯絡表單,讓任何自製版面的表格或內容都能傳送訊息

郵件最下方可看到,這是一封來自「聯絡表單」工具的訊息,除了訪客填寫的內容,還多了電話資訊。



三、傳送購物車內容


前面是個比較簡單的修改,接下來是極為複雜的範例。

blogger-contact-form-customization-3.jpg-擴充 Blogger 官方聯絡表單,讓任何自製版面的表格或內容都能傳送訊息

上圖是購物車結帳後的頁面,除了顧客下單後需要填寫的聯絡資訊,例如電話、地址之外,也需要將顧客的訂單細節記錄在郵件之內,例如:

  • 品項名稱
  • 數量、單價
  • 總金額

來看看按下「送出訂單」會收到什麼內容。


blogger-contact-form-customization-4.jpg-擴充 Blogger 官方聯絡表單,讓任何自製版面的表格或內容都能傳送訊息

一樣可看到這是一封來自「聯絡表單」工具的訊息,包含了所有顧客聯絡資訊,以及訂單詳細內容。



四、總結


由於本篇是極為客製的需求,因此無法提供通用的程式碼範例,但從範例可以看出,只需要有前端的 HTML/CSS/JS 技術,就可以改造 Blogger 官方聯絡表單工具,做出功能強大、比美「Google 表單」的功能,而且不需動到後端技術。

比內嵌「Google 表單」更好的地方是,客製聯絡表單不會破壞網站風格的整體性,可以讓網站看起來更有質感、更為專業。

那麼如有需要客製官方聯絡表單需求的站長,請再發案給本站即可。


更多 Blogger 官方工具使用技巧:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

沒有留言:

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」;或參考「Blogger 行動版範本修改技巧 」,或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP