GoogleForm/index.html at master · WiianChen/GoogleForm · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
<!DOCTYPE html>
<html lang="zh-TW">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>可不可熟成 by承寯</title>
  <link rel="canonical" href="https://XXXXXXXX">

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">

  <!-- customized style -->
  <style>
    *, *::before, *::after {
      box-sizing: border-box;
      font-size: 16px;
    }
    html, body, .container, .row {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
    }
    .container {
      max-width: 100%;
    }
    button {
      font-size: 16px;
    }

    .half {
      position: fixed;
      margin: 0;
      width: 50% !important;
      height: 100%;
    }
    .bg {
      background: url('https://i.imgur.com/GUh7gmh.png') center center;
      background-size: contain;
      background-repeat: no-repeat;
    }
    .form {
      left: 50%;
      overflow: auto;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
    }
    h1, form {
      width: 100%;
    }
    h1 {
      padding-top: 8px;
      text-align: center;
    }
    form {
      margin-right: auto;
      margin-left: auto;
      max-width: 400px;
    }
    .input-group {
      margin-bottom: 30px;
    }
    .radio-group label {
      display: inline-block;
    }
    textarea {
      min-height: 100px;
    }

    @media screen and (max-width: 1024px) {
      .half {
        position: static;
        width: 100% !important;
        height: auto;
      }
      .bg {
        height: 30vh;
      }
      form {
        padding-right: 12px;
        padding-left: 12px;
      }
    }


  </style>

  <link rel="shortcut icon" href="https://i.imgur.com/UJvTZ0C.png"/>

  <!-- Google Tag Manager-->
  <script>
    (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','GTM-PGQ9WQT');
  </script>

</head>
<body>

  <!-- Google Tag Manager (noscript)-->
  <noscript>
    <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXX" height="0" width="0" style="display:none;visibility:hidden"></iframe>
  </noscript>

  <div class="container">
    <main class="row">
      <!-- bg -->
      <section class="six columns half bg"></section>

      <!-- form -->
      <section class="six columns half form">
        <h1>點起來</h1>
        <form>
          <!-- 姓名(沒使用)
          <div class="input-group">
            <label for="demo_name">姓名</label>
            <input class="u-full-width" type="text" placeholder="who?" id="demo_name">
          </div>
          -->
          <!-- 下拉式選單 -->
<!-- 姓名 -->
          <div class="input-group">
            <label for="demo_select">姓名</label>
            <select class="u-full-width" id="demo_name">
              <option value="0" value="0" selected disabled>請選擇</option>
<option value="洪溫德">1.洪溫德</option>
<option value="李立愷">2.李立愷</option>
<option value="劉俊男">3.劉俊男</option>
<option value="潘衍谷">4.潘衍谷</option>
<option value="劉民偉">5.劉民偉</option>
<option value="黃彥凱">6.黃彥凱</option>
<option value="陳巍元">7.陳巍元</option>
<option value="李承寯">8.李承寯</option>
<option value="鄭智仁">9.鄭智仁</option>
<option value="丁進順">10.丁進順</option>
<option value="廖啓翔">11.廖啓翔</option>
<option value="黃雅萱">12.黃雅萱</option>
<option value="陳昀瑛">13.陳昀瑛</option>
<option value="黃均臺">14.黃均臺</option>
<option value="陳婉君">15.陳婉君</option>
<option value="劉駿杰">16.劉駿杰</option>
<option value="楊智筌">17.楊智筌</option>
<option value="李宏仁">18.李宏仁</option>
<option value="林濬弘">19.林濬弘</option>
<option value="王淑霞">20.王淑霞</option>
            </select>
          </div>
          <!-- 喝什麼 -->
          <div class="input-group">
            <label for="demo_select">喝什麼</label>
            <select class="u-full-width" id="opt_select">
              <option value="0" value="0" selected disabled>請選擇</option>
<option value="熟成紅茶">1.熟成紅茶</option>
<option value="麗春紅茶">2.麗春紅茶</option>
<option value="太妃紅茶">3.太妃紅茶</option>
<option value="胭脂紅茶">4.胭脂紅茶</option>
<option value="雪藏紅茶">5.雪藏紅茶</option>
<option value="熟成冷露">6.熟成冷露</option>
<option value="雪花冷露">7.雪花冷露</option>
<option value="春芽冷露">8.春芽冷露</option>
<option value="春芽綠茶">9.春芽綠茶</option>
<option value="春梅冰茶">10.春梅冰茶</option>
<option value="冷露歐蕾">11.冷露歐蕾</option>
<option value="熟成歐蕾">12.熟成歐蕾</option>
<option value="白玉歐蕾">13.白玉歐蕾</option>
<option value="熟成檸果">14.熟成檸果</option>
<option value="胭脂多多">15.胭脂多多</option>

            </select>
          </div>
          <!-- 甜度 -->
          <div class="input-group">
            <label for="demo_select">幾多甜</label>
            <select class="u-full-width" id="suger_select">
              <option value="0" value="0" selected disabled>請選擇</option>
              <option value="無糖">無糖</option>
              <option value="一分糖">一分糖</option>
              <option value="二分糖">二分糖</option>
              <option value="微糖">微糖</option>
              <option value="半糖">半糖</option>
              <option value="少糖">少糖</option>
              <option value="正常">正常</option>
            </select>
          </div>
          <!-- 冰塊 -->
          <div class="input-group">
            <label for="demo_select">幾多冰</label>
            <select class="u-full-width" id="ice_select">
              <option value="0" value="0" selected disabled>請選擇</option>
              <option value="正常">正常</option>
              <option value="少冰">少冰</option>
              <option value="微冰">微冰</option>
              <option value="去冰">去冰</option>
              <option value="完全去冰">完全去冰</option>
              <option value="常溫">常溫</option>
              <option value="溫">溫</option>
              <option value="熱">熱</option>
            </select>
          </div>
          <!-- 性別 -->
          <div class="input-group">
            <label>白玉</label>
            <div class="radio-group row">
              <!-- 加 -->
              <div class="four columns">
                <input type="radio" id="yes" name="demo_radio" value="加" checked>
                <label for="加">加</label>
              </div>

              <!-- 不加 -->
              <div class="four columns">
                <input type="radio" id="no" name="demo_radio" value="不加">
                <label for="不加">不加</label>
              </div>
          </div>
          <button type="button" id="submit" class="button-primary u-full-width">確認送出</button>

        </form>
      </section>
    </main>
  </div>

  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script>
    $(function() {
      $('#submit').on('click', function() {

        // 姓名
        var name = $('#demo_name').val() || '未填寫';
        // 選項
        var opt = $('#opt_select').val() || '未填寫';
        // 冰塊
        var ice = $('#ice_select').val() || '未填寫';
        // 甜度
        var suger = $('#suger_select').val() || '未填寫';
        // 白玉
        var sex = function() {
          var v;
          $('[name="demo_radio"]').each(function() {
            if($(this).prop('checked') === true) v = $(this).val();
          });
          return v;
        };
        // 內容
        var msg = $('#demo_textarea').val() || '未填寫';

        // post
        var data = {
          'entry.520206782': name,
          'entry.788003628': opt,
          'entry.1695419294': suger,
          'entry.480261776': ice,
          'entry.129086762': sex()
        };
        $.ajax({
          type: 'POST',
          url: 'https://docs.google.com/forms/u/0/d/e/1FAIpQLSeEm9RtilSZOukneJS-rpAhcu4JYBvbfckK0cHXkvz_7XZonA/formResponse',
          data: data,
          contentType: 'application/json',
          dataType: 'jsonp',
          complete: function() {
            alert('資料已送出！');
          }
        });

      });
    });
  </script>

</body>
</html>