前置き
実践編の続きです。
GoogleFormと連携済みの
カスタマイズしたフォーム。
回答完了後の遷移先を変更します🐸
今回はaxiosを使用し、
データ送信とページ遷移を行います!
外部ではなく
Nuxtディレクトリ 内に遷移させます!
オリジナルフォームを
GoogleFormと連携する方法はこちら
axiosを使用せずに
データ送信・ページ遷移する方法は
こちらの記事でご確認ください🎈
現状
連携しただけだと、
GoogleFormの完了画面に飛んでしまいます。
これを別の画面に遷移させましょう🌟
【独自フォーム】
ここで送信をすると…
![](https://i2.wp.com/nuxt.alizlab.com/wp-content/uploads/2020/06/picture_pc_f22f6130c7aa7e27c3da99c874088702.png?resize=620%2C418)
【現在】
GoogleForm回答完了画面
![](https://i0.wp.com/nuxt.alizlab.com/wp-content/uploads/2020/06/picture_pc_0112caaa0f70672bd13f01ec9254629a.png?resize=620%2C160)
【変更後】
Nuxt内ページ
シンプルにpタグのテキストだけ。
![](https://i0.wp.com/nuxt.alizlab.com/wp-content/uploads/2020/06/picture_pc_d8de29f9a24af0e33df04e1d54ea7f89-1024x107.png?resize=920%2C96)
なぜaxiosが必要?
非同期通信にしないと
強制的にGoogleFormの完了画面へ
遷移するから。
axiosでAPI通信が簡単になります!
今回はそーゆーのがあるんだ、
くらいの認識で大丈夫です⭕️
axiosを使わず
iframeをdisplay: noneするやり方も
こちらで書いたので参考にどうぞ♪
https://note.com/aliz/n/n80f0586bc160
Step1: axiosインストール、準備
まずはaxiosの準備♪
terminal
$ npm install --save @nuxtjs/axios
) file
1 2 3 4 |
modules: [ '@nuxtjs/axios', ], axios: {} |
ですがGoogleFormの場合
axiosを使用すると
CORSエラーが出てしまうようです。
動作はするみたいですが、
エラーは解消したい🍀
) file
モードを変更
1 |
mode: "universal", |
1 2 3 |
<script> import axios from 'axios' </script> |
これで準備完了😎
Step1: formタグにmethodsを追加
axiosの使い方は2パターンですね。
・asyncDataを使って書く
・methods内に書く
今回はsubmitした際に
inputのdataを送信したいので
methods内に書きます✍️
) pages
submit時に、submitメソッドを行います。
イベント修飾子のpreventをつけて
リロードを防ぎます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<template> <form @submit.prevent="submit"> // 省略 </form> </template> <script> import axios from 'axios' export default { methods: { submit () { // 後述 } } } </script> |
Step2: 各inputにv-modelを追加、data格納
input各項目にv-modelを追加
今回は分かりやすく簡潔に、
1つのinputのみをデータ送信します。
) pages
1 |
<input v-model="form.email" type="email" name="entry.434757334" placeholder="sample@mail.co.jp"> |
dataに格納
1 2 3 4 5 6 7 8 9 10 11 12 |
<script> import axios from 'axios' export default { data () { return { form: { email: "", } } }, } </script> |
Step3: methodsにaxiosを記載
・FormDataオブジェクト
送信データと、
input="entry.{ number }"を一致させます。
form action="{ URL }"もここに移動させます。
・axios
今回はデータ送信を行うのでPOST
.then~でデータ送信が成功した際の処理
=ページ遷移を書きます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<script> import axios from 'axios' export default { data () { return { form: { email: "", } } }, methods: { submit () { const submitParams = new FormData() submitParams.append('entry.434757334', this.form.email); const CORS_PROXY = 'https://cors-anywhere.herokuapp.com/' const GOOGLE_FORM_ACTION = 'https://docs.google.com/forms/u/0/d/e/1FAIpQLScgxuGsd5H3JacRh5c--o-PKoGByJZy13_RD8pN168kaOnK1Q/formResponse' axios.post(CORS_PROXY + GOOGLE_FORM_ACTION, submitParams) .then(() => { this.$router.push('thanks') }) } } } </script> |
こちらが参考になります。
https://www.yoheim.net/blog.php?q=20170801
https://alliance7.blogspot.com/2019/01/google-formaxioscros.html
Step4: 実際に送信してみる
送信を押すと…
![](https://i1.wp.com/nuxt.alizlab.com/wp-content/uploads/2020/06/picture_pc_d8f7b753f557c8f4479f19dc4be86db7-1024x761.png?resize=920%2C684)
あれ?
401error…
IDpassを使用しているわけではないので
サーバーエラー。
GoogleFormの権限を見ると…
![](https://i2.wp.com/nuxt.alizlab.com/wp-content/uploads/2020/06/picture_pc_4ceb96f552b391cc00018f0bc5db38a6-1024x543.png?resize=920%2C488)
ユーザーを限定していました。
☑️を外して再チャレンジ!😀
![](https://i0.wp.com/nuxt.alizlab.com/wp-content/uploads/2020/06/picture_pc_1c3118b336f4baee17009f9d1b3acd50.gif?resize=620%2C490)
できていますね🌟