Google 表單 用網址改變題目預設值

/

本篇要解決的問題

之前在一個購物網站購物,後來收到了一封要回填滿意度的 Google 表單,打開後看見竟然可以把訂單編號帶入預設值,覺得有趣,就看了一下是怎麼做到帶入預設值的?才發現只要在網址上加一點工,Google Forms 的欄位就可以有預設的答案。

本篇就是把過程用圖文記錄下來,不用寫程式碼,只要能找到需要的值就行了。

分享這個簡單的小方法給看到這篇的大家。


建立 Google 表單 + Demo

以下是 Augustus 為本篇建立的 Google 表單,可以看見「表單編號」那邊填入了預設值「12345678」:

找到欄位的 name

第一步,我們必須要知道欄位的 name 值,本篇用的 Google 表單可以看到就二個欄位:表單編號、從哪邊找到篇筆記文的(真心好奇,第二題請幫忙回答)。

在表單空白的地方點滑鼠右鍵,按下「檢查」:

點右鍵按 檢查
點右鍵按 檢查

畫面會出現一個顯示出本頁原始碼的面板:

開啟面板
開啟面板

在程式碼的地方隨便點一行,Windows 系統的話按下「ctrl + F」,Mac 系統則按下「command + F」,會看見出現一條搜尋框:

叫出程式碼中的搜尋框
叫出程式碼中的搜尋框

在搜尋框上輸入以下:

entry.

因為本篇 Demo 表單設的二題都是簡答,因此可以看見搜尋結果上顯示的有二行 input

由 entry. 搜尋出對應的 input
由 entry. 搜尋出對應的 input

這二個 input 就是我們表單上有的二題,程式碼上可以看到它們各自對應的 name 是什麼,input 的排列順序就是我們題目的順序,因此在這邊各自對應的是:

這是廣告,點擊一下可以幫本站多個一點點的廣告收入,謝謝

<!-- 表單ID -->
<input type="hidden" name="entry.266081733" value="">

<!-- 從哪邊找到篇筆記文的? -->
<input type="hidden" name="entry.1882183955" value="">

找到了各自的 name 值,下一步我們就可以把 name 加在網址上,並且改變預設值。


網址上加上 name,改變預設值

我們把 Google 表單分享給別人填答時,網址會是這樣:

https://docs.google.com/forms/d/e/xxxxxxxxxxx/viewform

如果我們想要更改的是「表單編號」這題的預設值,我們只要在網址的後面加上以下:

?表單編號的name值=我們想要給的預設值

? 這個是在網址上加入參數的串接符號,後面的規則就是 key=value 的格式,像本篇 Demo 的 key 就是「表單編號」這題的 name 值,value 就是我們想要給這題的預設值

我們在上一步有找到表單編號這題的 name 是:entry.266081733,所以我們分享出去的 Google 表單網址只要改成:

https://docs.google.com/forms/d/e/xxxxxxxxxxx/viewform?entry.266081733=12345678

那當使用者打開表單,就會跟我們一開始顯示的 Demo 一樣,表單編號那題就預設填入了 12345678。


2 題以上設預設值時的網址

這邊補充一下,上面寫加入 name=value 這邊是用 ? 這個符號串接,實際上 ? 只能用在第一個串接的參數上。

如果網址上想要串多個,比方我們表單上的 2 題都想要給預設值,就會有 2 個 name=value 要寫,這時的規則是:

第一個用 ? 號接,後面幾個用 & 接。

這是廣告,點擊一下可以幫本站多個一點點的廣告收入,謝謝

像這樣:

?key1=apple&key2=banana&key3=orange

所以像本篇的 Google 表單,如果 2 題都想要設預設值,網址可以寫成以下:

https://docs.google.com/forms/d/e/xxxxxxxxxxx/viewform?entry.266081733=12345678&entry.1882183955=從Google找到的

再比如,本篇第一段是用嵌入的,嵌入 Google Forms 給的原始碼是這樣:

<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSfUZogpCsFlfgZb5xcfteCaxQFDA-KR8BfAF2nCaInHLdjdvw/viewform?embedded=true" width="640" height="590" frameborder="0" marginheight="0" marginwidth="0">載入中…</iframe>

裡面的網址是:

https://docs.google.com/forms/d/e/1FAIpQLSfUZogpCsFlfgZb5xcfteCaxQFDA-KR8BfAF2nCaInHLdjdvw/viewform?embedded=true

因為 ? 已經拿來接了 embedded=true,所以如果我們要設表單編號的預設值,就是繼續往後用 & 接,變成:

<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSfUZogpCsFlfgZb5xcfteCaxQFDA-KR8BfAF2nCaInHLdjdvw/viewform?embedded=true&entry.266081733=12345678" width="640" height="590" frameborder="0" marginheight="0" marginwidth="0">載入中…</iframe>

以上,就是一個簡單好用的讓 Google 表單帶入預設值的方法。

在操作時會需要後端配合把每個值針對不同的會員或訂單編號來修改,如果一般小專案是用 Google 表單操作的話(但也有大公司大專案是用 Google 表單的),這是一個好用的方法。

Summary
Google表單 用網址改變題目預設值
Article Name
Google表單 用網址改變題目預設值
Description
本篇大綱:本篇要解決的問題。建立 Google 表單 + Demo。找到欄位的 name。網址上加上 name,改變預設值。2 題以上設預設值時的網址。
Augustus
Let's Write
Let's Write
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg

隨選筆記文

Bot Telegram

Telegram Login Widget,製作用 Telegram 登入功能

Apps Script Google

Google Apps Script 基本使用:跨網域 AJAX、接 Firebase

Google Maps

Google Maps API 學習筆記 – 1:地圖、標記、客製樣式

Google Others

Youtube Iframe API 常用功能

PWA

PWA 學習筆記 – 4:manifest.json

Front-End

一個簡單的卡片樣式 Simple Card UI

API

用 Performance API 檢測檔案讀取時間

Google Others

用 reCAPTCHA v2 來做非機器人驗證

Front-End

用 Microsoft Clarity 網站分析工具,觀察使用者行為

WordPress

Ubuntu 安裝 WordPress – 3:VM、資料庫權限、PHP、WordPress

訂閱
通知
guest
0 Comments
Inline Feedbacks
看所有留言

Let's Write

前端工程師 Augustus 的學習筆記 — solving problems, in simple ways.