google-form-custom-ajax-vue

gistfile1.txt

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;
    }
  }
});