質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Vuex

Vuexは、Vue.js アプリケーションのための状態管理ライブラリです。アプリケーション内で使用するコンポーネントのための集中データストアを提供。コンポーネント同士でデータをやり取りし、処理のフローを一貫させたり、データの見通しを良くすることができます。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

0回答

1323閲覧

Vue.js nuxt  googleフォームを使ってお問い合わせフォームを作成した。。

masaosan18

総合スコア64

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Vuex

Vuexは、Vue.js アプリケーションのための状態管理ライブラリです。アプリケーション内で使用するコンポーネントのための集中データストアを提供。コンポーネント同士でデータをやり取りし、処理のフローを一貫させたり、データの見通しを良くすることができます。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2020/10/27 05:33

編集2022/01/12 10:55

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フォームに反映されません。

詳しい方、不足している記述教えていただきたいです。
宜しくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問