Last active
March 7, 2020 15:28
-
-
Save Kazuki-tam/739d90f7d7c13f4d2de4775ec39649fc to your computer and use it in GitHub Desktop.
google-form-custom-ajax-vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import Vue from "vue"; | |
import axios from "axios"; | |
new Vue({ | |
el: "#postForm", | |
data: { | |
// フォームの表示 | |
showForm: true, | |
// お問い合わせ内容 | |
contactType: "", | |
// お名前 | |
userName: "", | |
// メールアドレス | |
email: "", | |
// ご依頼内容 | |
content: "" | |
}, | |
methods: { | |
submit: function () { | |
const submitParams = new FormData(); | |
// お問い合わせ内容のname属性値 | |
submitParams.append("entry.123456789", this.contactType); | |
// お名前のname属性値 | |
submitParams.append("entry.123456789", this.userName); | |
// メールアドレスのname属性値 | |
submitParams.append("entry.123456789", this.email); | |
// ご依頼内容のname属性値 | |
submitParams.append("entry.123456789", this.content); | |
// CORSエラー対策 | |
const CORS_PROXY = "https://cors-anywhere.herokuapp.com/"; | |
// Googleフォームのaction属性値 | |
const GOOGLE_FORM_ACTION = "https://docs.google.com/forms/(Googleフォームからコピペしてください)"; | |
// Ajax POST通信 | |
axios.post(CORS_PROXY + GOOGLE_FORM_ACTION, submitParams).then(res => { | |
// フォーム非表示 | |
this.showForm = false; | |
}); | |
// フォーム非表示 | |
this.showForm = false; | |
} | |
} | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment