客製化表單界面介接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!');
            });
    };

搜尋此網誌

Mirochiu's coding note

客製化表單界面介接Google Form

留言