vueで作成したformをGoogleフォームのアンケートと連動させるメモ


はじめに

Vueで問い合わせページを作成している時に問い合わせをGoogleスプレッドシートに反映させようと思いました.

方法としては,pageにgoogleフォームをiframeを使って埋め込む方法があるのですが,今回はフォームの見た目はJsで作成してそこから,googleフォームに投げてみます.

実装

まずgoogleフォームを作成し,form actionのURLと画像にあるname=entry.****をメモしておきます.

 したのコードはformのscriptの部分です.postFormメソッドでformを作成し,dataに定義している値を入れて,submitします.

<script>
  import axios from 'axios'
export default {
  name:"Contact",
  data () {
    return {
      form: {
        email: '',
        title: '',
        content:'',
      },
      show: true
    }
  },
  methods: {
    onSubmit (evt) {
      evt.preventDefault();
      alert(JSON.stringify(this.form));
      this.postform(this.form);
    },
    postForm(v){
      var form = document.createElement('form');
      var mail_r = document.createElement('input');
      var title_r = document.createElement('input');
      var content_r = document.createElement('input');

      form.method = 'POST';
      form.action = 'action formのURL';

      mail_r.type = 'hidden'; //入力フォームが表示されないように
      mail_r.name = 'entry.***';
      mail_r.value = v.email;

      title_r.type = 'hidden'; //入力フォームが表示されないように
      title_r.name = 'entry.***';
      title_r.value = v.title;

      content_r.type = 'hidden'; //入力フォームが表示されないように
      content_r.name = 'entry.****';
      content_r.value = v.content;

      form.appendChild(mail_r);
      form.appendChild(title_r);
      form.appendChild(content_r);
      document.body.appendChild(form);

      form.submit();
    }
  }
}
</script>