網頁設計, 網頁資源

客製化 Google 新/舊版表單提交後,跳轉到指定的網址或頁面

梅干 2017/07/21
梅問題-客製化 Google 新/舊版表單提交後,跳轉到指定的網址或頁面
  前幾天已分享,全客製化Google 2016新版的表單頁面,如此一來就可擺脫製式的Google表單樣式,讓表單版面設計風格更為一致,雖然在製作上,與舊版相比稍稍的複雜了許多,但相對的在版面的結構上也更加單純,甚至也可自行的設計防呆機制,而在表單中共會有二個頁面,一個是表單頁面,一個是完成頁面,當使用者填完表單送出後,就會自動跳轉到成功的頁面,告知使用已填寫完畢,但好不容易把表單的風格,設計的與活動版型一樣,當送出時又跳回到Google表單預設的成功畫面。
  所以接下來將要來分享,如何自訂Google表單在提交後,跳轉到自己所設計的頁面中,如此一來就能讓表單與完成頁面的風格一致,而此次方法無論是新舊版的Google表單皆適用,至於該怎麼作呢?方法很簡單,現在就一塊來看看吧!
Step1
首先,在form標籤中,加入 target="hidden_iframe"
 <form .... method="post" target="hidden_iframe">

Step2
接著在form表單上方,加入iframe,並且將window.location,更改為要跳轉的完成頁面的html或網址。
<iframe name="hidden_iframe" id="hidden_iframe" style="display: none;"  onload="this.onload=function(){window.location='完成的頁面'}"></iframe>

Step3
當完成後,把表單送出時,就會自動的跳轉到,剛所指定的頁面中啦!是不是超EZ的,而有在使用Google表單的朋友,下回也可試試看囉!
梅問題-客製化 Google 新/舊版表單提交後,跳轉到指定的網址或頁面
梅問題-客製化 Google 新/舊版表單提交後,跳轉到指定的網址或頁面