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

前置き

実践編の続きです。
GoogleFormと連携済みの
カスタマイズしたフォーム。
回答完了後の遷移先を変更します🐸
今回はaxiosを使用し、
データ送信とページ遷移を行います！
外部ではなく
Nuxtディレクトリ内に遷移させます！

オリジナルフォームを
GoogleFormと連携する方法はこちら

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

axiosを使用せずに
データ送信・ページ遷移する方法は
こちらの記事でご確認ください🎈

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

現状

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

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

【現在】
GoogleForm回答完了画面

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

なぜaxiosが必要？

非同期通信にしないと
強制的にGoogleFormの完了画面へ
遷移するから。
axiosでAPI通信が簡単になります！
今回はそーゆーのがあるんだ、
くらいの認識で大丈夫です⭕️

axiosを使わず
iframeをdisplay: noneするやり方も
こちらで書いたので参考にどうぞ♪
https://note.com/aliz/n/n80f0586bc160

Step1: axiosインストール、準備

まずはaxiosの準備♪

terminal

$ npm install --save @nuxtjs/axios

) file

modules: [
   '@nuxtjs/axios',
],
axios: {}

modules: [

'@nuxtjs/axios',

axios: {}

ですがGoogleFormの場合
axiosを使用すると
CORSエラーが出てしまうようです。
動作はするみたいですが、
エラーは解消したい🍀

) file

モードを変更

mode: "universal",

1	mode: "universal",

<script>
import axios from 'axios'
</script>

import axios from 'axios'

</script>

これで準備完了😎

Step1: formタグにmethodsを追加

axiosの使い方は2パターンですね。
・asyncDataを使って書く
・methods内に書く

今回はsubmitした際に
inputのdataを送信したいので
methods内に書きます✍️

) pages

submit時に、submitメソッドを行います。
イベント修飾子のpreventをつけて
リロードを防ぎます。

<template>
 <form @submit.prevent="submit">
  // 省略
 </form>
</template>

<script>
import axios from 'axios'
export default {
 methods: {
   submit () {
    // 後述
   }
 }
}
</script>

// 省略

</form>

</template>

import axios from 'axios'

export default {

methods: {

submit () {

// 後述

}

</script>

Step2: 各inputにv-modelを追加、data格納

input各項目にv-modelを追加
今回は分かりやすく簡潔に、
1つのinputのみをデータ送信します。

) pages

<input v-model="form.email" type="email" name="entry.434757334" placeholder="sample@mail.co.jp">

1	<input v-model="form.email" type="email" name="entry.434757334" placeholder="sample@mail.co.jp">

dataに格納

<script>
import axios from 'axios'
export default {
 data () {
   return {
     form: {
       email: "",
     }
   }
 },
}
</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~でデータ送信が成功した際の処理
　＝ページ遷移を書きます。

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

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: 実際に送信してみる

送信を押すと…

あれ？
401error…
IDpassを使用しているわけではないので
サーバーエラー。
GoogleFormの権限を見ると…

ユーザーを限定していました。
☑️を外して再チャレンジ！😀

できていますね🌟