【Nuxt.js】Form実践編：GoogleFormと独自フォーム連携

# 前置き
今回は、
オリジナルフォームと
GoogleFormを連携させて、
簡単に送信・集計できる方法をご紹介🌟
独自フォームから送信しても
GoogleFormから送信しても
OKな状態を作ります♪

※GoogleFormそのものを
サイトに埋め込むわけではないです。

![Frame 1 13.35.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/99a4a7a6-9e74-5989-8e15-1333c8bbb381.png)

本来はオリジナルフォームを作成し、
データ送信をやる予定でした。
しかし様々な知識が必要で、
stepを踏んでやるべきだと判断し変更です！

# メリット
・独自フォームを
　CSSで自由にカスタマイズできる
　（今回は連携の仕方をメインでやるので
　　カスタマイズはしていません）

・元から使用していたGoogleFormを
　サイトで置き換えができる

・集計が簡単
　GoogleFormにあるデータをそのまま使用できる

# Step1: 独自フォーム作成
formタグでまずはフォーム作成🍀
各タグはlabelで囲む書き方で統一してます。
今回もスタイリングは省きます。

```Form.vue
<template>
 <div class="container">
   <form>
     <label>メールアドレス<br>
       <input type="email" placeholder="sample@mail.co.jp">
     </label>
     <label>checkbox<br>
       <input type="checkbox" value="サンプル1">サンプル1<br>
       <input type="checkbox" value="サンプル2">サンプル2<br>
       <input type="checkbox" value="サンプル3">サンプル3<br>
     </label>
     <label>radio<br>
       <input type="radio" value="サンプル1">サンプル1<br>
       <input type="radio" value="サンプル2">サンプル2<br>
       <input type="radio" value="サンプル3">サンプル3<br>
     </label>
     <label>お問い合わせ内容<br>
       <textarea placeholder="問合せ内容を記入してください。"></textarea>
     </label>
     <label>select<br>
       <select>
         <option value="サンプル1">サンプル1</option>
         <option value="サンプル2">サンプル2</option>
         <option value="サンプル3">サンプル3</option>
       </select>
     </label>
     <label>日付<br>
       <input type="date">
     </label>
     <button type="submit" name="button" value="送信">送信！</button>
   </form>
 </div>
</template>

<script>
export default { }
</script>

<style lang="scss" scoped>
</style>
```

# Step2: GoogleFormを作成
基本的な作り方はいろんなサイトで
解説されているのでそちらを参考に。
大事なのは独自フォームと
命名・項目の順序・データの型を
一致させることです。
これがズレると集計もズレたり
修正が大変です。。。

独自フォームの
input type="email"
メールアドレスを入力させるなら
1行のテキストなので記述式を選択。
email以外でもテキスト系ならこれ。

![picture_pc_df3a855c5a7efb5a9872484f3566ce13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/794c0777-abb8-21da-27c4-d706ff5aed23.png)

基本パターン
　input type="text": 記述式
　input type="checkbox": チェックボックス 
　input type="radio": ラジオボタン
　textarea: 段落
　select: プルダウン

　input type="date"など
　日時に関する物は例外のため後述！

バリデーション
　「回答の検証」でバリデーションを追加

# Step3: GoogleFormと連携
GoogleFormの設定が終わったら
右上の送信ボタンの鎖タブで
URLをコピーしアクセス！

検証を使ってコードを見ます。
それを独自フォームのコードに入れるだけ！
コピペが必要なのは2種類のみ🌟
なのでcommand+Fで
actionとentryを検索🔎
・formタグのaction="{ url }"
・各項目のname="entry.{ number }"

![Frame 2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/b504f645-d774-ba44-4f04-711c900d6b8c.png)

![Frame 3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/6525c7a0-6c44-fd07-d54e-c256cb3a2453.png)

今調べた2点を
Step1の独自フォームタグに追記

```Form.vue
<template>
 <div class="container">
   <form action="https://docs.google.com/forms/u/0/d/e/1FAIpQLScgxuGsd5H3JacRh5c--o-PKoGByJZy13_RD8pN168kaOnK1Q/formResponse">
     <label>メールアドレス<br>
       <input type="email" name="entry.434757334" placeholder="sample@mail.co.jp">
     </label>
     <label>checkbox<br>
       <input type="checkbox" name="entry.1204157328" value="サンプル1">サンプル1<br>
       <input type="checkbox" name="entry.1204157328" value="サンプル2">サンプル2<br>
       <input type="checkbox" name="entry.1204157328" value="サンプル3">サンプル3<br>
     </label>
     <label>radio<br>
       <input type="radio" name="entry.983125863" value="サンプル1">サンプル1<br>
       <input type="radio" name="entry.983125863" value="サンプル2">サンプル2<br>
       <input type="radio" name="entry.983125863" value="サンプル3">サンプル3<br>
     </label>
     <label>お問い合わせ内容<br>
       <textarea name="entry.1558442274" placeholder="問合せ内容を記入してください。"></textarea>
     </label>
     <label>select<br>
       <select name="entry.415481532">
         <option value="サンプル1">サンプル1</option>
         <option value="サンプル2">サンプル2</option>
         <option value="サンプル3">サンプル3</option>
       </select>
     </label>
     <label>日付<br>
       <input type="date" name="entry.385746138">
     </label>
     <button type="submit" name="button" value="送信">送信！</button>
   </form>
 </div>
</template>

<script>
export default { }
</script>

<style lang="scss" scoped>
</style>
```

これで完成です🤗🎉

試しに独自フォームから送信しましょう！
GoogleFormで回答を確認し、
正常に集計できていればOKです♪
スプレッドシートの方が
確認しやすくてオススメです〜！

この内容で…

![picture_pc_57b1b23ef3ee878e3f16bcf5d1fd26d2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/21eafd03-ee1e-6c9d-8db4-54f3900a3d90.png)

送信！！！✉️

![picture_pc_49dcd7e7b7ab17e0eb1bff9fde67b31d.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/ac1a8c90-6343-c76a-774e-fce62fc5ef71.png)

GoogleFormのスプレッドシートに
正しく反映されました🤗

![picture_pc_a5395b765529516ea3db83730c2feddc.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/74914d13-b4fd-f13b-3148-d6f3e4a4075a.png)

# 例外パターン
Step2の基本パターンでは
できない例外です。

input type="date"
独自フォームではinput1つに対し
GoogleFormで日付で作ってしまうと
inputが3つできてしまいます。
そのため、
GoogleFormでは日付ではなく
通常の記述式にします。

バリデーションは設定せずに一度送信。
スプレッドシートで
データの型を確認すると、

![Frame 4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/1e3efc6e-54e4-4b69-856a-eac09dcf2f7e.png)

2019-12-24…
ハイフン 入りでした！
正規表現でバリデーションを設定。

![picture_pc_86e2745e2a9dc8a7c6e2d41906dd2abc.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/0e7edcd4-8f4b-f43c-5011-97d7f846c6c1.png)

^\d{4}-\d{1,2}-\d{1,2}$
こちらの記事が参考になります！
https://qiita.com/dongri/items/2a0a18e253eb5bf9edba

🎉GoogleForm完成🎉

![picture_pc_b69d8ff041cdbfdb4563e46c2df8f4b1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/eb6f451a-8cbc-5f67-8501-9fb2978518af.png)




次回は応用編です🌟
独自フォームから送信後、
GoogleFormの完了画面に
飛んでしまうのを変更します！

**このアカウントでは
Nuxt.js、Vue.jsを誰でも分かるよう、
超簡単に解説しています🎈😀
これからも発信していくので、
ぜひフォローしてください♪**
https://twitter.com/aLizlab