超實用 Form-Builder 線上表單產生器

Form-Builder 線上表單產生器,輕鬆建立精美表單
相信許多網站管理者都會在網站放上聯絡表單讓客戶方便聯繫,這樣確實能增加不少功能上的方便性。加上目前 Google 表單的使用率相當普及且容易上手,我們只需要透過拖拉的方式,就可以快速完成所需要的表單內容,例如︰聯絡表單、團購單、問卷表…等等,都能輕鬆地使用 Google 表單建立完成,因此也被廣泛使用。但使用 Google 表單所建立出來的頁面,往往有失美感且顯得簡陋,原本整體架構美觀的網站也可能因此被扣分。
然而不懂程式但想要在自己的網站上加入精美的聯絡表單,卻又不想使用 Google 提供的簡易表單時,「Form-Builder」絕對是你最好的選擇。
Form-Builder 提供的線上表單產生器完全 FREE 免費,趕快為自己的網站上加入一個精美的聯絡表單吧!
進入「Form-Builder」後,我們會看到頁面分割為三個操作區域,分別為︰
❶「表單項目」用來增加或減少欄位
❷「表單原始碼」直接在此修改原始碼
❸「預覽畫面」修改時同步顯示修改效果
Form-Builder 的每個表單欄位,都會用field包起來,因此很容易辨別欄位的區塊,現在我們依照每個欄位的原始碼去對應欄位的內容來做修改。
以圖片來說,白框框起來的內容即為區別每個欄位的屬性。可以發現每個欄位都會用field做為開頭,結束則是以end field做結尾。
舉例來說︰要修改表單上方的"Contact Us"文字,就在原始碼裡的第六行header Contact Us直接將Contact Us修改為"聯絡表單"即可。
Details 標題如果不顯示,直接將section Personal Details刪除就可以。
原始碼裡的白色文字,都是可以直接進行修改的。
當欄位不需要必填時,只要將required刪除即可。
全部設定完成之後,按下左上方「Get HTML」按鈕。
最後按下右上方「COPY TO CLIPBOARD」,複製建立完成的表單原始碼,或是直接全選複製,再將原始碼置入自己的網站頁面中,就可輕鬆完成表單建置。
設計完成了精緻的表單,需要搭配 php 才能正常執行,如果沒有 send.php 可以下載我們提供的簡易範本。
518 Bytes / RAR
下載解壓縮後取得 send-sample.php 檔案,開啟修改 mail 及相關內容後再上傳到你的網域。在 Form-Builder 複製下來的原始碼也別忘了要修改 php 的存放網址,才能正常執行喔~
以下為 Form-Builder 完成範例參考表單。相關 CSS 美化不在此多做說明

聯絡我們

field_hint
對易思生活的評價?*
THE END
擁有一個專屬自己風格及樣式的發信表單是不是很棒呢!趕快來為自己的網站建置一個吧!
Read More
More Detail