如果您要構(gòu)建WordPress網(wǎng)站，則需要一個(gè)充分的理由不選擇WordPress表單插件。它們很方便，并提供了大量的自定義，這些定制需要大量的努力才能從頭開始構(gòu)建。它們渲染HTML，驗(yàn)證數(shù)據(jù)，存儲(chǔ)提交并與第三方服務(wù)提供集成。

但是，假設(shè)我們計(jì)劃將WordPress用作無(wú)頭CM。在這種情況下，我們將主要與REST API（或GraphQL）進(jìn)行交互。前端部分完全成為我們的責(zé)任，我們不能再依靠表單插件來在該領(lǐng)域進(jìn)行繁重的工作。現(xiàn)在，當(dāng)涉及到前端時(shí)，我們?cè)隈{駛員座位上。

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

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

最受歡迎的免費(fèi)表格插件（聯(lián)系方式7）具有提交的REST API端點(diǎn)，著名的付費(fèi)插件，Gravity Forms等也是如此。

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

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

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

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

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

終點(diǎn)

提交數(shù)據(jù)是更簡(jiǎn)單的部分。這兩個(gè)端點(diǎn)都期望一個(gè)發(fā)布請(qǐng)求，并且URL的動(dòng)態(tài)部分是表單ID。

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

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

如果我們使用重力形式，則端點(diǎn)采用以下形狀：

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

默認(rèn)情況下禁用重力形式REST API。要啟用它，我們必須轉(zhuǎn)到插件的設(shè)置，然后轉(zhuǎn)到REST API頁(yè)面，然后檢查“啟用對(duì)API”選項(xiàng)。無(wú)需創(chuàng)建API鍵，因?yàn)楸韱翁峤欢它c(diǎn)不需要它。

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

請(qǐng)求的正文

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

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

對(duì)于Contact表格7的請(qǐng)求的身體鑰匙，我們必須使用標(biāo)簽語(yǔ)法來定義它們：

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

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

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

提交數(shù)據(jù)

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

將所有內(nèi)容匯總在一起，我們得到了這樣的HTML結(jié)構(gòu)，用于聯(lián)系表7：

對(duì)于重力形式，我們只需要切換操作和名稱屬性：

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

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

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

  fetch（動(dòng)作，{
    方法，
    身體
  }））
    。
    。然后（（響應(yīng)）=> {
      //確定提交是否無(wú)效
      if（isformsibmissionError（wendesp））{
        //有驗(yàn)證錯(cuò)誤時(shí)處理情況
      }
      //處理快樂的道路
    }））
    .catch（（錯(cuò)誤）=> {
      //請(qǐng)求時(shí)處理案例
    }）;
};

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

formelement.AddeventListener（“提交”，F(xiàn)ormsUbmissionHandler）;

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

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

現(xiàn)場(chǎng)驗(yàn)證

除了使用內(nèi)置的HTML表單驗(yàn)證外，我們還可以使用JavaScript進(jìn)行其他客戶端驗(yàn)證和/或利用服務(wù)器端驗(yàn)證。

當(dāng)涉及服務(wù)器端驗(yàn)證時(shí)，聯(lián)系表7和重力表格提供了框架，并作為響應(yīng)的一部分返回驗(yàn)證錯(cuò)誤消息。這很方便，因?yàn)槲覀兛梢钥刂芖ordPress管理員的驗(yàn)證規(guī)則。

對(duì)于更復(fù)雜的驗(yàn)證規(guī)則，例如條件字段驗(yàn)證，僅依靠服務(wù)器端可能是有意義的，因?yàn)閷⑶岸薐avaScript驗(yàn)證與插件設(shè)置同步可能成為維護(hù)問題。

如果我們僅處理服務(wù)器端驗(yàn)證，那么任務(wù)就會(huì)成為解析響應(yīng)，提取相關(guān)數(shù)據(jù)以及DOM操作（例如插入元素和切換類名稱）。

響應(yīng)消息

當(dāng)存在驗(yàn)證錯(cuò)誤的情況下，響應(yīng)7看起來像這樣：

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

