客製化表單界面介接Google Form

因為業主希望有免費解決方案,所以就推薦了直接用google form當作資料蒐集的後端伺服器。不過說真的,這作法有很大的侷限性,在於資料的驗證與反饋上,業主覺得免費就好這些沒關係的。

一開始參考google搜尋的第一筆"完全客製 Google 表單,美化表單樣式"這篇,前面步驟都正常,不過最後丟request部份Google Form完全收不到。確認其他搜尋方法,其實只要用一般的Form post丟出去就好。


在Google Form表單中按右鍵查看網頁原始碼

1. 搜索form action表單回應的URL,會以formResponse結尾

2. 查看填寫各個表單元素,我這裡Name2GForm寫我自己表單元件對應到Google Form元件

const Name2GForm = {
name: 'entry.887669349',
phone: 'entry.73178880',
email: 'entry.1073636329',
birthday: 'entry.1303006220',
'id-card-number': 'entry.1577585336',
'wallet-address': 'entry.1641321106',
};

在React裡頭用FormData去處理。要注意的是因為這種作法因為Google Form有設定CORS,所以我們無法接收伺服器response,會遭到瀏覽器阻擋,只會得到error,所以最後我們使用finally來當作完成處理的回應。

const onSubmit = e => {
e.preventDefault();
const form = e.target;
const formData = new FormData();
Object.keys(Name2GForm).forEach(nameInForm => {
const val = form[nameInForm].value;
const name = Name2GForm[nameInForm];
if (val != null || name != null) {
formData.append(name, val);
}
}, {});
fetch(
'https://docs.google.com/forms/u/0/d/e/{FORM_ID}/formResponse',
{ method: 'POST', body: formData }
)
.finally(() => {
console.log('post done!');
});
};


留言