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

🎈 この記事はWPへ移行しました
【Nuxt.js】Form応用編：GoogleFormと独自フォーム連携

# 前置き

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

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

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

【現在】
GoogleForm回答完了画面

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

前回の実践編はこちら。
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完了画面へ😨

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

【コード全体】

<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に遷移され、
そのまま留まってくれました🤗

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

次回はSEOをやります！
公開予定日は12/27(金)です🌟

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

タイトル未設定

🎈 この記事はWPへ移行しました
【Nuxt.js】Form応用編：GoogleFormと独自フォーム連携