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

Blogger 官方「聯絡表單」是很棒的工具，提供了訪客傳送私密訊息的簡易管道。可惜的是制式版面只有三個欄位可以填寫(稱呼、郵件、訊息)，當然這已能滿足多數用途，但要客製就相當不容易。

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

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

(圖片出處: unsplash.com)

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

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

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

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

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

二、新增電話欄位

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

來看看傳送表單之後，接收到的郵件：



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

三、傳送購物車內容

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



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

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

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




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

四、總結

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

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

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

更多 Blogger 官方工具使用技巧：