網頁開發 網頁設計

Form-Builder 線上表單產生器,可自訂必填位與審核機制

2019/08/07

梅問題-Form-Builder 線上表單產生器,可自訂必填位與審核機制
  雖然說現在使用Google表單,只需透過拖拉的方式,就可快速的打造所需的表單內容,再加上表單的應用層面相當的廣泛,像是聯絡表單、合作表單、團購表單、問卷表單…..,因此也深受大家的喜愛,但使用Google表單,所建製出來的畫面,就顯得有點簡陋,因此先前梅干曾分享過,自行客製化Google表單的畫面,但要自行客製化之前,得先將表單的架構給設計出來,這樣才能作後續的處理。

    設計表單的欄位並不困難,比較難的部分在於欄位審核,與那些欄位是必填的設定,應該就讓不少人感到頭大,因此最近梅干發現一個超酷的平台,可線上一鍵就能快速產生所需的表單內容,甚至還有審核與必填欄位的機制,更重要的一點是,完全不用寫到任何的Code,相當的簡單好用,因此有需要的朋友,現在也一塊來看看囉!


Form-Builder
網站名稱:Form-Builder
網站連結:https://builder.form-data.com/src/index.html

Step1
當進到這個表單產生器的平台後,分別會看到,畫面被分割成三等分,左邊為所有可建立的表單元素,中間則是表單的設定屬性,最右邊則是表單的預覽畫面。
梅問題-Form-Builder 線上表單產生器,可自訂必填位與審核機制
Step2
接著可先設定表單的版頭名稱與說明,而action是表單按下的發送位置,同時每個表單的欄位,則會用field包起來,因此相當容易分辨每個欄位的區塊,同時可由欄位的屬性,去設定欄位的說明與必填欄位。
梅問題-Form-Builder 線上表單產生器,可自訂必填位與審核機制
Step3
當欄位不是必填時,只需將required刪掉即可。
梅問題-Form-Builder 線上表單產生器,可自訂必填位與審核機制
Step4
表單都設計完畢後,再按上方的「Get HTML」。
梅問題-Form-Builder 線上表單產生器,可自訂必填位與審核機制
Step5
接著再按右上的鈕,把剛所建立的表單原始碼複製起來,再貼入自己的專案頁面中,這樣就可使用了,是不是超簡單的呀!
梅問題-Form-Builder 線上表單產生器,可自訂必填位與審核機制
#範例預覽