要做到這件事,最關鍵的是按下「提交」按鈕後,能否將網址跳轉到指定頁面。
其實為了維持網站的版面風格一致,就算不是為了這個案例的狀況,多數站長也會希望提交表單後,能跳到指定的、特別製作的感謝頁面,那麼以下就來看看怎麼進行。
(圖片出處: pixabay.com)
一、移植 Google 表單
首先按照「使用 Google 表單取代 Blogger 聯絡表單」的流程,從 Google 表單的原始碼中,擷取指示的 HTML 碼,移植到自己網頁的指定位置。
如果熟悉 CSS,可改成符合網頁風格的版面配置。
在進行下一步之前,務必先測試這個移植過的表單能否正常運作,確定自己能否收到填表後 Email 通知。
二、跳轉網址
這部分的原理是參照這個網頁「Google Docs Form redirect after submission」,不過我刪除了比較累贅的部分。
步驟 1:
接著修改移植過的 Google 表單程式碼,第一行應該是長得像這樣:
<form ... target="_self" ...>
請將紅色字串
步驟 2:
然後在第一行
<iframe name="hidden_iframe" id="hidden_iframe" style="display: none;" onload="this.onload=function(){window.location='填入指定網址'}"></iframe>
請將綠色字串改為你要跳轉的網址即可。
三、自訂感謝頁面
也許你會想要在 Blogger 新增一篇文章當作感謝頁面,不過感謝頁面若是有側邊欄,可能看起來不夠簡潔。
想要專業一點的版面,或許這個頁面能去除側邊欄、或把文章區塊的寬度放到最大,是不錯的選擇。
那麼可以參考這篇「讓 Blogger 有快速載入的展示頁面」,另外也可參考「讓 Blogger 文章頁面以最大寬度呈現(隱藏側邊欄)」,看讀者喜歡哪種方式了。
相關文章:
沒有留言:
張貼留言注意事項:
◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器,否則無法登入 Google 帳號留言(只能匿名留言)!
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」;或參考「Blogger 行動版範本修改技巧 」,或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢」
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。