網頁開發 網頁設計

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

2017/07/21

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

  前幾天已分享,全客製化Google 2016新版的表單頁面,如此一來就可擺脫製式的Google表單樣式,讓表單版面設計風格更為一致,雖然在製作上,與舊版相比稍稍的複雜了許多,但相對的在版面的結構上也更加單純,甚至也可自行的設計防呆機制,而在表單中共會有二個頁面,一個是表單頁面,一個是完成頁面,當使用者填完表單送出後,就會自動跳轉到成功的頁面,告知使用已填寫完畢,但好不容易把表單的風格,設計的與活動版型一樣,當送出時又跳回到Google表單預設的成功畫面。


  所以接下來將要來分享,如何自訂Google表單在提交後,跳轉到自己所設計的頁面中,如此一來就能讓表單與完成頁面的風格一致,而此次方法無論是新舊版的Google表單皆適用,至於該怎麼作呢?方法很簡單,現在就一塊來看看吧!


Step1
首先,在form標籤中,加入 target=”hidden_iframe”
[html]
<form …. method="post" target="hidden_iframe">
[/html]
Step2
接著在form表單上方,加入iframe,並且將window.location,更改為要跳轉的完成頁面的html或網址。
[html]
<iframe name="hidden_iframe" id="hidden_iframe" style="display: none;" onload="this.onload=function(){window.location=’完成的頁面’}"></iframe>
[/html]
Step3
當完成後,把表單送出時,就會自動的跳轉到,剛所指定的頁面中啦!是不是超EZ的,而有在使用Google表單的朋友,下回也可試試看囉!
梅問題-客製化 Google 新/舊版表單提交後,跳轉到指定的網址或頁面

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