如果您要構建WordPress網站，則需要一個充分的理由不選擇WordPress表單插件。它們很方便，並提供了大量的自定義，這些定制需要大量的努力才能從頭開始構建。它們渲染HTML，驗證數據，存儲提交並與第三方服務提供集成。

但是，假設我們計劃將WordPress用作無頭CM。在這種情況下，我們將主要與REST API（或GraphQL）進行交互。前端部分完全成為我們的責任，我們不能再依靠表單插件來在該領域進行繁重的工作?，F在，當涉及到前端時，我們在駕駛員座位上。

表格是一個解決的問題，但現在我們必須決定如何處理它們。我們有幾個選擇：

• 如果有這樣的事情，我們是否會使用自己的自定義API？如果沒有，我們不想創(chuàng)建一個，我們可以使用一項服務。有許多良好的靜態(tài)表單提供商，而新的提供商則不斷彈出。
• 我們可以繼續(xù)使用已經使用並利用其驗證，存儲和集成的WordPress插件嗎？

最受歡迎的免費表格插件（聯繫方式7）具有提交的REST API端點，著名的付費插件，Gravity Forms等也是如此。

從技術角度來看，將表單的數據提交到服務或WordPress插件提供的端點之間沒有真正的區(qū)別。因此，我們必鬚根據不同的標準決定。價格是顯而易見的。之後，是WordPress安裝及其REST API的可用性。提交一個終點為前提，即始終公開可用。在服務方面，這已經很明顯，因為我們?yōu)樗麄兲峁┛捎玫馁M用。某些設置可能會將WordPress訪問僅限於編輯和構建過程。要考慮的另一件事是您要存儲數據的位置，尤其是在遵守GPDR法規(guī)的方式中。

在提交之外的功能方面，WordPress表單插件很難匹配。他們具有生態(tài)系統(tǒng)，可以生成報告，PDF，隨時可以與新聞通訊的集成以及付款服務。很少有服務在一個包裝中提供很多服務。

即使我們以WordPress主題為基礎的“傳統(tǒng)”方式以“傳統(tǒng)”方式使用WordPress，在許多情況下，使用表單插件的REST API也可能是有意義的。例如，如果我們使用公用設施優(yōu)先的CSS框架開發(fā)主題，則用固定的標記構成了用Bem式的類慣例進行構建的形式，在任何開發(fā)人員的嘴中都會產生酸味。

本文的目的是介紹兩個WordPress表單插件提交端點，並展示一種重新創(chuàng)建與形式相關的典型行為的方法，我們已經習慣了開箱即用。一般而言，提交表格時，我們必須處理兩個主要問題。一個是數據本身的提交，另一個是向用戶提供有意義的反饋。

所以，讓我們從那裡開始。

終點

提交數據是更簡單的部分。這兩個端點都期望一個發(fā)布請求，並且URL的動態(tài)部分是表單ID。

激活插件時，立即可立即使用Contact Form 7 REST API，看起來像這樣：

 https：//your-site.tld/wp-json/contact-form-7/v1/contact-forms/ <form_id>/反饋</form_id>

如果我們使用重力形式，則端點採用以下形狀：

 https：//your-site.tld/wp-json/gf/v2/forms/ <form_id>/combissions</form_id>

默認情況下禁用重力形式REST API。要啟用它，我們必須轉到插件的設置，然後轉到REST API頁面，然後檢查“啟用對API”選項。無需創(chuàng)建API鍵，因為表單提交端點不需要它。

更新（2024年9月10日）： ID在觸點7版本5.8中進行哈希，但仍可以在表單編輯頁面的URL中找到。

請求的正文

我們的示例表格有五個字段，具有以下規(guī)則：

• 必需的文本字段
• 必需的電子郵件字段
• 1957年10月4日之前接受日期的所需日期字段
• 可選的Textarea
• 必需的複選框

對於Contact表格7的請求的身體鑰匙，我們必須使用標籤語法來定義它們：

 {
  “ somebodys-name”：“瑪麗安·肯尼”，
  “ Any-Email”：“ [電子郵件保護]”，
  “前空間”：“ 1922-03-11”，
  “可選 - 消息”：“”，
  “偽造”：“ 1”
}

重力形式期望鑰匙以不同的格式。我們必須使用Input_前綴使用自動生成的增量字段ID。編輯字段時，ID是可見的。

 {
  “ input_1”：“瑪麗安·肯尼”，
  “ input_2”：“ [電子郵件保護]”，
  “ input_3”：“ 1922-03-11”，
  “ input_4”：“”，
  “ input_5_1”：“ 1”
}

提交數據

如果我們將預期的鍵用於輸入的名稱屬性，我們可以節(jié)省很多工作。否則，我們必須將輸入名稱映射到鍵。

