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

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

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

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

SPA(Single-page Application)

SPA(Single-page Application)は、単一のWebページのみでコンテンツの切り替えができるWebアプリケーションもしくはWebサイトです。ブラウザでのページ遷移がないため、デスクトップアプリケーションのようなUXを提供します。

Google フォーム

Google フォームは、 Google社が提供しているアンケートフォーム作成および集計ができる無料のツール。Googleアカウントがあれば利用が可能です。集計データは、スプレッドシートに収集され、データ分析もできます。

Q&A

0回答

981閲覧

Vueでaxiosを使ってGoogleフォームとリンクさせようとしていますが上手くいきません

退会済みユーザー

退会済みユーザー

総合スコア0

Vue.js

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

SPA(Single-page Application)

SPA(Single-page Application)は、単一のWebページのみでコンテンツの切り替えができるWebアプリケーションもしくはWebサイトです。ブラウザでのページ遷移がないため、デスクトップアプリケーションのようなUXを提供します。

Google フォーム

Google フォームは、 Google社が提供しているアンケートフォーム作成および集計ができる無料のツール。Googleアカウントがあれば利用が可能です。集計データは、スプレッドシートに収集され、データ分析もできます。

0グッド

0クリップ

投稿2022/01/29 08:23

ウェブサイトを見て色々試していますが上手くいかず何が悪いのかもわかりません。
助けていただけないでしょうか?

Vue.js(WebpackでSPAにしてます)

1<template> 2 <div id="webabcForm"> 3 <form v-on:submit.prevent="submit" v-if="showForm"> 4 <label for="name">お名前</label><br> 5 <input id="name" v-model="form.name" type="text" name="entry.2005620554" placeholder="氏名" required><br> 6 7 <label for="org">団体名/会社名</label><br> 8 <input id="org" v-model="form.org" type="text" name="entry.232322884"><br> 9 10 <label for="tel">お電話番号</label><br> 11 <input id="tel" v-model="form.tel" type="tel" name="entry.1166974658"><br> 12 13 <label for="mail">メールアドレス</label><br> 14 <input id="mail" v-model="form.mail" type="email" name="entry.1045781291" placeholder="example@mail.co.jp" required><br> 15 16 <label for="sub">件名</label><br> 17 <input id="sub" v-model="form.sub" type="text" name="entry.2138031892" required><br> 18 19 <label for="content">内容</label><br> 20 <textarea id="content" v-model="form.content" name="entry.839337160" required></textarea><br> 21 22 <button type="submit" name="button" value="送信">送信</button> 23 24 </form> 25 <div class="p-formSuccess" v-else> 26 <p>メッセージ送信完了<p> 27 <div class="btn"><router-link to="/">ホームへ戻る</router-link></div> 28 </div> 29 </div> 30</template> 31 32<script> 33import axios from 'axios' 34export default { 35 data() { 36 return { 37 showForm: true, 38 form: { 39 name: "", 40 org: "", 41 tel: "", 42 mail: "", 43 sub: "", 44 content: "" 45 } 46 } 47 }, 48 methods: { 49 submit () { 50 51 const submitParams = new FormData(); 52 submitParams.append('entry.2005620554', this.form.name); 53 submitParams.append('entry.232322884', this.form.org); 54 submitParams.append('entry.1166974658', this.form.tel); 55 submitParams.append('entry.1045781291', this.form.mail); 56 submitParams.append('entry.2138031892', this.form.sub); 57 submitParams.append('entry.839337160', this.form.content); 58 59 const CORS_PROXY = 'https://cors-anywhere.herokuapp.com/'; 60 const GOOGLE_FORM_ACTION = 'https://docs.google.com/forms/u/0/d/e/1FAIpQLSeVjRzGOnSFGoctpoAdjie8C3-lG91kQCk4JbXQLimfUqtFfQ/formResponse'; 61 62 axios.post(CORS_PROXY + GOOGLE_FORM_ACTION, submitParams).then(res => { 63 this.showForm = false; 64 }); 65 this.showForm = false 66 } 67 } 68}; 69</script> 70

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問