WordPress REST API提交无头式的表单

如果您要构建WordPress网站，则需要一个充分的理由不选择WordPress表单插件。它们很方便，并提供了大量的自定义，这些定制需要大量的努力才能从头开始构建。它们渲染HTML，验证数据，存储提交并与第三方服务提供集成。

但是，假设我们计划将WordPress用作无头CM。在这种情况下，我们将主要与REST API（或GraphQL）进行交互。前端部分完全成为我们的责任，我们不能再依靠表单插件来在该领域进行繁重的工作。现在，当涉及到前端时，我们在驾驶员座位上。

表格是一个解决的问题，但现在我们必须决定如何处理它们。我们有几个选择：

• 如果有这样的事情，我们是否会使用自己的自定义API？如果没有，我们不想创建一个，我们可以使用一项服务。有许多良好的静态表单提供商，而新的提供商则不断弹出。
• 我们可以继续使用已经使用并利用其验证，存储和集成的WordPress插件吗？

最受欢迎的免费表格插件（联系方式7）具有提交的REST API端点，著名的付费插件，Gravity Forms等也是如此。

从技术角度来看，将表单的数据提交到服务或WordPress插件提供的端点之间没有真正的区别。因此，我们必须根据不同的标准决定。价格是显而易见的。之后，是WordPress安装及其REST API的可用性。提交一个终点为前提，即始终公开可用。在服务方面，这已经很明显，因为我们为他们提供可用的费用。某些设置可能会将WordPress访问仅限于编辑和构建过程。要考虑的另一件事是您要存储数据的位置，尤其是在遵守GPDR法规的方式中。

在提交之外的功能方面，WordPress表单插件很难匹配。他们具有生态系统，可以生成报告，PDF，随时可以与新闻通讯的集成以及付款服务。很少有服务在一个包装中提供很多服务。

即使我们以WordPress主题为基础的“传统”方式以“传统”方式使用WordPress，在许多情况下，使用表单插件的REST API也可能是有意义的。例如，如果我们使用公用设施优先的CSS框架开发主题，则用固定的标记构成了用Bem式的类惯例进行构建的形式，在任何开发人员的嘴中都会产生酸味。

本文的目的是介绍两个WordPress表单插件提交端点，并展示一种重新创建与形式相关的典型行为的方法，我们已经习惯了开箱即用。一般而言，提交表格时，我们必须处理两个主要问题。一个是数据本身的提交，另一个是向用户提供有意义的反馈。

所以，让我们从那里开始。

终点

提交数据是更简单的部分。这两个端点都期望一个发布请求，并且URL的动态部分是表单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”选项。无需创建API键，因为表单提交端点不需要它。

更新（2024年9月10日）： ID在触点7版本5.8中进行哈希，但仍可以在表单编辑页面的URL中找到。

请求的正文

我们的示例表格有五个字段，具有以下规则：

• 必需的文本字段
• 必需的电子邮件字段
• 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”
}

提交数据

如果我们将预期的键用于输入的名称属性，我们可以节省很多工作。否则，我们必须将输入名称映射到键。

将所有内容汇总在一起，我们得到了这样的HTML结构，用于联系表7：

/fackback” method =“ post”> 某人的名字 提交

对于重力形式，我们只需要切换操作和名称属性：

/combissions” method =“ post”> 某人的名称 提交

由于所有必需的信息都可以在HTML中获得，因此我们准备发送请求。一种方法是将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）;

我们几乎没有努力发送提交，但至少可以说，用户体验不足。我们应尽可能多的指导成功地提交表格。至少，这意味着我们需要：

• 显示全局错误或成功消息，
• 添加内联字段验证错误消息和可能的方向，以及
• 将注意力集中在需要特殊课程的零件上。

现场验证

除了使用内置的HTML表单验证外，我们还可以使用JavaScript进行其他客户端验证和/或利用服务器端验证。

当涉及服务器端验证时，联系表7和重力表格提供了框架，并作为响应的一部分返回验证错误消息。这很方便，因为我们可以控制WordPress管理员的验证规则。

