Help us understand the problem. What is going on with this article?

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

はじめに

1週間vue.jsを勉強して、昨日ポートフォリオサイトが完成しました。ぜひみてください。youkan.me
そこでお問い合わせフォームをVuetifyで作って、その回答をGoogleFormに送信できたら便利だな。と思い、色々調べたのでまとめます。(現在僕のポートフォリオサイトではお問い合わせフォーム機能は停止しています)

大まかな仕組み

仕組みとしては簡単です。各記入欄に値を入力してもらい、送信ボタンが押されると各記入欄の値を取得しそれをパラメーターにくっつけてaxiosでGET通信するだけです。と言っても想像だけだと難しいので画像で解説していきます。

実際にやってみる(この記事のゴール)

1.フォームに行く

スクリーンショット 2020-05-20 10.40.01.png

2 記入&送信

スクリーンショット 2020-05-20 10.43.20.png

3 送信完了ページに移る

スクリーンショット 2020-05-20 10.43.42.png

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

スクリーンショット 2020-05-20 10.45.53.png

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

IMG_6388.jpg

作り方

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

スクリーンショット 2020-05-20 10.51.48.png

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

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

スクリーンショット 2020-05-20 10.53.46.png

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

entry.xxxxxxx

スクリーンショット 2020-05-20 10.57.03.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
スクリーンショット 2020-05-20 11.17.36.png

6 gasを開く

スプレッドシート→スクリプトエディタ
スクリーンショット 2020-05-20 11.14.07.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 トリガーを設定する

現在のプロジェクトトリガーを選択
スクリーンショット 2020-05-20 11.20.27.png
右下のトリガーと追加をクリック
スクリーンショット 2020-05-20 11.20.41.png
以下のように設定して保存すれば完成!
スクリーンショット 2020-05-20 11.20.56.png

まとめ

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

最後に

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

参考文献

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

inoue2002
18歳|#note 書いてます|学生向けにLINEBot開発→LT登壇→繋がりや技術力が大幅成長|#ldgk オンラインハッカソンLINE賞受賞|関西のIT勉強会に頻出|#社会人の方と繋がりたい #エンジニアと繋がりたい
https://note.com/inoue2002
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした