將 Google 表單 嵌入至 HTML 網頁
很多剛接觸網頁設計的新手，在學完如何在網頁建置表單後，不知道要怎麼將表單的內容送出？以及可以用什麼東西接收資料？
妳可以學習 PHP 網頁程式語言，接收到表單資料後，將資料寫入資料庫，或是透過 JavaScript，將資料寫入 Google 表單、直接寄信…… 等等，不論是哪個方法，都必須再額外學習一個新的語言，對於新手而言，HTML 都還沒學完，就要再學一個新的，這樣太累了～～～
那我們能不能直接將 Google 表單 嵌入到我們的網頁內使用呢！？
答案是可以！！！
今天就來介紹一下，如何將 Google 表單 嵌入到我們的網頁。
1. 開啟 Google 表單，並新增一個表單。
點擊右方的加號按鈕，新增一些問題。
網頁右上方的第一個按鈕「自訂主題」，可以上傳抬頭圖片、修改主題配色。
P.S. 上傳圖片後，底下配色會自動調整。
接著我們要讓使用者，在回覆完訊息後，可以將資料也顯示在 Google 試算表。
點擊網頁中間的回覆選項，再點「建立試算表」。
這樣當使用者送出資料後，試算表也會接收到資料並顯示。
再來回到表單，先點右上角的傳送按鈕，再選擇 <> 複製網頁嵌入碼到記事本。
接著要將表單嵌入至網頁
2. 建立一個網頁檔(已有網頁可省略此步驟)
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<title>將 Google 表單 嵌入至 HTML 網頁</title>
</head>
<body>
<div align="center">
</div>
</body>
</html>存檔成 index.html
把剛剛複製的嵌入碼貼到 div 標籤的裡面
<body>
<div align="center">
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSeckP1jREZ5CXG5CLU1pPoPBwYMMrPjPx9Ioxq6Zi1mxST9Qw/viewform?embedded=true" width="640" height="677" frameborder="0" marginheight="0" marginwidth="0">載入中…</iframe>
</div>
</body>存檔後開啟瀏覽，它就會顯示在網頁中間了。
不只 Google 表單，Google 試算表也能嵌入喔~~~
如果想要送出資料後，可以在網頁馬上看到輸出結果，也能將試算表嵌入至網頁。
3. 到試算表的頁面，依序點選左上方的 檔案 – 共用 – 發布到網路。
P.S. 之前「發布到網路」好像是在底下
選擇 內嵌 – 表單回應 1 – 發布
把嵌入碼直接複製到網頁檔裡
瀏覽看看
在表單的下方就能看到試算表，但是這個寬度有點小，我們可以設定成跟表單一樣寬，高度也再拉高一點。
回到網頁，將第一個 iframe 標籤的參數設定，複製給第二個試算表的 iframe。
width="640" height="480" frameborder="0" marginheight="0" marginwidth="0"
修改完後再次瀏覽
變高變寬囉！
進階應用：可以改成適合手機瀏覽(就加一行代碼就好)，再放到 App Inventor 裡，就能夠在 App 使用了！
那麼這次的教學就到這邊
HTML 完整代碼
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<title>JB 程式筆記 - 雲端留言板</title>
<link rel="icon" href="https://i.imgur.com/gNyJgvz.png">
<style>
body {
background-color: #faf7f0;
}
</style>
</head>
<body>
<div align="center">
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSeckP1jREZ5CXG5CLU1pPoPBwYMMrPjPx9Ioxq6Zi1mxST9Qw/viewform?embedded=true" width="640" height="677" frameborder="0" marginheight="0" marginwidth="0">載入中…</iframe>
<br>
<iframe src="https://docs.google.com/spreadsheets/d/e/2PACX-1vTUgc7VI5P2AWt0CqtAHkDH9Tur9znay_gK7K_Goqwj2WnOSI7MAj79OuKqE89ZRjOSo9hJbaKqgi08/pubhtml?gid=150794314&single=true&widget=true&headers=false" width="640" height="480" frameborder="0" marginheight="0" marginwidth="0"></iframe>
</div>
</body>
</html>專案範例影片
如果覺得文章內容還不錯的話，麻煩請幫我點個讚！感謝
可以多點幾次喔~~
第一次點讚需使用 Google 或 Facebook 帳號註冊
