将 React WordPress 主题中的表单与自定义联系表单和 WP REST API 集成答案

【问题标题】：Integrating a form in React WordPress Theme with Custom Contact Forms and the WP REST API将 React WordPress 主题中的表单与自定义联系表单和 WP REST API 集成
【发布时间】：2017-04-29 03:41:42
【问题描述】：

我已经使用 React/Redux 和 WP REST API 构建了一个完整的 WordPress 主题作为 SPA，但我不需要处理表单，并且发现 Custom Contact Forms 与 WP REST API 兼容，但我可以不知道从哪里开始 - 我错过了一些非常明显的东西吗？

我在管理区域中添加了一个表单，但现在我在 API 中看不到任何用于发布表单数据的端点。有没有人有这方面的经验并且可以指出我正确的方向？

谢谢你:)

【问题讨论】：

标签： wordpress forms rest reactjs

【解决方案1】：

经过一番认真的努力后，我得到了它的工作。

所以你只需要像往常一样在 wordpress admin 中将表单添加到页面内容中。见https://github.com/tlovett1/custom-contact-forms#usage

成功发布表单的诀窍是将以下标头添加到您向WP-API 发出的所有请求中，包括GET 请求。（但最重要的是，当请求具有由 CCF 生成的表单的页面时，标题应该在那里）

'X-WP-Nonce': WP_API_Settings.nonce

WP_API_Settings 被 wp-api 添加到全局范围内

似乎插件 CCF 正在根据请求向表单添加一个 nonce 令牌，因此如果没有该标头，它不知道如何正确/成功地发布表单。

总结：

将表单添加到您的页面内容（在 cms 管理中）
在您的请求中添加 X-WP-Nonce 标头
请求页面或帖子（html 将在content.rendered）
Custom Contact Forms 将生成一个带有适当的 nonce 元数据/令牌的表单
填写表单并点击提交

希望对您有所帮助

查看这个问题，了解我如何完全解决它 https://github.com/tlovett1/custom-contact-forms/issues/285#issuecomment-277035363

【讨论】：

为了获取 WP_API_SETTINGS 对象，您需要登录到该站点。这个对象实际上是为了在 WordPress cms UI 中使用。然而，问题是寻求解决通过 WordPress 从网站前端发布表单数据并通过 WP Rest API 进入数据库的问题。