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

# 前置き
実践編の続きです。
GoogleFormと連携済みの
カスタマイズしたフォーム。
回答完了後の遷移先を変更します🐸
外部ではなく
Nuxtディレクトリ 内に遷移させます！
(Ajax, axiosを使用して
データ送信するやり方は別記事で。)

連携しただけだと、
GoogleFormの完了画面に飛んでしまいます。
これを別の画面に遷移させましょう🌟

【独自フォーム】
ここで送信をすると…
![picture_pc_57b1b23ef3ee878e3f16bcf5d1fd26d2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/2ccc34ff-a6c7-c658-5375-087cb4d1f2f1.png)

【現在】
GoogleForm回答完了画面
![picture_pc_49dcd7e7b7ab17e0eb1bff9fde67b31d.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/5de365ac-48d9-7f2b-666d-eec26329dc0d.png)

【変更後】
Nuxt内ページ
シンプルにpタグのテキストだけ。
<img width="620" alt="スクリーンショット 2019-12-26 18.31.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/d3f6528e-339c-d950-3c3a-078ebdea3ce5.png">

前回の実践編では
GoogleFormと独自フォーム
どちらから送信しても
GoogleFormで集計可能な状態にしました🎶


# Step1: buttonに遷移先を指定
まずは画面遷移リンクを設定！
ボタンをクリックしたら
Nuxtディレクトリ 内に遷移させます。
buttonタグを使用するため
$routerを使用します。
<nuxt-link to="/"></nuxt-link>は使いません。

<button @click="$router.push('')">ページ遷移</a>
遷移先はthanks.vueとします。

```
pages/
--| index.vue
--| thanks.vue
```

【index.vue】
パスは文字列パスで書きました。
https://router.vuejs.org/ja/guide/essentials/navigation.html

```index.vue
// 変更前
<button type="submit" name="button" value="送信">送信！</button>

// 変更後
<button type="submit" name="button" value="送信" @click="$router.push('thanks')">送信！</button>
```

これで遷移先の設定は完了です！

が、しかし！！！
一瞬遷移した後にGoogleForm完了画面へ😨

![page.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/3f74f15b-1d56-fe20-090b-47e3982fa189.gif)


# Step2: iframeをダミーで用意しよう
GoogleFormに遷移してしまう問題⚠️
form action="{URL}"で遷移しているため、
ここをいじくりましょう！⛏👷‍♀️

formタグにtarget属性を追加して
任意のフレーム(iframe)で表示させます。
そのiframeにスタイル指定し、
display: none;で消し去ります！！🍃

```index.vue
// 変更前
<form action="~/formResponse">

// 変更後
<form action="~/formResponse" target="dummy">
<iframe name="dummy" style="display:none;"></iframe>
```

【コード全体】

```index.vue
<template>
 <div class="container">
   // targetを追加
   <form action="~/formResponse" target="dummy">
     <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="送信" @click="$router.push('thanks')">送信！</button>
   </form>
   // iframeタグを追加
   <iframe name="dummy" style="display:none;"></iframe>
 </div>
</template>

<script>
export default { }
</script>

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

完成🎉
thanks.vueに遷移され、
そのまま留まってくれました🤗

![page2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/cb9eb1f5-1970-3641-f021-ac5bfbf75e4b.gif)


もちろんデータは送信されています！✨

<img width="833" alt="スクリーンショット 2019-12-26 18.02.58.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/000f6ddb-a119-a75c-1e1d-69f2719b082a.png">


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