網站內嵌元件

1. 甚麼是網站內嵌？

Ragic有一個非常實用的網站內嵌功能，你可以內嵌表單到你的網站或是傳送連結給其他人。當你建立好表單時，即可使用這些網站內嵌功能。

意思是說，一旦嵌在網頁上的表單被提交後便會被儲存在資料庫裡，你就可以內嵌表單到你的網站或是讓你的客戶使用你的資料，甚至瀏覽你的整個資料庫。

2. 嵌入你的資料庫

要使用網頁內嵌功能的話，點選工具裡的嵌入這張表單。

你可以選擇以下六種的網站內嵌元件型式。

點選其中一種之後，Ragic會給你一段HTML原始碼，你可以複製貼上在任何你想要嵌入的網站內。你也可以將專屬於你的表單直接在獨立的網頁內呈現。

另外Ragic也支援內嵌Wordpress 喔！

3. 內嵌元件

你可以根據不同的需求來決定要使用哪種網站內嵌元件。下表是每一種網站內嵌元件的簡短介紹(也可以點擊元件名稱看詳細介紹)，你可以根據你的使用目的來決定要使用哪一種網站內嵌元件。

在選定嵌入方式後，你也可以透過「增加自訂CSS」來針對各內嵌功能做修改。

3.1. 資料庫瀏覽

資料庫瀏覽讓你網站的使用者可以連結到所有資料的列表，並且利用這樣的功能瀏覽這個表單上他權限內看得到的資料。你可以透過Ragic的存取權限來設定網站使用者的權限，如果有需要的話也有將整個資料庫設為公開的選項。

然後在你選了資料庫瀏覽之後可以看到目前有以下幾種不同的呈現方式可以選擇。

而瀏覽者也能夠在資料庫中點選資料，進一步觀看更詳細的資料，就如同在列表頁與表單頁一樣。

3.1.1. 瀏覽呈現方式

選擇列表的話資料就會以類似列表頁的形式呈現。

選擇方格的話，你的資料就會根據你所選擇的欄位以一列一列的方式呈現。而將滑鼠移到文字上，就可以看到該段文字是從哪個欄位抓來的。您可以用下方出現的下拉選單，變更這段文字對應到的資料庫欄位。

要是你的資料有包含圖片的話，相簿會是一個非常好的選擇。圖片會以縮圖的方式呈現，相關的欄位也會呈現在那一格中。「相簿」格式跟「方格」一樣，只要將滑鼠移到文字上，就可以變更這段文字對應到的資料庫欄位。

3.2. 資料庫查詢

資料庫查詢讓網站使用者可以根據你所設定的欄位條件來查詢你的資料庫。

你不僅可以預設要呈現哪些可供查詢的欄位，還可以修改他們的順序。點擊設定預設查詢欄位來修改即可。

而這些查詢欄位的輸入型態會跟我們在表單頁看到的一樣。例如：你在表單頁把欄位的輸入型態設為選項，點擊查詢欄位時就會跑出下拉式清單讓你能夠選擇不同種類。

在使用者把查詢條件設定好並且送出之後，符合搜索條件的資料就會根據你在3.1.1設定的呈現方式呈現。

而查詢者也能夠點選這些查詢過後的資料，進一步觀看更詳細內容，就如同在列表頁與表單頁一樣。

3.2.1. 資料庫查詢精確模式

針對資料庫查詢以及資料庫查詢瀏覽這兩種內嵌工具，我們提供了精確模式的設定，讓你在表單沒有將EVERYONE群組的權限開放時，使用者在輸入完整比對條件的情況下可以找尋到資料。詳細設定說明及運用案例可以參考這篇文件。

3.3. 填寫表單

利用這項功能，你可以嵌入表單來讓網站使用者填寫問卷、回報資訊。當使用者填寫完資料並且送出之後，資料就會自動存進資料庫了。

選擇「填寫表單」內嵌元件後，系統會讓你看到使用此元件時的預覽畫面。你可以點擊最上方的區塊，調整內嵌表單的外觀，包含：橫幅(banner)、主題顏色、以及欄位排列的順序。（有特別需要也可以選擇「切換為舊版」，新舊版的差異與說明請見此連結）

橫幅設定

我們已經設計好的圖片供你套用，你也可以點擊「上傳橫幅」上傳自己電腦裡的圖檔，建議圖檔尺寸為 1500 x 300 。

欄位排序設定

為了在不同裝置上都能以使用者友善的方式呈現資訊，新版填寫表單的內嵌元件和 Ragic app 一樣採用單欄排版格式，系統會先依照「由左至右、再由上至下」的邏輯來排列表單中的欄位順序，但有需要的話你也可以在這裡手動調整排序。只要點選欲調整的欄位，再點擊右方的上下箭頭，就可以往上或往下移動欄位位置，記得點「儲存設定」來儲存排序。

預先填入值設定

若你希望使用者在填寫表單中特定欄位時能夠帶入預設值，你就可以利用這個功能。例如：報名企業內訓時，希望相應部門的使用者能夠快速帶入自己的產品別及部門，這時候就能夠設定預先填入值範本，也可以設定多個範本給不同部門的報名者使用，範本設定完成後，可以點擊想要選取的範本(反灰)並儲存設定。

