超實用Form-Builder 線上表單產生器» 網頁設計»

Form-Builder 提供的線上表單產生器完全FREE 免費，趕快為自己的網站上加入一個精美的聯絡表單吧！ Skiptocontent超實用Form-Builder線上表單產生器#WordPress,無料Free,網頁設計Date：2020-04-20Form-Builder線上表單產生器，輕鬆建立精美表單相信許多網站管理者都會在網站放上聯絡表單讓客戶方便聯繫，這樣確實能增加不少功能上的方便性。

加上目前Google表單的使用率相當普及且容易上手，我們只需要透過拖拉的方式，就可以快速完成所需要的表單內容，例如︰聯絡表單、團購單、問卷表…等等，都能輕鬆地使用Google表單建立完成，因此也被廣泛使用。

但使用Google表單所建立出來的頁面，往往有失美感且顯得簡陋，原本整體架構美觀的網站也可能因此被扣分。

然而不懂程式但想要在自己的網站上加入精美的聯絡表單，卻又不想使用Google提供的簡易表單時，「Form-Builder」絕對是你最好的選擇。

Form-Builder提供的線上表單產生器完全FREE免費，趕快為自己的網站上加入一個精美的聯絡表單吧！網　站：Form-Builder網　址：builder.form-data.com/src/安全性：高度安全進入「Form-Builder」後，我們會看到頁面分割為三個操作區域，分別為︰❶「表單項目」用來增加或減少欄位❷「表單原始碼」直接在此修改原始碼❸「預覽畫面」修改時同步顯示修改效果Form-Builder的每個表單欄位，都會用field包起來，因此很容易辨別欄位的區塊，現在我們依照每個欄位的原始碼去對應欄位的內容來做修改。

以圖片來說，白框框起來的內容即為區別每個欄位的屬性。

可以發現每個欄位都會用field做為開頭，結束則是以endfield做結尾。

舉例來說︰要修改表單上方的"ContactUs"文字，就在原始碼裡的第六行headerContactUs直接將ContactUs修改為"聯絡表單"即可。

Details標題如果不顯示，直接將sectionPersonalDetails刪除就可以。

原始碼裡的白色文字，都是可以直接進行修改的。

當欄位不需要必填時，只要將required刪除即可。

全部設定完成之後，按下左上方「GetHTML」按鈕。

最後按下右上方「COPYTOCLIPBOARD」，複製建立完成的表單原始碼，或是直接全選複製，再將原始碼置入自己的網站頁面中，就可輕鬆完成表單建置。

設計完成了精緻的表單，需要搭配php才能正常執行，如果沒有send.php可以下載我們提供的簡易範本。

DLSample518Bytes/RAR下載解壓縮後取得send-sample.php檔案，開啟修改mail及相關內容後再上傳到你的網域。

在Form-Builder複製下來的原始碼也別忘了要修改php的存放網址，才能正常執行喔～以下為Form-Builder完成範例參考表單。

相關CSS美化不在此多做說明聯絡我們姓名*Email*Wehatespamtoo.Wewillneverspamyou.連絡電話field_hint對易思生活的評價?*超棒的超讚的超優的超好的留言內容*THEEND擁有一個專屬自己風格及樣式的發信表單是不是很棒呢！趕快來為自己的網站建置一個吧！ReadMoreSSL憑證被標示為《不安全》！不可不慎！在頁面上實現變換字體大小的方法《二》在頁面上實現變換字體大小的方法《一》使用jQuery拆分垂直商品展示MoreDetail若圖片無法顯示或檔案無法下載，請至文章底下留言通知，將會盡速更正。

網站採用授權。

圖文請勿複製轉載，歡迎使用「分享」功能並註明出處。