11. 設計Google雲互動表單

一、輕鬆的建立互動表單

登入gmail
啟動雲端硬碟(google drive)
移至表單存放目錄
「新增/google表單」
問卷「標題」「說明」：台南社大網頁設計期中聚餐調查、星期六用晚上時間、星期日用早午餐時間
問題：
姓名(簡答)
電話(簡答)
email(簡答)：回應驗證=> 文字：電子郵件地址
是否願意參加(單選)：是、否
日期(核取方塊)：說明=>可以複選，星期六用晚上時間、星期日用早午餐時間 , 2017-05-20(六)、2017-05-21(日)、2017-05-27(六)、2017-05-28(日)、其他
推廌餐廰(段落)：說明=>請填店名，請簡述推廌理由
建立試算表：回覆
改變外觀：調色盤
預覽表單
設定：收集電子郵件地址、需要登入、在提交後進行編輯
傳送表單

二、將表單嵌入至網頁

使用bootstrap容器，放置嵌入碼

將寬度改成響應式，並調整適合高度

<!DOCTYPE html>
<html lang="zh-Hant-TW">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- 自訂樣式表 -->
    <link rel="stylesheet" type="text/css" href="css/style.css">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery.min.js"></script>
    <style type="text/css">
      
    </style>
  </head>
  <body>
    <div class="container">
      <h1>台南社大網頁設計期中聚餐調查</h1>
      <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSdy8tcdkLy2pQhrNYfEUOintb7f042rZm1Re3FYqzuypuYX0g/viewform?embedded=true" style="width:100%;height:1700px;" frameborder="0" marginheight="0" marginwidth="0">載入中…</iframe>
      
    </div>



    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

三、將Google雲的資料權限設定

開啟「網頁設計班期中聚餐調查表 (回應)」：這是表單接收資料的地方
請按「共用」=> 選擇「進階」
變更「擁有存取權的使用者」=> 公開在網路上
「檔案/發佈到網路」=> 選擇「內嵌」、「工作表」
取得嵌入碼
使用bootstrap容器，放置嵌入碼
將寬度改成響應式，並調整適合高度

10. Bootstrap樣式

12. Bootstrap組件 next

友善列印 & 下載 PDF 匯出 MarkDown 格式

Title1

Title2

Title3

11. 設計Google雲互動表單