はじめに
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を使っていたり色々と汚いところはいっぱいあります。初心者のため、今はまだ動くベースで勉強しています。それを理解した上で試してみてください。ありがとうございました。