vueで作成したformをGoogleフォームのアンケートと連動させるメモ
7790 ワード
はじめに
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>
Author And Source
この問題について(vueで作成したformをGoogleフォームのアンケートと連動させるメモ), 我々は、より多くの情報をここで見つけました https://qiita.com/Ryoma0413/items/ea6cd8d43071ba7b5e2a著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .