アプリ サイト

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

前置き

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

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

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

【現在】
GoogleForm回答完了画面

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

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

Step1: buttonに遷移先を指定

まずは画面遷移リンクを設定!
ボタンをクリックしたら
Nuxtディレクトリ 内に遷移させます。
buttonタグを使用するため
$routerを使用します。

<nuxt-link to="/"></nuxt-link>は使いません。

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

directory

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

) pages

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

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

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

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

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

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

) pages

全体

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

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

-アプリ, サイト
-, ,

© 2020 aLiz Nuxt