Nuxt Vueで開発をしております。
googleフォームでお問い合わせフォームを作成したいのですが、うまく作成することができません。
参考記事
【Nuxt.js GoogleForm】GoogleFormを使った簡単なフォーム作成
現状のコード
Vue
1<template lang="pug"> 2div.auth 3 PCHeader 4 div.auth__container 5 div.auth__inner 6 h1 お問い合わせ 7 form(@submit.prevent='submit') 8 .your_name 9 label(for='your_name') 10 | お名前 11 input(type='text', v-model='form.your_name', name='entry.15*********', maxlength='50', aria-required='false', aria-multiline='false', placeholder='田中 太郎') 12 div 13 label(for='email') 返信用メールアドレス 14 input(type='email', v-model='form.email', name="entry.20*********" maxlength='50', aria-required='false', aria-multiline='false', placeholder='homecanavi@mail.com') 15 div 16 label(for='type') 利用者区分 17 select(type='type', v-model='form.type', name="entry.16*********") 18 option(value='ユーザー') ユーザー 19 option(value='ケアマネージャー') ケアマネージャー 20 option(value='事業所') 事業所 21 option(value='その他') その他 22 div 23 label.comment(for='comment') お問い合わせ内容 24 textarea(v-model='form.comment', name="entry.72*********", cols='30', rows='10', placeholder="入力してください") 25 button.confirm(roll='button', type='submit') 26 | この内容で問い合わせる 27 PCFooter 28</template> 29 30<script> 31import Vue from "vue"; 32import axios from "axios"; 33import PCHeader from "~/components/organisms/PCHeader"; 34import PCFooter from "~/components/organisms/PCFooter"; 35 36export default { 37 components: { 38 PCHeader, 39 PCFooter, 40 }, 41 data () { 42 return { 43 form: { 44 your_name: "", 45 email: "", 46 type: "", 47 comment: "" 48 } 49 } 50 }, 51 metohds: { 52 submit () { 53 const submitParams = new FormData() 54 submitParams.append('entry.15*********', this.form.your_name); 55 submitParams.append('entry.2*********', this.form.email); 56 submitParams.append('entry.16*******', this.form.type); 57 submitParams.append('entry.72*********', this.form.comment); 58 59 const CORS_PROXY = 'https://cors-anywhere.herokuapp.com/' 60 const GOOGLE_FORM_ACTION = 'https://docs.google.com/forms/u/0/d/e/*******************************/formResponse' 61 axios.post(CORS_PROXY + GOOGLE_FORM_ACTION, submitParams) 62 .then(() => { 63 this.isSubmitComplete = true 64 }) 65 } 66 } 67}; 68</script> 69
サーバーを立ち上げて、フォームで送信をしても、googleフォームに反映されません。
詳しい方、不足している記述教えていただきたいです。
宜しくお願いいたします。
あなたの回答
tips
プレビュー