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

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

#実際にやってみる（この記事のゴール）
##1.フォームに行く

##2 記入&送信

##3 送信完了ページに移る

##4 スプレッドシートに記入される

##5　メールが送信されプッシュで通知される

#作り方
###1.作りたいフォームと同じ形式でGoogleFormを作る&プレビューする

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

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

###3 各質問の全ての質問idを取得する(name='entry.xxxxxxx') `entry.xxxxxxx`

###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

####6 gasを開く
スプレッドシート→スクリプトエディタ

####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 トリガーを設定する

現在のプロジェクトトリガーを選択

右下のトリガーと追加をクリック

以下のように設定して保存すれば完成！

#まとめ

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

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

##参考文献
Googleフォームを自在にカスタマイズする
Googleフォームを独自デザインにしてホームページに埋め込む方法