Image may be NSFW.
Clik here to view.
Blogger 官方「聯絡表單」是很棒的工具，提供了訪客傳送私密訊息的簡易管道。可惜的是制式版面只有三個欄位可以填寫(稱呼、郵件、訊息)，當然這已能滿足多數用途，但要客製就相當不容易。
過去寫了這篇「使用 Google 表單(自訂樣式) 取代 Blogger 聯絡表單」，結合 Google 試算表與後端 Google Apps Script(簡稱 GAS)，利用後端寄出郵件給自己，流程相對複雜，比較適合前端工程師實作。
前陣子有留言表示這個方案失效，但如果是熟悉 GAS 的工程師，我相信還是有辦法可以實現這個流程，瞭解原理就寫得出來。不過本篇要展示的方案，倒是與 Google 試算表或 GAS 都無關。
(圖片出處: pexels.com)
要動到後端總是繁雜一些，如果能直接用官方聯絡表單來處理複雜表單、表格，就再好不過了。
前陣子處理一個購物車網站時，遇到這兩種需求：
於是開始研究如何擴充官方聯絡表單，而想通原理後也不算困難，只要把自製表單的內容塞到官方聯絡表單，再進行傳送就完成了。
Image may be NSFW.
Clik here to view.
上圖範例直接修改 Blogger 官方聯絡表單的 HTML/CSS，除了新增一行「電話」欄位，也美化了整個表單。
來看看傳送表單之後，接收到的郵件：
Image may be NSFW.
Clik here to view.
郵件最下方可看到，這是一封來自「聯絡表單」工具的訊息，除了訪客填寫的內容，還多了電話資訊。
前面是個比較簡單的修改，接下來是極為複雜的範例。
Image may be NSFW.
Clik here to view.
上圖是購物車結帳後的頁面，除了顧客下單後需要填寫的聯絡資訊，例如電話、地址之外，也需要將顧客的訂單細節記錄在郵件之內，例如：
來看看按下「送出訂單」會收到什麼內容。
Image may be NSFW.
Clik here to view.
一樣可看到這是一封來自「聯絡表單」工具的訊息，包含了所有顧客聯絡資訊，以及訂單詳細內容。
由於本篇是極為客製的需求，因此無法提供通用的程式碼範例，但從範例可以看出，只需要有前端的 HTML/CSS/JS 技術，就可以改造 Blogger 官方聯絡表單工具，做出功能強大、比美「Google 表單」的功能，而且不需動到後端技術。
比內嵌「Google 表單」更好的地方是，客製聯絡表單不會破壞網站風格的整體性，可以讓網站看起來更有質感、更為專業。
那麼如有需要客製官方聯絡表單需求的站長，請再發案給本站即可。
Clik here to view.![]()
Clik here to view.
Blogger 官方「聯絡表單」是很棒的工具，提供了訪客傳送私密訊息的簡易管道。可惜的是制式版面只有三個欄位可以填寫(稱呼、郵件、訊息)，當然這已能滿足多數用途，但要客製就相當不容易。過去寫了這篇「使用 Google 表單(自訂樣式) 取代 Blogger 聯絡表單」，結合 Google 試算表與後端 Google Apps Script(簡稱 GAS)，利用後端寄出郵件給自己，流程相對複雜，比較適合前端工程師實作。
前陣子有留言表示這個方案失效，但如果是熟悉 GAS 的工程師，我相信還是有辦法可以實現這個流程，瞭解原理就寫得出來。不過本篇要展示的方案，倒是與 Google 試算表或 GAS 都無關。
(圖片出處: pexels.com)
一、純前端擴充官方聯絡表單
要動到後端總是繁雜一些，如果能直接用官方聯絡表單來處理複雜表單、表格，就再好不過了。
前陣子處理一個購物車網站時，遇到這兩種需求：
- 聯絡表單需要加入「電話」欄位
- 購物車訂單內容需要傳送郵件通知站長
於是開始研究如何擴充官方聯絡表單，而想通原理後也不算困難，只要把自製表單的內容塞到官方聯絡表單，再進行傳送就完成了。
二、新增電話欄位
Image may be NSFW.
Clik here to view.
上圖範例直接修改 Blogger 官方聯絡表單的 HTML/CSS，除了新增一行「電話」欄位，也美化了整個表單。
來看看傳送表單之後，接收到的郵件：
Image may be NSFW.
Clik here to view.
郵件最下方可看到，這是一封來自「聯絡表單」工具的訊息，除了訪客填寫的內容，還多了電話資訊。
三、傳送購物車內容
前面是個比較簡單的修改，接下來是極為複雜的範例。
Image may be NSFW.
Clik here to view.
上圖是購物車結帳後的頁面，除了顧客下單後需要填寫的聯絡資訊，例如電話、地址之外，也需要將顧客的訂單細節記錄在郵件之內，例如：
- 品項名稱
- 數量、單價
- 總金額
來看看按下「送出訂單」會收到什麼內容。
Image may be NSFW.
Clik here to view.
一樣可看到這是一封來自「聯絡表單」工具的訊息，包含了所有顧客聯絡資訊，以及訂單詳細內容。
四、總結
由於本篇是極為客製的需求，因此無法提供通用的程式碼範例，但從範例可以看出，只需要有前端的 HTML/CSS/JS 技術，就可以改造 Blogger 官方聯絡表單工具，做出功能強大、比美「Google 表單」的功能，而且不需動到後端技術。
比內嵌「Google 表單」更好的地方是，客製聯絡表單不會破壞網站風格的整體性，可以讓網站看起來更有質感、更為專業。
那麼如有需要客製官方聯絡表單需求的站長，請再發案給本站即可。
更多 Blogger 官方工具使用技巧：
Image may be NSFW.Clik here to view.