最後就可以將套用行銷部範本的內嵌表單連結提供給行銷部人員使用，開啟表單連結時就會預先帶入範本中設定的產品別及部門。

選項欄位呈現方式

表單裡有從選單選擇欄位，且選項少於 5 個的話，除了下拉式選單，你也可以選擇用「選項按鈕」的樣子呈現這些選項。可以透過點擊預覽畫面裡該欄位下方的「變更顯示方式」來切換顯示方式，如下圖。（註：選項大於 5 個，或選項屬於子表格欄位、連動選項的話，只能以下拉選單方式呈現，不支援以按鈕樣式顯示。）

從其他表單選擇除了支援以下拉選單方式呈現，還可透過變更連結欄位選項顯示方式選項，切換為連結表單列表頁形式：

請注意連結表單列表頁呈現形式，會顯示出該連結表單列表頁上所有欄位。

選項欄位也可以設定在填答時讓「選項隨機排序」。

在預覽畫面的左下角，你一樣可以透過「增加自訂CSS」的功能，進一步修改嵌入樣式。

表單填寫階段的預覽畫面設定完成後，點「下一步」，可以設定別人填寫完表單後，會看到怎樣的訊息，設定畫面如下圖。

你可以透過點選設定畫面上的標籤，來選擇以純文字或 HTML 語法的形式來呈現這些訊息。假設你點選下圖「一般文字」，表單填寫完畢後的顯示訊息就是純文字格式；而如果點選的是「HTML」標籤，則你可以在訊息文字框中添加 HTML 語法，表單填寫完畢後的訊息就會呈現出對應的結果，例如超連結。

在訊息文字框下方，勾選增加驗證碼機制

填寫內嵌表單時最下方的區塊就會增加用來防範機器人的驗證機制。

勾選顯示填寫新的一筆資料功能連結

送出資料後，就會顯示再次填寫資料的連結。

若希望在使用者填寫問卷時自動在特定欄位中填入指定的值，可以在網址中加上 pfv 參數來達成，編寫方式：

https://www.ragic.com/ramzawang01/forms2/4?webview&webaction=form&ver=new&pfv欄位編號=填入內容

如需下多組條件，則使用 & 連結：

https://www.ragic.com/ramzawang01/forms2/4?webview&webaction=form&ver=new&pfv欄位編號1=填入內容1&pfv欄位編號2=填入內容2...

編寫方式由三部分合併而成：

1. 內嵌工具自動產生的網址：例如 https://www.ragic.com/ramzawang01/forms2/4?webview&webaction=form&ver=new

2. 欄位編號：為你想要自動填入值的欄位ID ，例如 1002358

3. 填入內容：為你希望在該欄位中自動填入的值

完成上述網址後，當使用者點擊連結，系統即會自動在指定欄位中輸入指定的值。

3.4. 搜尋引擎

網站使用者可以利用這個搜尋引擎輸入關鍵字搜索資料庫的內容。

而搜尋的結果就會根據你在3.1.1設定的呈現方式呈現。而搜尋者也能夠點選這些搜尋過後的資料，進一步觀看更詳細的內容，就如同在列表頁與表單頁一樣。

3.5. 資料庫查詢瀏覽

此內嵌工具其實是資料庫查詢+資料庫瀏覽的化身，有別於原本資料庫查詢的功能，查詢後會進入搜尋結果的畫面，這邊則是會顯示在同一畫面上，上面根據輸入條件查詢後，下面直接顯示搜尋的結果。

3.5.1. 資料庫查詢瀏覽精確模式

針對資料庫查詢以及資料庫查詢瀏覽這兩種內嵌工具，我們提供了精確模式的設定，讓你在表單沒有將EVERYONE群組的權限開放時，使用者在輸入完整比對條件的情況下可以找尋到資料。詳細設定說明及運用案例可以參考這篇文件。

3.5.2. 顯示登出按鈕

若選擇顯示登出按鈕，在資料庫查詢頁面的右上方機會有一個可讓使用者點擊來登出的按鈕。

3.6. 直接嵌入

跟上述幾種嵌入方式不同，直接嵌入可以在網頁中嵌入與Ragic完全一樣的使用者介面。不過要是你沒有設計公開表單給使用者的話，他們就需登入來存取你的帳戶。

可以進一步預設你的介面要不要提供以下三種功能，表單用來新增資料、顯示左方搜尋功能和顯示上方按鈕。

設定好了以後你就可以剪貼程式碼到你的網頁上來嵌入Ragic。

如果要利用全文檢索的功能搜尋資料的話，可以利用右上方的放大鏡進行搜尋。

4. 存取權限

一個使用網站內嵌的好處是你不需要幫使用者購買帳號，因為內嵌表單的權限會跟你在Ragic表單設定的權限一樣，因此你只要將表單設為公開，訪客即可使用。

也因此，如果你的表單權限沒有設成公開的話，未登入的訪客在你的網站看到的會是要求登入的畫面

(資料庫查詢瀏覽例外)

資料庫查詢瀏覽精確模式及資料庫瀏覽精確模式為特殊處理，因此不需要開放表單權限使用者依然能夠在完整比對條件的情況下查詢資料。