在成功提交時(shí)，響應(yīng)看起來像這樣：

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

與此相比，重力形式的驗(yàn)證錯(cuò)誤響應(yīng)更緊湊：

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

但是成功提交的回應(yīng)更大：

 {
  “ 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”：“消息”
}

盡管兩者都包含我們需要的信息，但它們并不遵循共同的慣例，并且都有怪癖。例如，重力表格中的確認(rèn)消息包含HTML，驗(yàn)證消息鍵沒有Input_前綴 - 我們發(fā)送請(qǐng)求時(shí)所需的前綴。另一方面，聯(lián)系表7中的驗(yàn)證錯(cuò)誤包含僅與其前端實(shí)施相關(guān)的信息?，F(xiàn)場(chǎng)鍵無(wú)法立即使用；必須提取它們。

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

 {
  “ issuccess”：false，
  “消息”：“一個(gè)或多個(gè)字段有錯(cuò)誤。請(qǐng)檢查然后重試。
  “ verationerror”：{
    “ Somebodys-name”：“需要此字段?！保?    “ Any-Email”：“需要此字段。”，
    “ Input_3”：“需要此字段?！保?    “ Input_5”：“需要此字段?！?  }
}

在成功提交時(shí)，我們將設(shè)置為true并返回一個(gè)空驗(yàn)證錯(cuò)誤對(duì)象：

 {
  “ Issuccess”：是的，
  “消息”：“感謝您與我們聯(lián)系！我們很快就會(huì)與您聯(lián)系。
  “驗(yàn)證”：{}
}

現(xiàn)在，這是將我們所獲得的東西轉(zhuǎn)變?yōu)樗璧膯栴}。標(biāo)準(zhǔn)化聯(lián)系表7響應(yīng)的代碼是：

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

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

  返回 {
    Issuccess，
    信息，
    驗(yàn)證Error，
  };
};

標(biāo)準(zhǔn)化重力形式響應(yīng)的代碼最終導(dǎo)致以下原因：

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

  返回 {
    Issuccess，
    信息，
    驗(yàn)證Error，
  };
};

我們?nèi)匀蝗鄙僖环N顯示驗(yàn)證錯(cuò)誤，成功消息和切換類的方法。但是，我們有一種整潔的方式來訪問所需的數(shù)據(jù)，并以輕抽取的方式刪除了響應(yīng)中的所有不一致之處。將其放在一起時(shí)，就可以將其放入現(xiàn)有的代碼庫(kù)中，否則我們可以繼續(xù)在其頂部構(gòu)建。

有很多方法可以解決其余部分。有意義的事情將取決于項(xiàng)目。對(duì)于我們主要必須對(duì)狀態(tài)變化做出反應(yīng)的情況，聲明性和反應(yīng)性庫(kù)可以很有幫助。 Alpine.js在此處覆蓋在CSS-tricks上，這非常適合演示，并且在生產(chǎn)地點(diǎn)使用。幾乎沒有任何修改，我們可以重復(fù)上一個(gè)示例中的代碼。我們只需要在正確的位置添加適當(dāng)?shù)闹甘尽?/p>

總結(jié)

匹配WordPress表單插件提供的前端體驗(yàn)，可以相對(duì)簡(jiǎn)單地簡(jiǎn)單，無(wú)曲線的形式來完成，并且可以通過項(xiàng)目重復(fù)使用。我們甚至可以以一種使我們能夠切換插件而不會(huì)影響前端的方式來完成它。

當(dāng)然，制作多頁(yè)面形式，上傳圖像的預(yù)覽或我們通常會(huì)烘烤到插件中的其他高級(jí)功能需要花費(fèi)時(shí)間和精力，但是我們必須滿足的要求越獨(dú)特，使用提交端點(diǎn)就越有意義，因?yàn)槲覀儾槐卦诮o定的前端實(shí)施方面努力解決許多問題，但從未解決過很多問題，但我們想要一個(gè)特定的問題。

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

以上是WordPress REST API提交無(wú)頭式的表單的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！