【Nuxt.js】GoogleFormにデータを送信しよう

前置き

GoogleFormと連携した独自フォームの
送信部分の解説です💫

actionやentry以外は
コピペで実装可能です✨

⬇️連携と回答後のページ遷移は
　こちらでご確認ください👀
　簡単に言ってしまうと
　GoogleFormのactionとentryをコピペし、
　非同期通信すれば良いだけです❣️
【Nuxt.js】Form実践編：GoogleFormと独自フォーム連携
 【Nuxt.js】Form応用編：axiosでGoogleFormと独自フォーム連携

解説

&&

if (this.form.name && this.form.email && this.form.message)
必須項目を全て入力した状態で送信をしたいので
inputにrequiredをつけますが、
methodsでもifで条件を指定しています。

&&
日本語でいうと「かつ」
数学でいう「∩」

MDNの例だと
aはtrueだが
bがfalseなので
結果falseになります。

const a = 3;
const b = -2;

console.log(a > 0 && b > 0);

const a = 3;

const b = -2;

console.log(a > 0 && b > 0);

FormData.append

new FormData()で
キーと値を扱えるようにします。
FormData.appendで
キーと値のセットを追加します。

submitParams.append(this.formInfo[key], this.form[key])
なのでentry.numberがキーになって
v-modelに入力した文字列が値になります💫☝️

⬇️Objectのキーの取り出し方は
　こちらが参考になります。
　たぬきはポンポコと鳴いた！
　(tanukiはpon-pokoと鳴いた！)
　という感じになりますね。
JSのObjectをforEachで処理する方法

let obj = { tanuki:'pon-poko', kitsune:'kon-kon', neko:'nyan-nyan' };
Object.keys(obj).forEach(function (key) {
  console.log(`${key}は${obj[key]と鳴いた！}`);
});

let obj = { tanuki:'pon-poko', kitsune:'kon-kon', neko:'nyan-nyan' };

Object.keys(obj).forEach(function (key) {

console.log(`${key}は${obj[key]と鳴いた！}`);

});

axios

⬇️axiosの導入方法はこちらをご覧ください👀
　インストール時間はおいといて、
　1分で使えます👍✨
【Nuxt.js】nuxt/axiosを導入しよう

回答後のGoogle Formへの遷移を
非同期通信で防ぎます。

CORSエラー回避のために
CORSプロキシを使用しています。

データを送信するのでpostですね💡
axios.post(url[, data[, config]])
GithubのRequest method aliasesで
確認できます👀

コード①

<template>
 <form @submit.prevent="submit">
  // inputは省略
    <button @click="submitForm">submit!</button>
 </form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        email: '',
        message: '',
      },

      formInfo: {
        action:
          'https://docs.google.com/forms/u/0/d/e/1FAIpQLSeNT5Ym20DqnoiWaeO7oYfnyxnvj0yokVyet1_-lU5ABETXww/formResponse',
        name: 'entry.841138565',
        email: 'entry.691828837',
        message: 'entry.1263499542',
      },
    }
  },
  methods: {
    submitForm() {
      if (this.form.name && this.form.email && this.form.message) {

        const submitParams = new FormData()

        Object.keys(this.form).forEach((key) => {
          submitParams.append(this.formInfo[key], this.form[key])
        })

        const CORS_PROXY = 'https://cors-anywhere.herokuapp.com/'
        const GOOGLE_FORM_ACTION = this.formInfo.action

        this.$axios
          .post(CORS_PROXY + GOOGLE_FORM_ACTION, submitParams)
          .then(() => {
             console.log('送信成功') // this.$router.push('thanks')など、別ページに遷移も可能
          })
          .catch((e) => {
             console.log(e)
          })
      }
    },
  },
}
</script>

// inputは省略

<button @click="submitForm">submit!</button>

</form>

</template>

