你是否遇過這些問題？
❌ 表單信件寄不出去，訪客填單卻收不到通知
❌ 自架表單太複雜，SMTP 設定一堆坑
❌ 擔心被惡意攻擊，淪為垃圾信跳板
└ 5分鐘快速嵌入 Google 表單
└ 基本 RWD 設定
└ 收信通知設定
└ 用 HTML/CSS 打造自己的表單介面
└ 串接 Google Apps Script
└ 用Gmail自動回信給填單者
└ SMTP 進階設定
└ 防範惡意攻擊與垃圾信
└ 多語系郵件模板
如果你只是想要一個「能用、安全、免費」的表單，直接嵌入 Google 表單是最快的解法。本文將從最簡單的嵌入方式開始，逐步帶你走向「完全自訂外觀 + 客製化寄信」的進階做法。
一、初階大致流程
不知道如何建立表單嗎？點開下方步驟展開內容，可以看到圖文說明：
步驟二、作答者檢視權限：設為知道連結的任何人
也可以發布後更改權限
步驟三、點選右上三個點，選擇嵌入HTML
步驟四、把複製下來的嵌入HTML內容，貼到期望表單出現的頁面
<iframe src="https://docs.google.com/forms/d/e/你的表單ID/viewform?embedded=true" width="640" height="661" frameborder="0" marginheight="0" marginwidth="0">載入中…</iframe>通常長這樣，會帶有絕對值的寬（width=”OOO”）高（height=”OOO”）
步驟五、小幅度改動iframe高度，讓表單好看一點
步驟五是本篇文章的重點，通常複製下來的HTML高度都會出現『右側滾輪』，看起來有點醜，讓高度自適應的詳情整理在第二段。
二、為什麼要調整 iframe 高度?
如果不調整，可能出現這些問題：
❌ 表單被截斷，訪客一時看不到送出按鈕
❌ 出現雙重滾輪（網頁滾輪 + iframe 滾輪）超醜
⚠️不調整也是沒問題的，功能一樣沒少 ～ 只在乎功能的人可以略過第二段，就真的０程式碼。
由於跨域限制，網站無法改動 iframe 內部的內容高度，或讓 iframe 高度自適應內容，但至少可以更改iframe本身的樣式，因此需要手動測試並設定合適的高度值：
Step 1. 執行測試步驟
- 按 F12 或 Ctrl+Shift+I 打開開發人員工具
- 切換不同裝置檢視(桌面版/手機版)
- 對著iframe height屬性連點兩下，逐步調整 iframe 的 height 數值，直到右側滾輪消失（這不會真的改變高度，只是暫時模擬出來的效果）
展開圖片說明
Step 2. 取得高度數值
依你的表單題目數量不同，高度也會不同，以本表單為例：
- 桌面版與手機版的斷點在寬度450px
- 桌面版：高約 1000px
- 手機版：高約 1200px
Step 3. 將數值數值應用於樣式
請把裡面的絕對高度height=”OOO”移除，換成一個自定義樣式class=”rwdheight”，接著設定rwdheight在不同螢幕之高度，取代原本的絕對值。
範例如下，嵌入表單會完整呈現，但若訪客填一大串內容，還是會把高度撐出滾輪。
<style>
.rwdheight{height:1000px;}
@media (max-width:450px){
.rwdheight{height:1200px;}
}
</style>
<iframe src="https://docs.google.com/forms/d/e/你的表單ID/viewform?embedded=true" width="640" class="rwdheight" frameborder="0" marginheight="0" marginwidth="0">載入中…</iframe>這個高度值只是「當下」適用，如果之後在 Google 表單新增題目，需要重新測試並調整
建議預留一些緩衝空間，避免內容被截斷
無法做到真正的「自動完整顯示」，這是 iframe 跨域的技術限制
Step 4. 送出後變更高度
送出表單後會顯示確認畫面，但確認畫面高度很短，會導致下面出現一大片空白，解決這片空白的方式如下：
- 給 iframe 一個 Id，例如 id=”gform”
- 在 iframe 後方加上這段立即執行的 script，用於偵測 iframe 載入次數，如果載入第二次就把 iframe 高度改為330px
- 縮短高度的同時，也將視窗滾動到iframe置中的位置，訪客填單後即時能看到確認訊息
步驟１～４的完整程式碼範例如下：
<style>
.rwdheight{height:1100px;}
@media (max-width:450px){
.rwdheight{height:1400px;}
}
</style>
<iframe id="gform" src="https://docs.google.com/forms/d/e/你的表單ID/viewform?embedded=true" width="640" class="rwdheight" frameborder="0" marginheight="0" marginwidth="0">載入中…</iframe>
<script>
(function() {
const iframe = document.getElementById('gform');
const collapsed = 330; // 送出後的高度
let loadCount = 0;
iframe.addEventListener('load', () => {
loadCount += 1;
// 送出完成頁：縮短高度
if (loadCount % 2 === 0) {
iframe.style.height = collapsed + 'px';
// 滾回表單中間
iframe.scrollIntoView({
behavior: 'smooth',
block: 'center'
});
}
});
})();
</script>想要完全掌控表單高度? → 中階教學會教你用自訂表單解決這個問題（尚未完成）
三、Email如何收到填單通知？
方法一、Google 表單內建通知（最簡單）
－ Email to 填單訪客 －
Google 表單有內建的感謝信，位於表單的 設定 分頁，展開 回覆 內容，把收集電子郵件地址預設的 不收集 改為 由作答者手動輸入，傳送表單回覆副本給作答者選擇 一律。
此時，表單的問題會多一個 電子郵件欄位，你不需要自己做Email欄位。
這樣Google 表單在收到填單後，便會傳送感謝信及內容備份給填單者。
－ Email to 自己 －
想要收到填單通知，位於表單的 回覆 分頁，點右上角三個點 → 勾選「有新回應時透過電子郵件通知我」
✔️優點：不用寫程式，馬上啟用。
❌缺點：信件格式無法自訂，通知信的寄件人都是Google，不夠正式。
方法二、用 Google Apps Script 自動寄信（推薦）
如果你希望：
- 訪客填完表單自動收到「感謝信」
- 自訂信件內容（加上公司 Logo、品牌色）
- 用自己的 Email 當寄件人（而非 Google）
→ 請看 [中階教學：用 GAS 打造專業表單系統]（尚未完成）
四、到這裡，你已經完成基本的 Google 表單嵌入！
但如果你很在意：
- 表單外觀跟網站風格不搭
- iframe 高度變化不夠滑順，影響體驗
- 想要更專業的自動回信功能
- 想要指定寄件Email
那麼你需要的是…
準備好進入下一階段了嗎？
進階、有程式碼的表單功能差異，請看下方表格：
| 功能 | 初階教學（不寫程式碼） | 進階教學（GAS） |
|---|---|---|
| 收到訪客填單通知 | O | O |
| 訪客收到網站填單感謝信 | O | O |
| 客製版型Email | X | O |
| 指定寄件人Email | X | O |
完整版的表單有連接GAS，若訪客填入正確的Email，會收到本站網域寄送的通知信，表單擁有者也會收到訪客填單通知，並且Email都是客製化模板。
常見問題 FAQ
Q1. Google 表單嵌入後,為什麼還是很醜？
A：這是初階做法的限制，中階教學會教你完全自訂外觀
Q2. 可以改表單顏色嗎？
A：可以在 Google 表單後台改主題色，但選擇有限
Q3. 訪客填完表單可以自動收到確認信嗎？
A：可以，但無法自訂Email的版型，若要自訂版型及指定寄件人需要用 Google Apps Script，請看中階教學。
Q4. 這個做法能用在Wordpress網站上嗎？
A：是的，本文教學內容適用於所有一般網站，包括Wordpress。