对于更复杂的验证规则，例如条件字段验证，仅依靠服务器端可能是有意义的，因为将前端JavaScript验证与插件设置同步可能成为维护问题。

如果我们仅处理服务器端验证，那么任务就会成为解析响应，提取相关数据以及DOM操作（例如插入元素和切换类名称）。

响应消息

当存在验证错误的情况下，响应7看起来像这样：

 {
  “进入”： ”＃”，
  “状态”：“ 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”，
      “消息”：“您必须在发送消息之前接受条款和条件。”，
      “ idref”：null，
      “ error_id”：“ -ve-fake-terms”
    }
  这是给出的
}

在成功提交时，响应看起来像这样：

 {
  “进入”： ”＃”，
  “状态”：“ mail_sent”，
  “消息”：“谢谢您的消息。它已发送。”，
  “ 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_前缀 - 我们发送请求时所需的前缀。另一方面，联系表7中的验证错误包含仅与其前端实施相关的信息。现场键无法立即使用；必须提取它们。

在这样的情况下，最好选择一种理想的格式，而不是与我们得到的响应合作。一旦有了，我们就可以找到将原始响应转换为我们认为合适的方法的方法。如果我们将两种情况中的最佳状态结合在一起，并删除用例中的无关零件，那么我们最终得到了这样的事情：

 {
  “ issuccess”：false，
  “消息”：“一个或多个字段有错误。请检查然后重试。
  “ verationerror”：{
    “ Somebodys-name”：“需要此字段。”，
    “ Any-Email”：“需要此字段。”，
    “ Input_3”：“需要此字段。”，
    “ Input_5”：“需要此字段。”
  }
}

在成功提交时，我们将设置为true并返回一个空验证错误对象：

 {
  “ Issuccess”：是的，
  “消息”：“感谢您与我们联系！我们很快就会与您联系。
  “验证”：{}
}

现在，这是将我们所获得的东西转变为所需的问题。标准化联系表7响应的代码是：

 const narryizecontactform7Response =（wendesp）=> {
  //其他可能的状态是不同的错误
  const issuccess = wenders.status ==='mail_sent';
  //为所有状态提供一条消息
  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，
  };
};

我们仍然缺少一种显示验证错误，成功消息和切换类的方法。但是，我们有一种整洁的方式来访问所需的数据，并以轻抽取的方式删除了响应中的所有不一致之处。将其放在一起时，就可以将其放入现有的代码库中，否则我们可以继续在其顶部构建。

有很多方法可以解决其余部分。有意义的事情将取决于项目。对于我们主要必须对状态变化做出反应的情况，声明性和反应性库可以很有帮助。 Alpine.js在此处覆盖在CSS-tricks上，这非常适合演示，并且在生产地点使用。几乎没有任何修改，我们可以重复上一个示例中的代码。我们只需要在正确的位置添加适当的指示。

总结

匹配WordPress表单插件提供的前端体验，可以相对简单地简单，无曲线的形式来完成，并且可以通过项目重复使用。我们甚至可以以一种使我们能够切换插件而不会影响前端的方式来完成它。

当然，制作多页面形式，上传图像的预览或我们通常会烘烤到插件中的其他高级功能需要花费时间和精力，但是我们必须满足的要求越独特，使用提交端点就越有意义，因为我们不必在给定的前端实施方面努力解决许多问题，但从未解决过很多问题，但我们想要一个特定的问题。

使用WordPress作为无头CMS访问表单插件的REST API来登录提交端点，肯定会成为更广泛使用的实践。这是值得探索和牢记的事情。将来，看到WordPress表单插件主要是在这样的无头环境中工作的，我不会感到惊讶。我可以想象一个插件，前端渲染是一个附加功能，不是其核心的组成部分。将会带来什么后果，如果它可以取得商业上的成功，仍然有待探索，但是一个令人着迷的观看进化的空间。

以上是WordPress REST API提交无头式的表单的详细内容。更多信息请关注PHP中文网其他相关文章！