export default {

data() {

return {

form: {

email: '',

message: '',

formInfo: {

action:

'https://docs.google.com/forms/u/0/d/e/1FAIpQLSeNT5Ym20DqnoiWaeO7oYfnyxnvj0yokVyet1_-lU5ABETXww/formResponse',

email: 'entry.691828837',

message: 'entry.1263499542',

}

methods: {

submitForm() {

if (this.form.name && this.form.email && this.form.message) {

const submitParams = new FormData()

Object.keys(this.form).forEach((key) => {

submitParams.append(this.formInfo[key], this.form[key])

})

const CORS_PROXY = 'https://cors-anywhere.herokuapp.com/'

const GOOGLE_FORM_ACTION = this.formInfo.action

this.$axios

.post(CORS_PROXY + GOOGLE_FORM_ACTION, submitParams)

.then(() => {

console.log('送信成功') // this.$router.push('thanks')など、別ページに遷移も可能

})

.catch((e) => {

console.log(e)

})

}

</script>

コード②

dataにこちらを追加しています。
・isSending
・status

データの送信中に
isSendingをtrueにすることで
送信中アイコンがでるようになっています。

statusは送信の成功/失敗で
表示テキストを変えています。

<template>
 <form @submit.prevent="submit">
  // inputは省略
    <div class="btn">
      <div v-show="isSending" class="loader">
        <div class="loader-dot"></div>
        <div class="loader-dot"></div>
        <div class="loader-dot"></div>
      </div>
      <button @click="submitForm">submit!</button>
      <div>
        <p v-if="status === 'success'">Thanks!</p>
        <p v-if="status === 'error'">
          エラーが発生しました。もう一度送信してください。
        </p>
      </div>
    </div>
  </form>
</template>

<script>
export default {
  data() {
    return {
      isSending: false,

      status: '',

      form: {
        name: '',
        email: '',
        message: '',
      },

      formInfo: {
        action:
          'https://docs.google.com/forms/u/0/d/e/1FAIpQLSeNT5Ym20DqnoiWaeO7oYfnyxnvj0yokVyet1_-lU5ABETXww/formResponse',
        name: 'entry.841138565',
        email: 'entry.691828837',
        message: 'entry.1263499542',
      },
    }
  },
  methods: {
    submitForm() {
      if (this.form.name && this.form.email && this.form.message) {
        this.isSending = true

        const submitParams = new FormData()

        Object.keys(this.form).forEach((key) => {
          submitParams.append(this.formInfo[key], this.form[key])
        })

        const CORS_PROXY = 'https://cors-anywhere.herokuapp.com/'
        const GOOGLE_FORM_ACTION = this.formInfo.action

        this.$axios
          .post(CORS_PROXY + GOOGLE_FORM_ACTION, submitParams)
          .then(() => {
            this.isSending = false
            this.status = 'success'
          })
          .catch((e) => {
            console.warn(e)
            this.isSending = false
            this.status = 'error'
          })

        setTimeout(() => {
          this.isSending = false
          this.status = 'success'
        }, 2400)
      }
    },
  },
}
</script>

// inputは省略

</div>

<button @click="submitForm">submit!</button>

<div>

<p v-if="status === 'success'">Thanks!</p>

エラーが発生しました。もう一度送信してください。

</p>

</div>

</form>

</template>

export default {

data() {

return {

isSending: false,

status: '',

form: {

email: '',

message: '',

formInfo: {

action:

'https://docs.google.com/forms/u/0/d/e/1FAIpQLSeNT5Ym20DqnoiWaeO7oYfnyxnvj0yokVyet1_-lU5ABETXww/formResponse',

email: 'entry.691828837',

message: 'entry.1263499542',

}

methods: {

submitForm() {

if (this.form.name && this.form.email && this.form.message) {

this.isSending = true

const submitParams = new FormData()

Object.keys(this.form).forEach((key) => {

submitParams.append(this.formInfo[key], this.form[key])

})

const CORS_PROXY = 'https://cors-anywhere.herokuapp.com/'

const GOOGLE_FORM_ACTION = this.formInfo.action

this.$axios

.post(CORS_PROXY + GOOGLE_FORM_ACTION, submitParams)

.then(() => {

this.isSending = false

this.status = 'success'

})

.catch((e) => {

console.warn(e)

this.isSending = false

this.status = 'error'

})

setTimeout(() => {

this.isSending = false

this.status = 'success'

}, 2400)

}

</script>

まとめ

GoogleFormの解説はこれで全てです🪐
流れはこんな感じですね💡

GoogleFormの
actionとentryをコピーし、
独自フォームにペーストして連携
FormDataとaxiosを使用し送信
回答完了後は非同期通信で
遷移しない or 遷移先を指定