Skip to content

Instantly share code, notes, and snippets.

@Kazuki-tam
Last active March 7, 2020 15:28
Show Gist options
  • Save Kazuki-tam/739d90f7d7c13f4d2de4775ec39649fc to your computer and use it in GitHub Desktop.
Save Kazuki-tam/739d90f7d7c13f4d2de4775ec39649fc to your computer and use it in GitHub Desktop.
google-form-custom-ajax-vue
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