使用 Gutenberg 表單通過塊編輯器構建表單

已發表: 2020-06-16

對完美表單插件的追求幾乎與 WordPress 一樣古老。 項目來來去去。 那裡有一些很棒的表單插件,但選擇往往是在以自己的方式做事的大型構建者和簡單到無法達到預期的解決方案之間。 Munir Kamal 通過 Gutenberg Forms 進入這個飽和的市場,這是一個專為在塊編輯器中構建表單而設計的插件。

該插件絕不是完美的。 它有許多怪癖。 它做了很多正確的事情。 它有時會因可能改變遊戲規則的功能而失敗。 它有可能成為 WordPress 最好的表單構建插件之一。

從最新的更新版本 1.4.0 開始,Gutenberg Forms 的成功和挫敗感參差不齊。 我很興奮。

我很興奮,因為我們仍處於該插件生命週期的早期階段。 我很興奮,因為 Kamal 在短時間內建立了一些成功的 Gutenberg 相關項目,包括 Gutenberg Hub 和 ACF Blocks。 我很興奮,因為我相信它會隨著時間的推移而改善。

表單插件並不容易。 儘管我們將解決當前的問題,但 Gutenberg Forms 是一個有用的插件,它勾選了我希望在表單構建器中看到的許多框。 基於塊的表單所需的想法已經到位。 執行只需要一些改進。

Gutenberg Forms 於今年 2 月重新創建。 Kamal 最初於 2018 年發布了該插件,但在他使用最新的 API 更新之前,它擱置了一年半。 從那時起,他一直在流淚,發布頻繁的更新並改進插件的工作方式。 幾個月前我第一次測試它,對結果不滿意。 然而,最新的迭代顯示出更多的希望。

目前只有 200 多個用戶,插件最需要的是來自更多用戶的更多反饋。

建築形式

使用 Gutenberg Forms 插件創建標準表單。
創建標準表格。

Gutenberg Forms 使表單構建變得簡單。 在插件中有兩種構建表單的方法。 第一種方法是管理員中的自定義“表單”屏幕。 它是一種自定義帖子類型,就像帖子或頁面一樣工作。 不同之處在於用戶僅限於添加插件提供的表單字段。 使用這種構建表單的方法是理想的,因為表單保存在一個地方,並且可以在站點的任何地方使用。

第二種方法是直接從帖子或頁面編輯器構建表單。 所有插件的自定義塊都可用於創建自定義表單。 對於一次性表單,這可能是要使用的方法,但我建議改為從表單屏幕構建。

通過表單屏幕構建表單後,用戶可以稍後使用古騰堡表單塊插入保存的表單。 插入此塊時實際發生的情況是,當選擇保存的表單時,插件會在編輯器中插入一個短代碼。 這是插件的怪癖之一。 構建塊的想法之一是讓開發人員不再使用短代碼系統。 從技術角度來看,無需在此處混入短代碼。 它應該只是一個服務器端塊。 我認為這對最終用戶來說並不重要。 有用。 我希望從長遠來看,這只是一個奇怪的現象。

使用 Gutenberg Forms 插件將保存的表單插入頁面。
將保存的表單插入頁面。

該插件提供了最終用戶希望在表單插件中看到的大多數常見表單字段。 以下是當前可用的表單域塊:

  • 計算
  • 複選框
  • 日期選擇器
  • 電子郵件
  • 文件
  • 表單按鈕
  • 信息
  • 名稱
  • 數字
  • 電話
  • 收音機
  • 選擇
  • 文本
  • 網站
  • 是/否

Gutenberg Forms 還包括其他不用於輸出字段的塊。 表單列塊允許最終用戶創建列字段。 這適用於需要水平排列的字段,例如城市、州和郵政編碼字段。 表單組塊允許用戶對多個塊進行分組。 它還具有多種設計選項,包括自定義顏色和填充。 表單步驟塊對於在多步驟表單中添加步驟很有用。

最大但最不完善的功能是 Gutenberg Forms 提供的預先設計的模板庫。 目前,該插件有大約三打自定義模板。 鑑於 Kamal 在 Gutenberg Hub 使用模板的工作,我猜想我們將來會看到更多模板。

使用 Gutenberg Forms WordPress 插件將表單模板插入頁面。
將表單模板插入頁面。

問題? 表單模板插入器並不總是有效。

針對最新的 WordPress 和 Gutenberg 插件測試插件,我無法通過新的表單屏幕插入任何表單模板。 存在阻止插入它的 JavaScript 錯誤。 該插件最令人興奮的功能之一無法運行,至少在我的測試環境中,有點令人失望。

雖然在表單構建屏幕上插入模板不起作用,但在頁面編輯屏幕上構建一次性表單時它確實起作用。 但是,對於某些插入後的塊,我確實收到了可怕的“此塊包含意外或無效內容”消息。

這個問題並非不可克服。 古騰堡項目處於不斷變化的狀態。 我現在原諒這些類型的問題,因為事情如此不穩定,而且我也知道它們可以在更新中得到解決。 但是,我確實想為可能需要在其生產環境中更完善的東西的用戶指出它們。 您可以在沒有模板功能的情況下輕鬆構建表單。

最後的想法

是的,Gutenberg Forms 的邊緣有點粗糙。 它還不能與表單市場中的其他一些主要參與者競爭。 然而,從現在開始的六個月或一年後,假設持續改進,它應該能夠開始切自己的一塊餡餅。

該插件還有一些其他的挑剔。 例如,某些塊可用的“內聯”塊樣式無法重置為默認值。 Checkbox 塊名稱中的“C”是小寫的,而所有其他塊名稱都以大寫字母開頭。 這些小事情使插件看起來不如它本身那麼精緻。

即使有我概述的問題,我還是建議市場上的人們使用基於塊的表單構建器來測試這個插件。 它的簡單性將使其成為許多人的簡單選擇。 在大多數情況下,它運作良好。 歸根結底,它允許您構建表單並將這些表單的提交直接存儲在數據庫中,這才是真正重要的。

我堅信我們正處於一些特別的開始。 在我們到達那里之前只需要一點時間。 即使 Gutenberg Forms 沒有接管表單構建器市場,其他插件開發人員也應該開始從這個插件的工作中獲取線索。