独自フォームとGoogleフォームを連携してかっこよくスマートにアンケート回収する

#はじめに
1週間vue.jsを勉強して、昨日ポートフォリオサイトが完成しました。ぜひみてください。[youkan.me](https://youkan.me)
そこでお問い合わせフォームをVuetifyで作って、その回答をGoogleFormに送信できたら便利だな。と思い、色々調べたのでまとめます。
#大まかな仕組み
仕組みとしては簡単です。各記入欄に値を入力してもらい、送信ボタンが押されると各記入欄の値を取得しそれをパラメーターにくっつけてaxiosでGET通信するだけです。と言っても想像だけだと難しいので画像で解説していきます。

#実際にやってみる（この記事のゴール）
##1.フォームに行く
<img width="1302" alt="スクリーンショット 2020-05-20 10.40.01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/6ee333e1-e3f6-7770-f1fd-0ab47b8144da.png">
##2 記入&送信

<img width="1281" alt="スクリーンショット 2020-05-20 10.43.20.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/5421730c-1047-149a-1141-ebcbf6d5e9b2.png">

##3 送信完了ページに移る
<img width="779" alt="スクリーンショット 2020-05-20 10.43.42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/399e06d4-4681-dde6-6f6f-17711c213de4.png">

##4 スプレッドシートに記入される
<img width="1211" alt="スクリーンショット 2020-05-20 10.45.53.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/a4b8a8a9-208d-a3e4-3c01-dd6861a64e33.png">

##5　メールが送信されプッシュで通知される
![IMG_6388.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/135bf524-7e1f-b1f7-0388-ded8c346bac0.jpeg)

#作り方
###1.作りたいフォームと同じ形式でGoogleFormを作る&プレビューする
<img width="959" alt="スクリーンショット 2020-05-20 10.51.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/684da553-985a-467f-fb23-55c5d19817e7.png">

###2.開発者ツールからformタグを探し、URLをメモする(action='<メモする>')

`https://docs.google.com/forms/u/xxxxxxx/formResponse`

<img width="1398" alt="スクリーンショット 2020-05-20 10.53.46.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/99eb132e-7f75-47c1-a6fc-6cd56fadf9a8.png">
###3 各質問の全ての質問idを取得する(name='entry.xxxxxxx')
`entry.xxxxxxx`

<img width="1412" alt="スクリーンショット 2020-05-20 10.57.03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/414365e5-7d44-2926-8ccd-01d6ea81c13d.png">

###4 formのコンポーネントを作って行く(※入門1週間のコードです)
##コードの下に解説載せてます

```form.vue

<template>
  <v-app>
  
    <div class="top-card">
      <v-card-title class=" justify-center  top-title" color="#26c6da"
        >Contact</v-card-title
      >
    </div>

    <div class="title">

      <v-card
        width="80%"
        height="auto"
        class="mx-auto"
        style="padding-bottom:100px; margin-bottom:200px"
      >
        <v-card
          width="80%"
          height="auto"
          class="mx-auto"
          style="padding-top:20px"
          flat
        >
          <v-card-title
            color="#26c6da"
            style=" margin-top:10px;font-size: 30px;color: #0075c2;
    "
            ><span
              style="background:linear-gradient(transparent 60%, #ffff66 60%);"
            >
              件名
            </span></v-card-title
          >
    
          <v-textarea class="mx-2" rows="1" no-resize id="subject"></v-textarea>

          <v-card-title
            class=""
            color="#26c6da"
            style=" margin-top:10px;font-size: 30px;color: #0075c2;
    "
            ><span
              style="background:linear-gradient(transparent 60%, #ffff66 60%);"
            >
              団体名/会社
            </span></v-card-title
          >
   
          <v-textarea
            class="mx-2"
            rows="1"
            no-resize
            id="organization"
          ></v-textarea>


          <v-card-title
            class=""
            color="#26c6da"
            style=" margin-top:10px;font-size: 30px;color: #0075c2;
    "
            ><span
              style="background:linear-gradient(transparent 60%, #ffff66 60%);"
            >
              お名前
            </span></v-card-title
          >
     
          <v-textarea class="mx-2" rows="1" no-resize id="name"></v-textarea>

    
          <v-card-title
            class=""
            color="#26c6da"
            style=" margin-top:10px;font-size: 30px;color: #0075c2;
    "
            ><span
              style="background:linear-gradient(transparent 60%, #ffff66 60%);"
            >
              メール
            </span></v-card-title
          >
         
          <v-textarea class="mx-2" rows="1" no-resize id="mail"></v-textarea>


          <v-card-title
            class=""
            color="#26c6da"
            style=" margin-top:10px;font-size: 30px;color: #0075c2;
    "
            ><span
              style="background:linear-gradient(transparent 60%, #ffff66 60%);"
            >
              内容
            </span></v-card-title
          >
     
          <v-textarea
            outlined
            auto-grow
            rows="4"
            row-height="30"
            shaped
            id="content"
          ></v-textarea>

          <v-card max-width="10%" class="mx-auto" flat>
            <v-btn
              rounded
              color="#e4007f"
              dark
              v-on:click="request"
              style="font-size:20px"
              clas="justify-center"
              >送信</v-btn
            >
            <Loading v-show="loading"></Loading>
          </v-card>
        </v-card>
      </v-card>

    
    </div>
  </v-app>
</template>

<script scaped>




import axios from "axios";

export default {
 
  methods: {
    request: async function() {
      var Sub =
        "entry.xxxxxxx" + "=" + document.getElementById("subject").value;
      var Org =
        "entry.xxxxxxxxx" + "=" + document.getElementById("organization").value;
      var Nam = "entry.xxxxxxxx" + "=" + document.getElementById("name").value;
      var Mai =
        "entry.xxxxxxxx" + "=" + document.getElementById("mail").value;
      var Con =
        "entry.xxxxxxx" + "=" + document.getElementById("content").value;

      var url =
        "https://docs.google.com/forms/u/0/d/xxxxxxxxx/formResponse?" +
        Sub +
        "&" +
        Org +
        "&" +
        Nam +
        "&" +
        Mai +
        "&" +
        Con;
      axios.get(url);
      setTimeout(() => {
        window.location.href = "/thank";
      }, 1000);
    },
  },
};
</script>

<style scaped>
.top-card {
  padding-top: 50px;
  padding-bottom: 80px;
}

.top-title {
  padding-top: 50px;
  font-size: 30px;
  color: #0075c2;
  font-weight: bold;
}

</style>

```

###コード解説
書く項目の`v-textarea `にidを振っておいて送信ボタンが押されたら`document.getElementById("content").value;`回答を取得、先ほどメモしておいた回答idと紐付けて`axios.get`します。
上のコードを丸コピする際には、
####1 プロジェクトにaxiosをインストール `npm i axios `
####2 formのURLを書き換える `url="https://docs.google.com/forms/u/0/d/xxxxxxxxx/formResponse?"`
####3 各項目の回答idを書き換え
####4　ページの遷移先`/thank`の作成

####5シート名の変更
スプレッドシートを開いて一番下のシートタブから名前を変更します。`sample`
<img width="314" alt="スクリーンショット 2020-05-20 11.17.36.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/169ea9d1-ead3-ab74-6fad-badc0e2bf294.png">


####6 gasを開く
スプレッドシート→スクリプトエディタ
<img width="602" alt="スクリーンショット 2020-05-20 11.14.07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/32329a03-c2ca-5209-947c-5ec46a201709.png">

####7 gasのコードを書く
メールアドレスとsheet名をしっかり確認してください。

```コード.gs
function myFunction() {
   const recipient = 'xx自分のメールアドレスとか入れるxx`'; //送信先のメールアドレス

  var spreadsheet2 = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('sample'); //シート名を指定
    var sheet2 = spreadsheet2.getActiveSheet();
 
//①列の先頭行から下方向に取得する
var lastRow1 = sheet.getRange(1, 1).getNextDataCell(SpreadsheetApp.Direction.DOWN).getRow();

  const recipientCompany = lastRow1;//7
   var getVal = sheet2.getRange(recipientCompany,1).getValue();
   var sub = sheet2.getRange(recipientCompany,2).getValue();
   var org = sheet2.getRange(recipientCompany,3).getValue();
   var name = sheet2.getRange(recipientCompany,4).getValue();
   var mail = sheet2.getRange(recipientCompany,5).getValue();
  var content = sheet2.getRange(recipientCompany,6).getValue();
  
  const subject = getVal; //日時
  
  const body = `件名：${sub}\n団体名：${org}\n名前：${name}\nメール：${mail}\n内容：${content}\n\nお問い合わせ一覧リスト↓↓\n\n\n https://docs.google.com/spreadsheets/d/`;
  
  const options = {name: 'ポートフォリオお問い合わせフォーム'};
  
  GmailApp.sendEmail(recipient, subject, body, options);
}


```

####8 トリガーを設定する

現在のプロジェクトトリガーを選択
<img width="367" alt="スクリーンショット 2020-05-20 11.20.27.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/bf5ea00e-a94f-cee4-eaff-87235bc74170.png">
右下のトリガーと追加をクリック
<img width="271" alt="スクリーンショット 2020-05-20 11.20.41.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/6c608855-7ec1-45e2-6c85-ce9bc8b6ee3c.png">
以下のように設定して保存すれば完成！
<img width="689" alt="スクリーンショット 2020-05-20 11.20.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/342a67e8-08e0-54d5-9773-26e98a08a630.png">

#まとめ

GoofleFormはURLにパラーメータをつければでGET通信すれば回答できる！！
テキスト以外にもボタンとかでもできるみたいです。参考文献をみてください。

#最後に
from.vueでsetTimeoutを使っていたり色々と汚いところはいっぱいあります。初心者のため、今はまだ動くベースで勉強しています。それを理解した上で試してみてください。ありがとうございました。

##参考文献
[Googleフォームを自在にカスタマイズする](https://qiita.com/curioussafuta/items/fa077cbf820faca30598)
[Googleフォームを独自デザインにしてホームページに埋め込む方法](https://haniwaman.com/google-form-original/)