天矽科技 line

天矽部落格最新的網路趨勢資訊

網站設計趨勢

如何在網頁中嵌入表單?輕鬆嵌入Google與SurveyCake表單|天矽科技網頁設計

部落格:如何在網頁中嵌入表單?輕鬆嵌入Google與SurveyCake表單|天矽科技網頁設計

 

嵌入表單的方式很簡單,只要建立表單並找到其中的HTML嵌入碼,再將該語法貼到編輯器的原始碼中,就可以將表單嵌入到網頁中,讓瀏覽者可以回饋意見!

網頁嵌入表單

 

快速前往
嵌入Google表單
嵌入SurveyCake表單

 當我們在部落格撰寫文章時,有時候會想要知道讀者的想法回饋,這時就可以利用「表單」的方式來做問卷調查,不過要怎麼在網站中嵌入「表單」呢?其實方法很簡單!

 以下就以最多人使用的「Google表單」與「SurveyCake」來介紹!

 

 

 使用Google表單來收集問卷是最方便也最多人使用的方式,我們只要建立表單再將HTML語法嵌入後台文章編輯器當中就可以使用表單功能囉!

 

Step1. 建立表單

建立表單

 


 

Step2. 點擊傳送表單選擇嵌入

 點選右上角的【傳送】後,選擇像這樣【<>】左右括號的符號即可看見【嵌入HTML】選項,找到後將iframe語法複製,若有需要調整寬度與高度也可以在這裡調整。

傳送表單

 


 

Step3. 貼到編輯器中

 到網站後台的編輯器中,找到原始碼開關,將原始碼選項打開後貼上,再關閉原始碼開關,即可預覽嵌入的樣子。

貼到編輯器中

嵌入預覽

 


 

Step4. 完成

 將文章儲存後,就完成嵌入囉!
 這時我們就可以回到前台查看表單,並且瀏覽到這篇文章的讀者也可以開始回饋意見了!

完成嵌入

 

 不過要記得,我們再建立表單的時候要開啟「接受回應」的選項喔!這樣我們才可以從後台看到回應的情況。

接受回應

 

 

 SurveyCake表單是一個來自台灣團隊所開發的問卷系統,也是目前較多人使用的問卷平台,我們只要建立一份表單再找到HTML嵌入語法,並將語法貼進後台編輯器中就可以使用囉!

 

Step1. 建立表單

建立表單

 


 

Step2. 分享問卷選擇嵌入碼

在建立完問卷後,會自動跳出【分享問卷】的各種選項,其中就有一個【嵌入碼】選項,將其iframe語法複製再貼到編輯器中即可。

嵌入碼

 

 如果不小心關閉問卷,我們可以在…「編輯問卷發布嵌入碼」找到選項並複製語法!

編輯問卷

問卷發布

 


 

Step3. 貼到編輯器中

 與Google表單嵌入方式相同,到網站後台的編輯器中,找到原始碼開關,將原始碼選項打開後貼上,再關閉原始碼開關,即可預覽嵌入的樣子。

編輯器預覽

 


 

Step4. 完成

 這時我們就可以回到前台查看表單,並且瀏覽到這篇文章的讀者也可以開始回饋意見了!回饋的結果就可以從後台查看囉!

後台看結果

▲ 後台看結果

 

前台顯示畫面

▲ 前台顯示畫面

 

回上一頁
信箱
客服
Line@