將所有內容匯總在一起，我們得到了這樣的HTML結構，用於聯繫表7：

對於重力形式，我們只需要切換操作和名稱屬性：

由於所有必需的信息都可以在HTML中獲得，因此我們準備發(fā)送請求。一種方法是將FormData與獲取結合使用：

 const formsubmissionhandler =（event）=> {
  event.preventDefault（）;

  const formelement = event.target，
    {action，method} = formelement，
    身體=新的FormData（formelement）;

  fetch（動作，{
    方法，
    身體
  }））
    。
    。然後（（響應）=> {
      //確定提交是否無效
      if（isformsibmissionError（wendesp））{
        //有驗證錯誤時處理情況
      }
      //處理快樂的道路
    }））
    .catch（（錯誤）=> {
      //請求時處理案例
    }）;
};

const formelement = document.queryselector（“ form”）;

formelement.AddeventListener（“提交”，FormsUbmissionHandler）;

我們幾乎沒有努力發(fā)送提交，但至少可以說，用戶體驗不足。我們應盡可能多的指導成功地提交表格。至少，這意味著我們需要：

• 顯示全局錯誤或成功消息，
• 添加內聯字段驗證錯誤消息和可能的方向，以及
• 將注意力集中在需要特殊課程的零件上。

現場驗證

除了使用內置的HTML表單驗證外，我們還可以使用JavaScript進行其他客戶端驗證和/或利用服務器端驗證。

當涉及服務器端驗證時，聯繫表7和重力表格提供了框架，並作為響應的一部分返回驗證錯誤消息。這很方便，因為我們可以控制WordPress管理員的驗證規(guī)則。

對於更複雜的驗證規(guī)則，例如條件字段驗證，僅依靠服務器端可能是有意義的，因為將前端JavaScript驗證與插件設置同步可能成為維護問題。

如果我們僅處理服務器端驗證，那麼任務就會成為解析響應，提取相關數據以及DOM操作（例如插入元素和切換類名稱）。

響應消息

