1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. 網頁設計
  6. »
  7. 密技!梅干特製語法,一鍵抓取Google表單欄位技法大公開

密技!梅干特製語法,一鍵抓取Google表單欄位技法大公開

2021/11/05

梅問題-密技!梅干特製一鍵Google表單欄位抓取語法大公開
  Google表單到底有多好用,應該不用梅干多作著墨,同時Google表單的運用範圍也相當的廣泛,甚至操控也相當的簡易,因此最常被拿來製作成問券表單、團購、預約….等,雖然Google表單內建也有提供樣式的調整,但無論怎麼調整,也很難與專案頁面風格一致。

因此先前也曾分享過客製化Google表單,而客製化Google表單,最重要的一環就是,得將Google表單的欄位ID一一的抓取出來,再放置到自己的專案頁面中,如此一來就能讓表單與專案頁面的風格一致,而早期要抓取Google表單欄位ID相當的簡單,但自從Google表單不斷的調整架構後,現在要抓取欄位ID變得更加複雜,因此最近梅干最近將平常抓取的方式,寫成一段語法,只需要輸入後,立即就可將Google表單中的欄位抓取出來,因此想客製化Google表單的朋友,現在也一塊來看看梅干特製的密技吧!


Step1
首先先建立好自己所需的表單欄位,接著再按右上的眼睛圖示
梅問題-密技!梅干特製一鍵Google表單欄位抓取語法大公開
Step2
將表單設為公開後,再開啟網頁開發人員工具後,將頁籤切到Console後,再輸入梅干特製的語法後,按下Enter鍵,就會看到一串的HTML碼,再把這些HTML複製起來。

梅干特製的語法
for(var i=0; i<FB_PUBLIC_LOADDATA[1][1].length; i++){if(i==0){console.log('<form action="'+ window.location.href.replace('viewform','formResponse') +'" method="POST" target="_self">')};console.log('<label>'+FB_PUBLIC_LOADDATA[1][1][i][1]+'</label><input type="text" name="entry.'+FB_PUBLIC_LOADDATA[1][1][i][4][0][0]+'">');if(i == FB_PUBLIC_LOADDATA[1][1].length-1){console.log('<input type="submit" value="送出" id="submit_btn"></form>')}}
梅問題-密技!梅干特製一鍵Google表單欄位抓取語法大公開
Step3
再將剛的原始碼,貼到自己的專案頁面後,再把前方的文字刪除。
梅問題-密技!梅干特製一鍵Google表單欄位抓取語法大公開
Step4
在刪除並儲存完畢後,預覽畫面,再輸入資料測試看看,再輸入完畢後再按送出。
梅問題-密技!梅干特製一鍵Google表單欄位抓取語法大公開
Step5
鏘~鏘~這樣就把資料送進Google表單啦!是不是超簡單又方便呀!至於頁面中的表單,就可用CSS來作設定啦!而梅干也有錄了一小段影片,有需要的朋友,也可看教學影片。
梅問題-密技!梅干特製一鍵Google表單欄位抓取語法大公開