Googleフォームの機能に独自フォームの融合方法（初心者向け）

##目次
・googleフォーム作成
・htmlフォームの作成
・gasについて知ろう
・gasのコードを書く
・通知をメールで受け取ろう

#googleフォームの作成
・[googleフォーム](https://www.google.com/intl/ja_jp/forms/about/)のサイトへ
![78B6DCDB-9D76-4FA0-8DEE-6BF20B8DDC39.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/763535/6ab36c9b-a86b-5127-f4a2-60f396437928.jpeg)
フォームを作ってみるを押す。
![62CA0063-CDBE-4EA8-89B8-5692CDE1AD1F_4_5005_c.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/763535/2a60b09d-5f3d-287e-7c02-946b9dfd8bfa.jpeg)

今回は連絡先情報を押す。
![D717354B-6A33-49D8-9C21-E35C3491482E.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/763535/35523b23-f218-4c85-cf24-71e76c8678a3.jpeg)
今回は名前とメールアドレスとコメントだけを使っていきます。
![982DB9C4-3193-4178-98A6-8C069AE0B087.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/763535/8fd1ef9a-444c-ac19-27bb-43ea219180ee.jpeg)
右上のネジマークを押すとこの画面にいき、回答を1回に制限するのチェックを外す。保存を押す。
![87EF43F3-AB7F-4BBA-BA6C-491151512C81_4_5005_c.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/763535/33f272f4-12b4-b6fa-6838-66e8d497ac84.jpeg)
先ほどの画面に戻り、回答を押す。そして、スプレッドシートのアイコンを押す。
![F528BF1A-0443-49A6-B639-E9D2FAE7BDA8_4_5005_c.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/763535/6ce8a4b9-ed33-2ce7-9fe3-6eb001aaa9f2.jpeg)
今回は新しいスプレッドシートを使います。連絡先情報のところはお好きな名前でも大丈夫です。

#HTMLフォーム作成
今回はこれを使っていきます

```index.html
　<form>
　　<div class="item">
　　　<label class="label">名前</label>
　　　<input class="inputs"type="text"name="name">
　　</div>
　　<div class="item">
　　　<label class="label">メールアドレス</label>
　　　<input class="inputs"type="email"name="mail">
　　</div>

　　<div class="item">
　　　<label class="label">問合せ内容</label>
　　　<textarea class="inputs" name="text"></textarea>
　　</div>
　　<div class="btn">
　　　<input type="submit"value="送信">
　　</div>
　</form>

```


htmlを入力すると、こんな感じになれば大丈夫です。（css当ててないから形が崩れてても大丈夫です。）
![C767FE6C-46EE-4EC0-9918-AAD0FB404823_4_5005_c.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/763535/930d2cbe-caa7-03e7-0bac-646353a677d9.jpeg)


#nameとactionの値を作成したフォームから取ってくる
![2E3C6503-A1AE-45A2-A511-A6213DFA5ABF.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/763535/bb70108b-3f2f-13c7-aeb9-04ee030ae768.jpeg)
右上の送信を押す。

![702D68A8-35A5-4B32-B0AA-B01181A2DABB_4_5005_c.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/763535/133c4c26-9069-0039-b947-339051605659.jpeg)
リンクコピーをする。新しいタブでリンクをはる。
![0B855357-BFF5-486B-9939-CDEAAABA1789.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/763535/bc052930-8460-9124-376b-4a1301eef4bd.jpeg)

ここで右クリックしてページのソースを表示を押して、`command+fキー`を押すと、
![EAB96E8E-4FAA-4301-8F04-B09098C88F06.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/763535/3a7373b6-0112-dbf1-45f2-3f3eb1d719fb.jpeg)
今回であれば、名前と検索して、右側にある`2005620554`をコピーする。
他のメールアドレスやコメントの数字もコピーする。

あとform actionと入力して、https~をコピーする。
![E4091CB6-9FB8-4F4C-8B61-82C718D2F106.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/763535/833a5896-a26e-f3f6-a70d-3d7e4ee69984.jpeg)


先ほどのhtmlフォームに入力する。

```index.html
　<form action="先ほどのhttps~を入力する">
　　<div class="item">
　　　<label class="label">名前</label>
　　　<input class="inputs"type="text"name="entry.先ほどの名前の数字">
　　</div>
　　<div class="item">
　　　<label class="label">メールアドレス</label>
　　　<input class="inputs"type="email"name="entry.先ほどのメールアドレスの数字">
　　</div>

　　<div class="item">
　　　<label class="label">問合せ内容</label>
　　　<textarea class="inputs" name="entry.先ほどのコメントの数字"></textarea>
　　</div>
　　<div class="btn">
　　　<input type="submit"value="送信">
　　</div>
　</form>

```

entry.を忘れずに。

##次に、gasのコードを書いていきます。
![98E5CA39-BE27-4E75-A9BC-A5320D0944CB_4_5005_c.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/763535/33644259-e38e-ce3d-4c16-6db36045551a.jpeg)
スクリプトエディタを押す。
![91526A31-DFA6-4B9F-AB7F-B05164DB6474_4_5005_c.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/763535/c599fea8-d4a4-1206-1eb6-c611436e4fa5.jpeg)
ここに、

```
function submitForm(e){
var itemResponses = e.response.getItemResponses();
var message = '';
for (var i = 0; i < itemResponses.length; i++) {
var itemResponse = itemResponses[i];
var question = itemResponse.getItem().getTitle();
var answer = itemResponse.getResponse();
message += (i + 1).toString() + '. ' + question + ': ' + answer + '\n';
}
var address = '送信するメールアドレス';
var title = '[お問い合わせを受信しました]';
var content = '下記の内容で、お問い合わせを受信しました。\n\n' + message;
GmailApp.sendEmail(address, title, content);
}
```
これをはる。
下のタイマーをおす。
![21AF58C1-B18E-4B74-BCAC-38018C9E32B3.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/763535/ee3678f2-d8e5-11ba-7aea-f0697429c9d2.jpeg)
右下のトリガーを追加するを押す。
イベントの種類を選択をフォーム送信時に変更する。
gasについてはこれで大丈夫です。


![025FA669-9CE1-481D-B20D-A81CC5127E03_4_5005_c.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/763535/7be20da9-953e-15ff-f62b-af11d10d9716.jpeg)
メールを送信してこんな画面はいやですよね。
今回はもう1つhtmlファイルを作ってそこに遷移さしていきたいと思います。head内に

```
<script type="text/javascript">
    var submitted = false;  
  </script>
  <iframe name="hidden_iframe" id="hidden_iframe" style="display:none;"
    onload="if(submitted) {window.location='作ったhtmlファイル名';}"></iframe>
```
これをコピペする。
これでじぶんで作ったhtmlファイルに遷移すると思います。

これでおわりです。おつかれさまでした！