如何利用Google Doc製作線上諮詢表單[進階版]

上次分享了Google Docs表單的基本表單

這次要分享的是進階版的囉!

進階版的有什麼不同呢?

上一次做出來的表單崁入網頁中會變成如下頁面中的狀況

https://www.arno.tw/contact-01/(點連結可看完整的表單)

沒錯，如上圖，會有「破版」的現象

今天

我如上次所說

以我自已建立的室內公司[線上諮詢]的表單為例

建立了如下的表單

室內公司 Google Doc 表單(點連結可看完整的表單)

Google的表單是非常方便沒錯

至如果你要做出＿房＿廳＿衛浴類似的填空怎麼辦?

Google表單沒辦法做出這麼精細的表單吧(至少據我目前所知:D)

而ARNO現在就是要和大家分享怎麼做出如下圖的進階型表單!

首先，將Google表單內碼拆解出來

打開這個網址

https://sneakysheep.com/google-docs-form-tool-version-2/

按照下圖我的說明填上

在Redirect to的部份我填入https://www.arno.tw/

裡面應是放置感謝您的意見諸如此類的內容

可以做到相當好的客製化哦!

一般商品性網站會建議在這個填寫完表格的下面放上一些推薦商品給客人參考。

填寫完後按【Submit】

下面會出現處理完畢如下圖

接著如下圖

先按【Select】，接著在下面反白處按右鍵複製全部的原始碼

編輯取得的Google文件原始碼

下面要使用Dreamweaver或其它的網頁編輯軟體

在軟體中任意開啟一個空白的新檔案

將原始碼的部份全部清除

並貼上剛才取得的原始碼

你會看到原始碼現在應該是有點凌亂

比如說你看到的「個案性質：」

在原始碼中顯示的是「個案性質：」

這時候要請你自已整理一下原始碼囉~(目前還沒找到比較好的解決方案)

整理方式如下

如下圖把中文的如「個案性質：」複製下來

再把上面那串亂碼「個案性質：」

每一個中文都要如下圖

原始碼中的亂碼變成了文字

如果沒時間整理的話可以先載ARNO我整理好的檔案哦~

(按右鍵另存新檔)

覺得現在Dreamweaver裡面的原始碼很亂嗎?

第一次處理時也是覺得很亂

但Dreamweaver有一個大絕招哦!

可以一次將全部的原始碼整理的階層分明!

將全部的原始碼選取

按畫面最上面的「命令」中選取「套用原始碼格式」

現在的原始碼是不是乖乖按階層排列好了呢:D

原始碼全都要整理成如下的乾淨狀態哦!

原本的(下圖)

整理完後的狀態

提交詢問單的按鈕本來是「Submit」，

只要更改後面的「Value」內的值如下圖，

就可以任意改成喜歡的口語化囉!

可將上圖改成如下圖

整理其實需要一點時間

也要有一點程式碼概念比較能整得得好

如果沒時間整理的話可以先載ARNO我整理好的檔案哦~

(按右鍵另存新檔)

辛苦到現在

終於可以開始真正的自訂自已的表單囉~

大家可以按照個人喜好的方式，

並參考我排版的方式

接下來要將表單放進頁面中囉!

請確認Wordpress已經安裝了【Disable WPAUTOP】

它可以防止Wordpress主動將php的程式碼加上p標籤

那將會導致表單送出失敗以及無法跳轉到填寫完成的頁面!

將整理好的內碼開始放到網頁、文章或頁面中

這裡示範的是將它放到Wordpress的頁面之中當作給室內設計訪客填寫用的

首先如圖指示要按的地方

意為選取整個「form」標籤裡全部的內容

接著複製此處的原始碼

把它貼到Wordpress的編輯欄位(記得切換到HTML模式下哦)

把原始碼貼到裡面

再將執行程式碼貼進去

在「form」標籤的開始往上

從上圖圈選的地方開始往上選取

一直往上選取至下圖標示的地方

(共約65行原始碼)

將它複製起來

回到Wordpress編輯器中

將原始碼貼至"form"標籤的「前面」

好的!

現在就儲存檔案並預覽看看~

看是否可以正確進行下面的流程!

填寫表單並送出
送出後自動跳轉到指定的填寫完成頁面
是否能在Google Doc的表單頁面看到填寫的資料呢?(如下圖)

如果希望有訪客填寫完之後會寄E-mail通知你的話

請參加上一篇後面寫的「設定通知E-mail」來設定哦!

現在

就來看看辛苦做出來的進階版線上諮詢表單囉!

雖然這個作法可說是頗為麻煩

但熟練的人半小時至一小時內一定能完成

想要測試我的表單發出實際狀況的

可以留言或E-mail給我分享Google Doc表單給你哦;)

那樣你就可以測試填寫表單→送出→看到填寫成果了

有任何問題或需要幫忙

Contact me please ~