當存在驗證錯誤的情況下，響應7看起來像這樣：

 {
  “進入”： ”＃”，
  “狀態(tài)”：“ validation_failed”，
  “消息”：“一個或多個字段有錯誤。請檢查然後重試。
  “ post_data_hash”：“”，
  “ Invalid_fields”：[
    {
      “進入”：“ span.wpcf7-form-control-wrap.somebodys-name”，
      “消息”：“需要該字段。”，
      “ idref”：null，
      “ error_id”：“ -ve-somebodys-name”
    }，，
    {
      “進入”：“ span.wpcf7-form-control-wrap.any-email”，
      “消息”：“需要該字段?！?，
      “ idref”：null，
      “ error_id”：“ -ve-hony-email”
    }，，
    {
      “進入”：“ span.wpcf7-form-control-wrap.be前空間”，
      “消息”：“需要該字段?！?，
      “ idref”：null，
      “ error_id”：“ -ve-beforefore-foref-age”
    }，，
    {
      “進入”：“ span.wpcf7-form-control-wrap.fake-terms”，
      “消息”：“您必須在發(fā)送消息之前接受條款和條件?！保?      “ idref”：null，
      “ error_id”：“ -ve-fake-terms”
    }
  這是給出的
}

在成功提交時，響應看起來像這樣：

 {
  “進入”： ”＃”，
  “狀態(tài)”：“ mail_sent”，
  “消息”：“謝謝您的消息。它已發(fā)送?！?，
  “ past_data_hash”：“ D52F9F9DE995287195409FE6DCDE0C50”
}

與此相比，重力形式的驗證錯誤響應更緊湊：

 {
  “ is_valid”：false，
  “ validation_messages”：{
    “ 1”：“需要此字段?！?，
    “ 2”：“需要此字段?！?，
    “ 3”：“需要此字段?！?，
    “ 5”：“需要此字段。”
  }，，
  “ page_number”：1，
  “ source_page_number”：1
}

但是成功提交的回應更大：

 {
  “ is_valid”：是的，
  “ page_number”：0，
  “ source_page_number”：1，
  “ confircendation_message”：“ <div id="'gform_confirmation_wrapper_1'class"> <div id="'gform_confirmatim_message_1'class" gform_confirm_confirm_confirm_confirm_message_message_message>感謝我們接觸您！很快。</div> </div>”，
  “ cresence_type”：“消息”
}

儘管兩者都包含我們需要的信息，但它們並不遵循共同的慣例，並且都有怪癖。例如，重力表格中的確認消息包含HTML，驗證消息鍵沒有Input_前綴 - 我們發(fā)送請求時所需的前綴。另一方面，聯繫表7中的驗證錯誤包含僅與其前端實施相關的信息?，F場鍵無法立即使用；必須提取它們。

在這樣的情況下，最好選擇一種理想的格式，而不是與我們得到的響應合作。一旦有了，我們就可以找到將原始響應轉換為我們認為合適的方法的方法。如果我們將兩種情況中的最佳狀態(tài)結合在一起，並刪除用例中的無關零件，那麼我們最終得到了這樣的事情：

 {
  “ issuccess”：false，
  “消息”：“一個或多個字段有錯誤。請檢查然後重試。
  “ verationerror”：{
    “ Somebodys-name”：“需要此字段?！?，
    “ Any-Email”：“需要此字段?！保?    “ Input_3”：“需要此字段?！保?    “ Input_5”：“需要此字段。”
  }
}

在成功提交時，我們將設置為true並返回一個空驗證錯誤對象：

 {
  “ Issuccess”：是的，
  “消息”：“感謝您與我們聯繫！我們很快就會與您聯繫。
  “驗證”：{}
}

現在，這是將我們所獲得的東西轉變?yōu)樗璧膯栴}。標準化聯繫表7響應的代碼是：

 const narryizecontactform7Response =（wendesp）=> {
  //其他可能的狀態(tài)是不同的錯誤
  const issuccess = wenders.status ==='mail_sent';
  //為所有狀態(tài)提供一條消息
  const message = wendesp.message;
  const verationError = issuccess
    ？ {}
    ：//我們將一系列對象轉換為對象
    object.fromentries（
      response.invalid_fields.map（（錯誤）=> {
        //提取“ CF7-Form-Control-wrap”之後的零件
        const key = /cf7 [ -  az ]* .x.：foright.xectect：exec(ror.into）[1];

        返回[鍵，error.message];
      }））
    ）；

  返回 {
    Issuccess，
    訊息,
    驗證Error，
  };
};

標準化重力形式響應的代碼最終導致以下原因：

 const normanizeGravityFormSresponse =（wendesp）=> {
  //在回復中已經作為布爾提供了
  const issuccess = wendesp.is_valid;
  const消息= issuccess
    ？ //包裹在HTML中，我們可能不需要
      striphtml（response.confirmation_message）
    ：//沒有一般錯誤消息，所以我們設置了一個後備
      “您的提交有問題。”；
  const verationError = issuccess
    ？ {}
    ：//我們用前綴版本替換鍵；
      //這樣的方式和響應匹配
      object.fromentries（
        object.entries（
            響應。 validation_messages
        ）.map（（[鍵，值]）=> [`input _ $ {key}`，value]）
      ）；

  返回 {
    Issuccess，
    訊息,
    驗證Error，
  };
};

我們仍然缺少一種顯示驗證錯誤，成功消息和切換類的方法。但是，我們有一種整潔的方式來訪問所需的數據，並以輕抽取的方式刪除了響應中的所有不一致之處。將其放在一起時，就可以將其放入現有的代碼庫中，否則我們可以繼續(xù)在其頂部構建。

有很多方法可以解決其餘部分。有意義的事情將取決於項目。對於我們主要必須對狀態(tài)變化做出反應的情況，聲明性和反應性庫可以很有幫助。 Alpine.js在此處覆蓋在CSS-tricks上，這非常適合演示，並且在生產地點使用。幾乎沒有任何修改，我們可以重複上一個示例中的代碼。我們只需要在正確的位置添加適當的指示。

總結

匹配WordPress表單插件提供的前端體驗，可以相對簡單地簡單，無曲線的形式來完成，並且可以通過項目重複使用。我們甚至可以以一種使我們能夠切換插件而不會影響前端的方式來完成它。

當然，製作多頁面形式，上傳圖像的預覽或我們通常會烘烤到插件中的其他高級功能需要花費時間和精力，但是我們必須滿足的要求越獨特，使用提交端點就越有意義，因為我們不必在給定的前端實施方面努力解決許多問題，但從未解決過很多問題，但我們想要一個特定的問題。

使用WordPress作為無頭CMS訪問表單插件的REST API來登錄提交端點，肯定會成為更廣泛使用的實踐。這是值得探索和牢記的事情。將來，看到WordPress表單插件主要是在這樣的無頭環(huán)境中工作的，我不會感到驚訝。我可以想像一個插件，前端渲染是一個附加功能，不是其核心的組成部分。將會帶來什麼後果，如果它可以取得商業(yè)上的成功，仍然有待探索，但是一個令人著迷的觀看進化的空間。

以上是WordPress REST API提交無頭式的表單的詳細內容。更多資訊請關注PHP中文網其他相關文章！