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

前置き

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

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

【独自フォーム】
ここで送信をすると…

【現在】
GoogleForm回答完了画面

【変更後】
Nuxt内ページ
シンプルにpタグのテキストだけ。

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

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

Step1: buttonに遷移先を指定

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

<button @click="$router.push('')">ページ遷移</a>

1	<button @click="$router.push('')">ページ遷移</a>

遷移先はthanks.vueとします。

Step2: iframeをダミーで用意しよう

GoogleFormに遷移してしまう問題⚠️
form action="{URL}"で遷移しているため、
ここをいじくりましょう！⛏👷‍♀️

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

) pages

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

// targetを追加

<label>メールアドレス<br>

</label>

<label>checkbox<br>

</label>

<label>radio<br>

</label>

<label>お問い合わせ内容<br>

</label>

<label>select<br>

</select>

</label>

</label>

</form>

// iframeタグを追加

</div>

</template>

export default { }

</script>

</style>

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

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