サイト

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

前置き

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

actionentry以外は
コピペで実装可能です✨

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


解説

&&

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

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

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


FormData.append

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

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


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


axios

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

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

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

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


コード①


コード②

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

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

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


まとめ

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

  1. GoogleFormの
    actionentryをコピーし、
    独自フォームにペーストして連携
  2. FormDataaxiosを使用し送信
  3. 回答完了後は非同期通信で
    遷移しない or 遷移先を指定

-サイト
-,

© 2021 aLiz Nuxt